Javascript OOP phần II

Xin chào các bạn, tôi là Bennison, Trong blog này, tôi sẽ giải thích cách OOP hoạt động trong Javascript và giải thích nó khác với OOP cổ điển như thế nào. Trước khi đọc bài viết này, vui lòng đọc blog trước của tôi về các nguyên tắc cơ bản của OOP .

Nguyên mẫu là gì?

Trong Javascript, chúng ta có một thứ gọi là nguyên mẫu, Trong JavaScript, mọi đối tượng sẽ được liên kết với một nguyên mẫu nhất định. Vì vậy, mỗi đối tượng có nguyên mẫu. nguyên mẫu cũng chứa các thuộc tính và phương thức.
Ở đây, điều quan trọng là đối tượng có thể truy cập các phương thức và thuộc tính nguyên mẫu.

OOP cổ điển so với Javascript OOP

Trong OOP cổ điển, một đối tượng được khởi tạo từ lớp, được gọi là khởi tạo. Ở đây, lớp chỉ là một kế hoạch chi tiết để tạo Đối tượng.
Nhưng trong Javascript, thuật ngữ này chỉ khác. Ở đây mỗi đối tượng được liên kết với các đối tượng khác và những đối tượng đó được gọi là nguyên mẫu .

Kế thừa nguyên mẫu có nghĩa là một nguyên mẫu có chứa các phương thức và các nguyên mẫu có thể truy cập được đối với tất cả các đối tượng được liên kết với nguyên mẫu đó.
Vì vậy, đối tượng kế thừa các phương thức và thuộc tính từ nguyên mẫu, đây là cách nó được gọi là kế thừa nguyên mẫu. sự kế thừa này khác với sự kế thừa lớp là một lớp được kế thừa từ lớp kia. Nhưng trong trường hợp này, thể hiện kế thừa từ lớp cơ sở.
Trong hình trên, trong javascript OOP mũi tên hướng lên trên, điều này có nghĩa là đối tượng ủy quyền các hành vi của nó cho các nguyên mẫu.
Trong OOP cổ điển, các phương thức được sao chép từ lớp sang các thể hiện (đối tượng).

const numbers = [1, 2, 3, 4,5];
numbers.map((num) => num * 2)

Nếu chúng ta duyệt google để hiểu phương thức bản đồ javascript, trong tài liệu MDN, chúng ta có thể thấy điều đó như Array.prototype.map()

Ở đây, Array.prototype () là nguyên mẫu cho tất cả các đối tượng mảng mà chúng tôi tạo trong JavaScript. Do đó, tất cả các mảng đều có quyền truy cập vào phương thức bản đồ.
Bây giờ, đối tượng nguyên mẫu này chứa tất cả các phương thức mảng bao gồm cả bản đồ.

Vì vậy, trong ví dụ trên, “ Array.Prototype” là nguyên mẫu của mảng số, biến mảng số đó được liên kết với các nguyên mẫu. Do đó, nó có quyền truy cập vào tất cả các phương thức được định nghĩa trên đối tượng “ array.prototype ”. Vì vậy, trong ví dụ trên, mảng “số” kế thừa phương thức map.
Trong Javascript, chúng ta có thể triển khai kế thừa nguyên mẫu theo ba cách, một là hàm tạo, cách thứ hai là các lớp ES6 và cách cuối cùng là phương thức Object.Create().

Một hàm tạo được sử dụng để tạo các đối tượng từ các hàm. đây là cách các đối tượng tích hợp sẵn như các phương thức Array và map được triển khai.

Đây là một giải pháp thay thế hiện đại cho hàm tạo. Các lớp ES6 hoạt động giống như chức năng xây dựng. Lớp ES6 không hoạt động như một OOP cổ điển. Phía sau, các lớp ES6 được triển khai với các hàm Constructor.

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    console.log(this.firstName + ' ' + this.lastName);
  }
}

const user = new User('Bennison', 'J');

console.log(user); // { firstName: 'Bennison', lastName: 'J' }

console.log(user.hasOwnProperty('firstName')); // true
console.log(user.hasOwnProperty('getFullName')); // false

Và ví dụ trên chúng ta có thể thấy phương thức 'hasOwnProperty' giúp chúng ta kiểm tra thuộc tính, và phương thức là thuộc tính riêng của đối tượng đó gọi là phương thức hasOwnProperty.

Phương thức “object.create()” là cách dễ dàng nhất để liên kết một đối tượng với một đối tượng nguyên mẫu.

const objOne = {
  firstName: 'Bennison',
  lastName: 'J',
  getFullName: function () {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const objTwo = Object.create(objOne);

console.log(objTwo); // {}
objTwo.getFullName(); //  Bennison J

Phương thức “Object.create” trả về một đối tượng trống với nguyên mẫu. và nguyên mẫu sẽ là những gì chúng ta đã truyền cho phương thức đó.

Tôi hy vọng, trong Blog này, chúng ta đã học được những kiến thức cơ bản về kế thừa nguyên mẫu trong Javascript, nếu bạn không hiểu các ví dụ trên, đừng lo lắng, tôi sẽ giải thích thêm về các khái niệm này trong các blog sắp tới của mình. Cảm ơn đã đọc blog này, hẹn gặp lại .

JavaScript OOP (Nguyên mẫu) #2