HomeLập trìnhJavaScriptHãy làm sáng...

Hãy làm sáng tỏ từ khóa ‘mới’ của JavaScript


của Cynthia Lee

Xs5uT7p1wxeZ1fjARsfzqHlQu3aMbaZtwKt5

Cuối tuần qua, tôi đã hoàn thành JavaScript: The Hard Part của Will Sentance. Nghe có vẻ không phải là cách tuyệt vời nhất để trải qua một ngày cuối tuần, nhưng tôi thực sự thấy khá thú vị và thư giãn khi hoàn thành khóa học. Nó đề cập đến lập trình hàm, các hàm bậc cao hơn, bao đóng và JavaScript không đồng bộ.

Đối với tôi, điểm nổi bật của khóa học là cách anh ấy mở rộng cách tiếp cận JavaScript đối với Lập trình hướng đối tượng (OOP) và làm sáng tỏ điều kỳ diệu đằng sau Mới nhà điều hành. Bây giờ tôi đã có một sự hiểu biết toàn diện về những gì diễn ra bên dưới mui xe khi Mới toán tử được sử dụng.

Lập trình hướng đối tượng trong JavaScript

OjGA-narSWLOzyUTLWqTITXh4qD6KIcE36ag
Ảnh của Nick Karvounis trên Bapt

Lập trình hướng đối tượng (OOP) là một mô hình lập trình dựa trên khái niệm “đối tượng”. Dữ liệu và chức năng (thuộc tính và phương thức) được nhóm trong một đối tượng.

Một đối tượng trong JavaScript là một tập hợp các cặp khóa-giá trị. Các cặp khóa-giá trị này là thuộc tính của đối tượng. Một thuộc tính có thể là một mảng, một hàm, một đối tượng hoặc bất kỳ kiểu dữ liệu nguyên thủy nào như chuỗi hoặc số nguyên.

Chúng ta có những kỹ thuật nào trong hộp công cụ JavaScript để tạo đối tượng?

Giả sử rằng chúng ta đang tạo người dùng trong trò chơi mà chúng ta vừa thiết kế. Làm cách nào để chúng tôi lưu trữ thông tin chi tiết về người dùng như tên, điểm của họ và triển khai các phương thức như tăng điểm? Đây là hai tùy chọn để tạo đối tượng cơ bản.

Tùy chọn 1 – Ký hiệu chữ đối tượng

let user1 = {
  name: "Taylor",
  points: 5,
  increment: function() {
    user1.points++;
  }
};

Đối tượng JavaScript theo nghĩa đen là danh sách các cặp tên-giá trị được đặt trong dấu ngoặc nhọn. Trong ví dụ trên, đối tượng ‘user1’ được tạo và dữ liệu liên quan được lưu trữ trong đó.

Đọc thêm  23 trang web miễn phí để học JavaScript năm 2022

Tùy chọn 2 — Object.create()

Object.create(proto, [ propertiesObject ])

Object.create phương pháp chấp nhận hai đối số:

  1. proto: đối tượng sẽ là nguyên mẫu của đối tượng mới được tạo. Nó phải là một đối tượng hoặc null.
  2. propertiesObject: thuộc tính của đối tượng mới. Đối số này là tùy chọn.

Về cơ bản, bạn đi vào Object.create một đối tượng mà bạn muốn kế thừa từ đó và nó trả về một đối tượng mới kế thừa từ đối tượng mà bạn đã chuyển vào nó.

let user2 = Object.create(null);

user2.name = "Cam";
user2.points = 8;
user2.increment = function() {
  user2.points++;
}

Các tùy chọn tạo đối tượng cơ bản ở trên là lặp đi lặp lại. Nó yêu cầu mỗi cái phải được tạo thủ công.

Làm thế nào để chúng ta vượt qua điều này?

Các giải pháp

Giải pháp 1 — Tạo đối tượng bằng hàm

Một giải pháp đơn giản là viết một hàm để tạo người dùng mới.

function createUser(name, points) {
  let newUser = {};
  newUser.name = name;
  newUser.points = points;
  newUser.increment = function() {
    newUser.points++;
  };
  return newUser;
}

Để tạo người dùng, bây giờ bạn sẽ nhập thông tin vào các tham số của hàm.

let user1 = createUser("Bob", 5);
user1.increment();

Tuy nhiên, hàm gia tăng trong ví dụ trên chỉ là một bản sao của hàm gia tăng ban đầu. Đây không phải là cách tốt để viết mã của bạn, vì bất kỳ thay đổi tiềm ẩn nào đối với chức năng sẽ cần được thực hiện thủ công cho từng đối tượng.

Giải pháp 2 — Sử dụng bản chất nguyên mẫu của JavaScript

Không giống như các ngôn ngữ hướng đối tượng như Python và Java, JavaScript không có các lớp. Nó sử dụng khái niệm nguyên mẫu và xâu chuỗi nguyên mẫu để kế thừa.

Khi bạn tạo một mảng mới, bạn sẽ tự động có quyền truy cập vào các phương thức tích hợp sẵn, chẳng hạn như Array.join, Array.sortArray.filter. Điều này là do các đối tượng mảng kế thừa các thuộc tính từ Array.prototype.

Đọc thêm  Cách hiểu từ khóa này và ngữ cảnh trong JavaScript
CHrqNxf5I7tIo4-CfbSXqC6fnDd2H273ieWJ
Tín dụng hình ảnh: Chuỗi nguyên mẫu JavaScript, Chuỗi phạm vi và Hiệu suất của Diego Castorina

