1. Kế thừa nguyên mẫu trong JavaScript là gì?

1.1. Nguyên mẫu là gì?

Nguyên mẫu (Prototype) là một đối tượng được liên kết với mọi hàm và đối tượng theo mặc định trong Js, trong đó thuộc tính nguyên mẫu của hàm có thể truy cập và sửa đổi được và thuộc tính nguyên mẫu của đối tượng (hay còn gọi là thuộc tính) không hiển thị. Mọi hàm đều bao gồm đối tượng nguyên mẫu theo mặc định.

1.2. Kế thừa nguyên mẫu là gì?

Khi chúng ta muốn đọc một thuộc tính từ object đó và nó bị thiếu, JavaScript sẽ tự động lấy nó từ nguyên mẫu. Trong lập trình, điều đó được gọi là thừa kế nguyên mẫu. Nhiều tính năng ngôn ngữ thú vị và kỹ thuật lập trình được dựa trên nó. Tất cả các đối tượng Js kế thừa các thuộc tính và phương thức từ một nguyên mẫu.

  • Đối tượng date kế thừa từ Date.prototype
  • Đối tượng array kế thừa từ Array.prototype
  • Đối tượng Person kế thừa từ Person.prototype

Object.prototype là nguyên mẫu cơ sở của tất cả các đối tượng. Có nghĩa là: đối tượng date , array , person đều được kế thừa từ Object.prototype

Ví dụ:

Có một đối tượng được tạo bằng cú pháp: const car = {}

Một cái được tạo bằngnew Object với cú pháp: const car = new Object()

Trong mọi trường hợp, nguyên mẫu của carObject .

Với mảng là đối tượng nguyên mẫu là Array

const list = []
//or
const list = new Array()

Ta có thể xác minh điều này bằng cách kiểm tra với Object.getPrototypeOf()Object.prototype.isPrototypeOf()

const car = {}
const list = []
Object.getPrototypeOf(car) === Object.prototype
Object.prototype.isPrototypeOf(car)


Object.getPrototypeOf(list) === Array.prototype
Array.prototype.isPrototypeOf(list)

2. Tạo một nguyên mẫu trong JavaScript

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 khở tạo đối tượng. Với một hàm khởi tạo, ta có thể sử dụng từ khóa new để tạo các đối tượng mới từ cùng một nguyên mẫu.

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

document.write
("The nationality of my father is " + myFather.nationality + ". The nationality of my mother is " + myMother.nationality);
</script>

Ngoài ra ta cũng có thể sử dụng Object.create() . Đối số đầu tiên được truyền là đối tượng được sử dụng làm nguyên mẫu.

const car = Object.create({})
const list = Object.create(Array)

Chú ý

Ta có thể khởi tạo mảng bằng cách sử dụng const list = Object.create(Array.prototype)

Trong trường hợp này Array.isPrototypeOf(list) là sai, trong khi Array.prototype.isPrototypeOf(list) là đúng.

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

Ta 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 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 nguyên mẫu ta cần thêm thuộc tính vào hàm khởi tạo. Các thuộc tính nguyên mẫu có thể có giá trị nguyên mẫu (giá trị mặc định).

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

4. Thêm phương thức vào nguyên mẫu trong JavaScript

Ta không thể thêm một phương thức mới vào một nguyên mẫu giống như cách thêm một phương thức 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ó. Để thêm phương thức mới vào nguyên mẫu ta cần thêm phương thức vào hàm khởi tạo.

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;};
}

5. Sử dụng thuộc tính nguyên mẫu

Thuộc tính Js prototype cho phép ta thêm các thuộc tính mới vào các hàm tạo đối tượng:

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.nationality = "English";

const myFather = new Person("John", "Doe", 50, "blue");
document.write
("The nationality of my father is " + myFather.nationality); 
</script>

Thuộc tính Js prototype cũng cho phép ta thêm các phương thức mới vào các hàm tạo đối tượng:

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.name = function() {
  return this.firstName + " " + this.lastName
};

const myFather = new Person("John", "Doe", 50, "blue");
document.write
("My father is " + myFather.name()); 
</script>