Mục đích của nguyên mẫu là gì?

Question

thể trùng lặp:
Understanding prototypal inheritance in JavaScript

OK, Vì vậy, tôi hơi mới để ý tưởng về OOP trong JS.

sự khác biệt giữa hai đoạn những mã được gì viết dưới đây:

function animal(){ 
    this.name = 'rover'; 
    this.set_name = function(name){ 
     this.name = name; 
    } 
} 

function animal(){ 
    this.name = 'rover'; 
} 
animal.prototype.set_name = function(name){ 
    this.name = name; 
} 

Cả hai đều làm điều tương tự, vì vậy có gì khác biệt?

Answer 1

Sử dụng nguyên mẫu giúp tạo đối tượng nhanh hơn, vì chức năng đó không phải được tạo lại mỗi lần tạo đối tượng mới.

Khi bạn làm điều này:

function animal(){ 
    this.name = 'rover'; 
    this.set_name = function(name){ 
     this.name = name; 
    } 
} 

Chức năng set_name được tạo ra de novo mỗi và mỗi khi bạn tạo một con vật. Nhưng khi bạn làm điều này

animal.prototype.set_name = function(name){ 
    this.name = name; 
} 

Chức năng này không phải được tạo lại mỗi lần; nó tồn tại ở một nơi trong nguyên mẫu. Vì vậy, khi bạn gọi someAnimal.set_name("Ubu"); ngữ cảnh this sẽ được đặt thành someAnimal và (chỉ một và duy nhất) chức năng set_name sẽ được gọi.

---

Có một lợi thế để sử dụng cú pháp đầu tiên mặc dù: chức năng tạo ra theo cách này sẽ có quyền truy cập vào dữ liệu cá nhân:

function animal(){ 
    var privateData = 'foo' 

    this.name = 'rover'; 
    this.set_name = function(name){ 
     this.name = name; 
     alert(privateData); //will alert 'foo' 
    } 
} 

Douglas Crockford gọi chức năng tạo ra như thế này "đặc quyền" vì lý do đó : họ có quyền truy cập vào cả dữ liệu công khai và riêng tư.

Answer 2

Sự khác biệt xuất hiện khi bạn tạo đối tượng mới từ những chức năng

var animal1 = new animal(); 

Tất cả các đối tượng được tạo ra bởi hàm đầu tiên sẽ có khác nhau name và set_name tài sản. Tuy nhiên, tất cả các đối tượng được tạo bởi hàm thứ hai sẽ chia sẻ thuộc tính set_name.

Answer 3

Trong ví dụ đầu tiên, mỗi động vật riêng biệt có một thuộc tính riêng cho hàm set_name, trong khi trong ví dụ thứ hai chúng có cùng chức năng thông qua nguyên mẫu của chúng.

Ưu điểm của phiên bản đầu tiên là các phương thức có thể truy cập các biến cục bộ (riêng) được khai báo bên trong hàm tạo.

Lợi thế của phương pháp thứ hai là nó cần ít bộ nhớ hơn (vì bạn chỉ lưu trữ phương thức một lần thay vì một triệu lần) và hoạt động hiệu quả hơn trong các công cụ JS hiện tại.

Sử dụng phương pháp thứ hai, bạn cũng có thể sửa đổi hoặc thêm phương thức vào lớp theo cách cũng ảnh hưởng đến các trường hợp đã được tạo.