Mọi hàm JavaScript đều có thuộc tính nguyên mẫu, thuộc tính này trống theo mặc định. Bạn có thể thêm các hàm vào thuộc tính nguyên mẫu này và ở dạng này, nó được gọi là một phương thức. Khi một hàm kế thừa được thực thi, giá trị của this trỏ tới đối tượng kế thừa.

function createUser(name, points) {
  let newUser = Object.create(userFunction);
  newUser.name = name;
  newUser.points = points;
  return newUser;
}

let userFunction = {
  increment: function() {this.points++};
  login: function() {console.log("Please login.")};
}

let user1 = createUser("Bob", 5);
user1.increment();

Khi mà user1 đối tượng đã được tạo, một liên kết chuỗi nguyên mẫu với userFunction đã được hình thành.

Khi nào user1.increment() nằm trong ngăn xếp cuộc gọi, trình thông dịch sẽ tìm kiếm user1 trong bộ nhớ chung. Tiếp theo, nó sẽ tìm hàm gia tăng nhưng không tìm thấy. Trình thông dịch sẽ xem xét đối tượng tiếp theo trong chuỗi nguyên mẫu và sẽ tìm hàm gia tăng ở đó.

Giải pháp 3 — Mớicái này từ khóa

OQKKYIojqDyXBnOwHdtZfxKL8YMOCii-2GTl

Các Mới toán tử được sử dụng để tạo một thể hiện của một đối tượng có chức năng xây dựng.

Khi chúng ta gọi hàm tạo mới, chúng ta sẽ tự động hóa các hành động sau:

  • Một đối tượng mới được tạo
  • Nó liên kết this đến đối tượng
  • Đối tượng nguyên mẫu của hàm tạo trở thành thuộc tính __proto__ của đối tượng mới
  • Nó trả về đối tượng từ hàm

Điều này thật tuyệt vời, bởi vì tự động hóa dẫn đến mã lặp lại ít hơn!

function User(name, points) {
 this.name = name; 
 this.points = points;
}
User.prototype.increment = function(){
 this.points++;
}
User.prototype.login = function() {
 console.log(“Please login.”)
}

let user1 = new User(“Dylan”, 6);
user1.increment();

Bằng cách sử dụng mẫu nguyên mẫu, mỗi phương thức và thuộc tính được thêm trực tiếp vào nguyên mẫu của đối tượng.

Trình thông dịch sẽ đi lên chuỗi nguyên mẫu và tìm hàm gia tăng trong thuộc tính nguyên mẫu của Người dùng, bản thân nó cũng là một đối tượng có thông tin bên trong nó. Nhớ – Tất cả các chức năng trong JavaScript cũng là đối tượng. Bây giờ trình thông dịch đã tìm thấy những gì nó cần, nó có thể tạo ngữ cảnh thực thi cục bộ mới để chạy user1.increment().

Lưu ý bên lề: Sự khác biệt giữa __proto__ và nguyên mẫu

Đọc thêm  Tìm hiểu các hoạt động CRUD trong JavaScript bằng cách xây dựng ứng dụng TODO

Nếu bạn đang bối rối về __proto__ và nguyên mẫu, đừng lo lắng! Bạn không phải là người duy nhất bối rối về điều này.

Nguyên mẫu là một thuộc tính của hàm xây dựng xác định cái gì sẽ trở thành thuộc tính __proto__ trên đối tượng được xây dựng.

Vì vậy, __proto__ là tham chiếu được tạo và tham chiếu đó được gọi là liên kết chuỗi nguyên mẫu.

Giải pháp 4 — ES6 ‘đường cú pháp’

svX1DgD7SmEqaQLIchi26EuKUV4toaacQSJG

Các ngôn ngữ khác cho phép chúng ta viết các phương thức dùng chung trong chính đối tượng “hàm tạo”. ECMAScript6 đã giới thiệu lớp từ khóa, cho phép chúng ta viết các lớp giống với các lớp bình thường của các ngôn ngữ cổ điển khác. Trên thực tế, đó là đường cú pháp đối với hành vi nguyên mẫu của JavaScript.

class User {
  constructor(name, points) {
    this.name = name;
    this.points = points;
  }
  increment () {
    this.points++;
  }
  login () {
    console.log("Please login.")
  }
}

let user1 = new User("John", 12);
user1.increment();

Trong giải pháp 3, các phương pháp liên quan được triển khai chính xác bằng cách sử dụng User.prototype.functionName. Trong giải pháp này, kết quả tương tự đạt được nhưng cú pháp trông rõ ràng hơn.

Phần kết luận

Bây giờ chúng ta đã tìm hiểu thêm về các tùy chọn khác nhau mà chúng ta có trong JavaScript để tạo đối tượng. Trong khi lớp các tuyên bố và Mới toán tử tương đối dễ sử dụng, điều quan trọng là phải hiểu tự động hóa là gì.

Tóm lại, các hành động sau đây được tự động hóa khi hàm tạo được gọi với Mới:

  • Một đối tượng mới được tạo
  • Nó liên kết this đến đối tượng
  • Đối tượng nguyên mẫu của hàm tạo trở thành thuộc tính __proto__ của đối tượng mới
  • Nó trả về đối tượng từ hàm

Cảm ơn đã đọc bài viết của tôi, và vỗ tay nếu bạn thích nó! Hãy xem các bài viết khác của tôi như Cách tôi xây dựng ứng dụng Đồng hồ Pomodoro của mình và những bài học tôi đã học được trong quá trình thực hiện.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status