Nguyên mẫu JavaScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về các nguyên mẫu trong JavaScript với sự trợ giúp của các ví dụ.

Trước khi bạn tìm hiểu các nguyên mẫu, hãy nhớ xem các hướng dẫn sau:

• JavaScript Objects
• JavaScript Constructor Function

Như bạn đã biết, bạn có thể tạo một đối tượng trong JavaScript bằng cách sử dụng một hàm tạo đối tượng. Ví dụ,

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// creating objects
const person1 = new Person();
const person2 = new Person();

Trong ví dụ trên,  function Person()là một hàm tạo đối tượng. Chúng tôi đã tạo ra hai đối tượng person1và person2từ nó.

Nguyên mẫu JavaScript

Trong JavaScript, mọi hàm và đối tượng đều có thuộc tính có tên là nguyên mẫu theo mặc định. Ví dụ,

function Person () {
    this.name = 'John',
    this.age = 23
}

const person = new Person();

// checking the prototype value
console.log(Person.prototype); // { ... }

Trong ví dụ trên, chúng ta đang cố gắng truy cập thuộc tính nguyên mẫu của một Personhàm khởi tạo.

Vì thuộc tính nguyên mẫu không có giá trị tại thời điểm này, nó hiển thị một đối tượng trống {…}.

Kế thừa nguyên mẫu

Trong JavaScript, một nguyên mẫu có thể được sử dụng để thêm các thuộc tính và phương thức vào một hàm khởi tạo. Và các đối tượng kế thừa các thuộc tính và phương thức từ một nguyên mẫu. Ví dụ,

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// creating objects
const person1 = new Person();
const person2 = new Person();

// adding property to constructor function
Person.prototype.gender = 'male';

// prototype value of Person
console.log(Person.prototype);

// inheriting the property from prototype
console.log(person1.gender);
console.log(person2.gender);

Đầu ra

{ gender: "male" }
male
male

Trong chương trình trên, chúng ta đã thêm một thuộc tính mới gendervào Personhàm khởi tạo bằng cách sử dụng:

Person.prototype.gender = 'male';

Sau đó đối tượng person1và person2kế thừa thuộc tính gendertừ thuộc tính nguyên mẫu của Personhàm khởi tạo.

Do đó, cả hai đối tượng person1và person2có thể truy cập thuộc tính giới tính .

Lưu ý: Cú pháp để thêm thuộc tính vào một hàm tạo đối tượng là:

objectConstructorName.prototype.key = 'value';

Nguyên mẫu được sử dụng để cung cấp thuộc tính bổ sung cho tất cả các đối tượng được tạo từ một hàm khởi tạo.

Thêm các phương thức vào một hàm tạo bằng cách sử dụng nguyên mẫu

Bạn cũng có thể thêm các phương thức mới vào một hàm khởi tạo bằng cách sử dụng nguyên mẫu. Ví dụ,

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// creating objects
const person1 = new Person();
const person2 = new Person();

// adding a method to the constructor function
Person.prototype.greet = function() {
    console.log('hello' + ' ' +  this.name);
}

person1.greet(); // hello John
person2.greet(); // hello John

Trong chương trình trên, một phương thức mới greetđược thêm vào Personhàm khởi tạo bằng cách sử dụng một nguyên mẫu.

Thay đổi nguyên mẫu

Nếu một giá trị nguyên mẫu được thay đổi, thì tất cả các đối tượng mới sẽ có giá trị thuộc tính thay đổi. Tất cả các đối tượng được tạo trước đó sẽ có giá trị trước đó. Ví dụ,

// constructor function
function Person() {
    this.name = 'John'
}

// add a property
Person.prototype.age = 20;

// creating an object
const person1 = new Person();

console.log(person1.age); // 20

// changing the property value of prototype
Person.prototype = { age: 50 }

// creating new object
const person3 = new Person();

console.log(person3.age); // 50
console.log(person1.age); // 20

Lưu ý : Bạn không nên sửa đổi nguyên mẫu của các đối tượng tích hợp sẵn JavaScript tiêu chuẩn như chuỗi, mảng, v.v. Đây được coi là một thực hành không tốt.

Chuỗi nguyên mẫu JavaScript

Nếu một đối tượng cố gắng truy cập cùng một thuộc tính có trong hàm khởi tạo và đối tượng nguyên mẫu, đối tượng sẽ lấy thuộc tính từ hàm khởi tạo. Ví dụ,

function Person() {
    this.name = 'John'
}

// adding property 
Person.prototype.name = 'Peter';
Person.prototype.age = 23

const person1 = new Person();

console.log(person1.name); // John
console.log(person1.age); // 23

Trong chương trình trên, một tên thuộc tính được khai báo trong hàm khởi tạo và cũng trong thuộc tính nguyên mẫu của hàm tạo.

Khi chương trình thực thi, hãy person1.nametìm trong hàm khởi tạo để xem có thuộc tính nào được đặt tên hay không name. Vì hàm khởi tạo có thuộc tính name với giá trị 'John', nên đối tượng sẽ nhận giá trị từ thuộc tính đó.

Khi chương trình thực thi, hãy person1.agetìm trong hàm khởi tạo để xem có thuộc tính nào được đặt tên hay không age. Vì hàm khởi tạo không có thuộc agetính, chương trình sẽ xem xét đối tượng nguyên mẫu của hàm tạo và đối tượng kế thừa thuộc tính từ đối tượng nguyên mẫu (nếu có).

Lưu ý : Bạn cũng có thể truy cập thuộc tính nguyên mẫu của một hàm khởi tạo từ một đối tượng.

function Person () {
    this.name = 'John'
}

// adding a prototype
Person.prototype.age = 24;

// creating object
const person = new Person();

// accessing prototype property
console.log(person.__proto__);   // { age: 24 }

Trong ví dụ trên, một personđối tượng được sử dụng để truy cập thuộc tính nguyên mẫu bằng cách sử dụng __proto__. Tuy nhiên, __proto__đã không còn được dùng nữa và bạn nên tránh sử dụng nó.