Các nguyên mẫu đối tượng trong JavaScript

Mỗi đối tượng JavaScript có một nguyên mẫu. Nguyên mẫu cũng là một đối tượng. Tất cả các đối tượng JavaScript kế thừa thuộc tính và phương thức của chúng từ nguyên mẫu của chúng.

Nguyên mẫu JavaScript

Tất cả các đối tượng JavaScript kế thừa các thuộc tính và phương thức từ nguyên mẫu của chúng. Đối tượng được tạo ra bằng cách sử dụng một đối tượng chữ, hoặc với đối tượng mới (), kế thừa từ một mẫu thử nghiệm gọi là Object.prototype.

Đối tượng được tạo với Date() mới kế thừa Date.prototype.

Các Object.prototype là trên tầng cao nhất của chuỗi nguyên mẫu.

Tất cả các đối tượng JavaScript (Date, Array, RegExp, Function, ….) kế thừa từ Object.prototype.

Tạo một nguyên mẫu

Cách tiêu chuẩn để tạo ra một nguyên mẫu đối tượng là sử dụng một hàm dựng đối tượng:

function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}

Với một hàm dựng, bạn có thể sử dụng từ khoá mới để tạo các đối tượng mới từ cùng một nguyên mẫu:

var myFather = new Person(“John”, “Doe”, 50, “blue”);
var myMother = new Person(“Sally”, “Rally”, 48, “green”);

Hàm dựng là nguyên mẫu cho đối tượng Person.

Thêm các thuộc tính và phương thức cho đối tượng

Đôi khi bạn muốn thêm thuộc tính mới (hoặc phương thức) vào một đối tượng hiện có.

Đôi khi bạn muốn thêm thuộc tính mới (hoặc phương thức) cho tất cả các đối tượng hiện có của một kiểu nhất định.

Đôi khi bạn muốn thêm thuộc tính mới (hoặc phương thức) vào một nguyên mẫu đối tượng.

Thêm một thuộc tính vào một đối tượng

Thêm một thuộc tính mới vào đối tượng hiện tại khá dễ dàng:

myFather.nationality = “English”;

Thuộc tính sẽ được thêm vào myFather. Không phải với myMother. Không phải đối với bất kỳ đối tượng person nào khác.

Thêm một phương thức vào một đối tượng

Thêm một phương thức mới vào đối tượng hiện tại cũng dễ dàng:

myFather.name = function () {
return this.firstName + ” ” + this.lastName;
};

Phương thức sẽ được thêm vào myFather. Không phải với myMother.

Thêm thuộc tính vào một nguyên mẫu

Bạn không thể thêm một thuộc tính mới vào một nguyên mẫu giống như cách bạn thêm một thuộc tính mới vào một đối tượng hiện có, bởi vì nguyên mẫu không phải là một đối tượng hiện có.

Person.nationality = “English”;

Để thêm thuộc tính mới vào một nguyên mẫu, bạn phải thêm thuộc tính vào hàm tạo:

function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = “English”;
}

Các thuộc tính nguyên mẫu có thể có giá trị nguyên mẫu (giá trị mặc định).

Thêm các phương thức vào một nguyên mẫu

Hàm dựng của bạn cũng có thể xác định phương thức:

function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.name = function() {return this.firstName + ” ” + this.lastName;};
}

Sử dụng nguyên mẫu

Thuộc tính prototype JavaScript cho phép bạn thêm thuộc tính mới vào một nguyên mẫu hiện có:

function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = “English”;

Thuộc tính prototype JavaScript cũng cho phép bạn thêm các phương thức mới vào nguyên mẫu hiện có:

function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + ” ” + this.lastName;
};

Chỉ sửa đổi nguyên mẫu của riêng bạn. Không bao giờ sửa đổi nguyên mẫu của các đối tượng JavaScript chuẩn.