Nguyên mẫu JavaScript được giải thích bằng các ví dụ

nguyên mẫu

JavaScript là một ngôn ngữ dựa trên nguyên mẫu, do đó hiểu đối tượng nguyên mẫu là một trong những khái niệm quan trọng nhất mà những người học JavaScript cần biết. Bài viết này sẽ cung cấp cho bạn một cái nhìn tổng quan ngắn gọn về đối tượng Prototype thông qua các ví dụ khác nhau. Trước khi đọc bài viết này, bạn cần có hiểu biết cơ bản về this tham chiếu trong JavaScript.

đối tượng nguyên mẫu

Để rõ ràng, chúng ta hãy xem xét ví dụ sau:

function Point2D(x, y) {
  this.x = x;
  this.y = y;
}

Như Point2D chức năng được khai báo, một thuộc tính mặc định có tên prototype sẽ được tạo cho nó (lưu ý rằng, trong JavaScript, một hàm cũng là một đối tượng). Các prototype thuộc tính là một đối tượng có chứa một constructor tài sản và giá trị của nó là Point2D chức năng: Point2D.prototype.constructor = Point2D. Và khi bạn gọi Point2D với new từ khóa, các đối tượng mới được tạo sẽ kế thừa tất cả các thuộc tính từ Point2D.prototype. Để kiểm tra điều đó, bạn có thể thêm một phương thức có tên move vào trong Point2D.prototype như sau:

Point2D.prototype.move = function(dx, dy) {
  this.x += dx;
  this.y += dy;
}

var p1 = new Point2D(1, 2);
p1.move(3, 4);
console.log(p1.x); // 4
console.log(p1.y); // 6

Các Point2D.prototype được gọi là đối tượng nguyên mẫu hoặc nguyên mẫu của p1 đối tượng và cho bất kỳ đối tượng nào khác được tạo bằng new Point2D(...) cú pháp. Bạn có thể thêm nhiều thuộc tính hơn vào Point2D.prototype đối tượng như bạn muốn. Mẫu phổ biến là khai báo các phương thức để Point2D.prototype và các thuộc tính khác sẽ được khai báo trong hàm tạo.

Các đối tượng tích hợp trong JavaScript được xây dựng theo cách tương tự. Ví dụ:

• Nguyên mẫu của các đối tượng được tạo bằng new Object() hoặc {} cú pháp là Object.prototype.
• Nguyên mẫu của các mảng được tạo bằng new Array() hoặc [] cú pháp là Array.prototype.
• Và như vậy với các đối tượng tích hợp khác như Date và RegExp.

Object.prototype được kế thừa bởi tất cả các đối tượng và nó không có nguyên mẫu (nguyên mẫu của nó là null).

chuỗi nguyên mẫu

Cơ chế chuỗi nguyên mẫu rất đơn giản: Khi bạn truy cập một thuộc tính p trên đối tượng objcông cụ JavaScript sẽ tìm kiếm thuộc tính này bên trong obj vật. Nếu công cụ không tìm kiếm, nó sẽ tiếp tục tìm kiếm trong nguyên mẫu của obj đối tượng và như vậy cho đến khi đạt được Object.prototype. Nếu sau khi tìm kiếm kết thúc và không tìm thấy gì, kết quả sẽ là undefined. Ví dụ:

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = Object.create(obj1);
obj2.a = 2;

console.log(obj2.a); // 2
console.log(obj2.b); // 2
console.log(obj2.c); // undefined

Trong đoạn trích trên, tuyên bố var obj2 = Object.create(obj1) sẽ tạo ra obj2 đối tượng với nguyên mẫu obj1 vật. Nói cách khác, obj1 trở thành nguyên mẫu của obj2 thay vì Object.prototype theo mặc định. Bạn có thể thấy, b không phải là tài sản của obj2, bạn vẫn có thể truy cập nó thông qua chuỗi nguyên mẫu. Vì c tài sản, tuy nhiên, bạn nhận được undefined giá trị bởi vì nó không thể được tìm thấy trong obj1 và Object.prototype.

Các lớp học

Trong ES2016, bây giờ chúng ta có thể sử dụng Class từ khóa cũng như các phương pháp được đề cập ở trên để thao tác prototype. JavaScript Class thu hút các nhà phát triển từ nền tảng OOP, nhưng về cơ bản, nó hoạt động giống như trên.

class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width
  }
}

const square = new Rectangle(10, 10)

console.log(square.area) // 100

Điều này về cơ bản giống như:

function Rectangle(height, width) {
  this.height = height
  this.width = width
}

Rectangle.prototype.calcArea = function calcArea() {
  return this.height * this.width
}

Các getter và setter các phương thức trong các lớp liên kết một thuộc tính Đối tượng với một hàm sẽ được gọi khi thuộc tính đó được tra cứu. Nó chỉ là đường cú pháp để giúp làm cho nó dễ dàng hơn tra cứu hoặc bộ tính chất.

Thông tin thêm về Nguyên mẫu JS: