Đối tượng đối tượng lỗi javascript

Trong bài viết này, mình sẽ giới thiệu hàm constructor là gì và làm thế nào để sử dụng hàm constructor để khởi tạo một đối tượng trong JavaScript

Nội dung

• 1. Giới thiệu JavaScript Constructor Function
• 2. Thêm phương thức vào hàm xây dựng JavaScript
• 3. Hàm xây dựng gọi không cần từ khóa mới
• Thẩm Gia Cộng Đồng Học Lập Trình Thật

1. Giới thiệu JavaScript Constructor Function

Ở bài viết Object Trong JavaScript Và Các Kiến Thức Bạn Cần Phải Nắm Vững, mình đã hướng dẫn chi tiết làm thế nào để tạo một đối tượng bằng cú pháp chữ

let person = {
    firstName: 'Nguyen',
    lastName: 'Hung'
}

Trong thực tế, bạn sẽ thường xuyên gặp trường hợp cần phải tạo nhiều đối tượng tương tự đối tượng

let person = new Person['Nguyen', 'Hung'];

1

Để làm việc này dễ dàng, bạn có thể sử dụng hàm tạo như một cái khuôn, sau đó bạn sử dụng cái khuôn để tạo ra các đối tượng tương tự nhau

Nói chi tiết hơn, constructor function đơn giản chỉ là một function thông thường với các quy ước sau

• Tên của constructor function bắt đầu bằng một ký tự in hoa như

  let person = new Person['Nguyen', 'Hung'];

  2,

  let person = new Person['Nguyen', 'Hung'];

  3,…
• Sử dụng toán tử

  let person = new Person['Nguyen', 'Hung'];

  4 khi gọi hàm khởi tạo

Lưu ý. Phiên bản ES6 có từ khóa

let person = new Person['Nguyen', 'Hung'];

5 và chức năng tương tự như chức năng xây dựng. Nhưng bản chất của nó vẫn là hàm tạo

Ở ví dụ sau, mình sẽ định nghĩa một hàm khởi tạo

let person = new Person['Nguyen', 'Hung'];

2

function Person[firstName, lastName] {
  this.firstName = firstName;
  this.lastName = lastName;
}

Để khởi tạo một đối tượng [ví dụ] từ

let person = new Person['Nguyen', 'Hung'];

2, mình sử dụng toán tử

let person = new Person['Nguyen', 'Hung'];

4

let person = new Person['Nguyen', 'Hung'];

Về cơ bản, toán tử

let person = new Person['Nguyen', 'Hung'];

4 làm những công việc sau đây

• Tạo một đối tượng rỗng và gán nó vào

  let person = new Person['Nguyen', 'Hung'];

  20
• Gán giá trị cho tài sản

  let person = new Person['Nguyen', 'Hung'];

  21 và

  let person = new Person['Nguyen', 'Hung'];

  22 lần lượt là

  let person = new Person['Nguyen', 'Hung'];

  23 và

  let person = new Person['Nguyen', 'Hung'];

  24
• Trả về từ khóa

  let person = new Person['Nguyen', 'Hung'];

  20

Mình có thể mô phỏng tương đương như sau

let person = new Person['Nguyen', 'Hung'];

2

Do đó, khi chương trình thực thi câu lệnh

let person = new Person['Nguyen', 'Hung'];

… then value of

let person = new Person['Nguyen', 'Hung'];

1 is

let person = new Person['Nguyen', 'Hung'];

1

Vì vậy, bạn có thể sử dụng hàm tạo

let person = new Person['Nguyen', 'Hung'];

2 để khởi tạo các đối tượng tương tự

let person = new Person['Nguyen', 'Hung'];

3

2. Thêm phương thức vào hàm xây dựng JavaScript

Để thêm phương thức cho một đối tượng thông qua hàm tạo, bạn có thể sử dụng từ khóa

let person = new Person['Nguyen', 'Hung'];

20. Ví dụ

let person = new Person['Nguyen', 'Hung'];

5

Bây giờ, bạn có thể khởi tạo đối tượng bằng phương thức

let person = new Person['Nguyen', 'Hung'];

29

let person = new Person['Nguyen', 'Hung'];

7

đầu ra

let person = new Person['Nguyen', 'Hung'];

8

Tuy nhiên, có một vấn đề là khi bạn khởi động nhiều phiên bản của

let person = new Person['Nguyen', 'Hung'];

2 thì phương thức

let person = new Person['Nguyen', 'Hung'];

1 bị lặp ở mỗi phiên bản, gây lãng phí bộ nhớ

Để giải quyết vấn đề này, bạn có thể sử dụng nguyên mẫu để tất cả các trường hợp sử dụng phương thức chung từ một nguồn

3. Hàm xây dựng gọi không cần từ khóa mới

You can call a constructor function do not need keyword

let person = new Person['Nguyen', 'Hung'];

4

function Person[firstName, lastName] {
  this.firstName = firstName;
  this.lastName = lastName;
}

0

Ở trường hợp này,

let person = new Person['Nguyen', 'Hung'];

2 thực thi như một chức năng thông thường. Do đó

let person = new Person['Nguyen', 'Hung'];

20 bên trong hàm

let person = new Person['Nguyen', 'Hung'];

2 sẽ tham chiếu đến đối tượng toàn cục

Nếu bạn cố gắng truy cập thuộc tính

let person = new Person['Nguyen', 'Hung'];

21 và

let person = new Person['Nguyen', 'Hung'];

22, thì chương trình sẽ thông báo lỗi

function Person[firstName, lastName] {
  this.firstName = firstName;
  this.lastName = lastName;
}

1

Lỗi

function Person[firstName, lastName] {
  this.firstName = firstName;
  this.lastName = lastName;
}

2

Tương tự như vậy, bạn cũng không thể truy cập phương pháp

let person = new Person['Nguyen', 'Hung'];

8

function Person[firstName, lastName] {
  this.firstName = firstName;
  this.lastName = lastName;
}

3

Lỗi

function Person[firstName, lastName] {
  this.firstName = firstName;
  this.lastName = lastName;
}

4

Để tránh việc không sử dụng từ khóa

let person = new Person['Nguyen', 'Hung'];

4 khi gọi hàm khởi tạo, bạn có thể sử dụng thuộc tính

let person = new Person['Nguyen', 'Hung'];

10 trong ES6

Nếu bạn sử dụng từ khóa

let person = new Person['Nguyen', 'Hung'];

4 khi gọi hàm xây dựng, thì

let person = new Person['Nguyen', 'Hung'];

10 có giá trị tham chiếu đến hàm. Reverse value of it is

let person = new Person['Nguyen', 'Hung'];

13

function Person[firstName, lastName] {
  this.firstName = firstName;
  this.lastName = lastName;
}

5

đầu ra

function Person[firstName, lastName] {
  this.firstName = firstName;
  this.lastName = lastName;
}

6

Đoạn mã trên

let person = new Person['Nguyen', 'Hung'];

10 có giá trị là

let person = new Person['Nguyen', 'Hung'];

13, bởi vì

let person = new Person['Nguyen', 'Hung'];

2 thực thi như một chức năng thông thường

Tuy nhiên, ở ví dụ sau đây,

let person = new Person['Nguyen', 'Hung'];

10 có giá trị tham chiếu đến hàm

let person = new Person['Nguyen', 'Hung'];

2 bởi vì bạn đã sử dụng từ khóa

let person = new Person['Nguyen', 'Hung'];

4 để gọi hàm

let person = new Person['Nguyen', 'Hung'];

đầu ra

function Person[firstName, lastName] {
  this.firstName = firstName;
  this.lastName = lastName;
}

8

Bạn có thể bắt buộc người dùng phải sử dụng từ khóa

let person = new Person['Nguyen', 'Hung'];

4 khi gọi hàm khởi tạo, nếu không chương trình sẽ báo lỗi

function Person[firstName, lastName] {
  this.firstName = firstName;
  this.lastName = lastName;
}

9

Ngoài ra, bạn cũng có thể khởi tạo đối tượng của

let person = new Person['Nguyen', 'Hung'];

2 nếu

let person = new Person['Nguyen', 'Hung'];

10 có giá trị là

let person = new Person['Nguyen', 'Hung'];

13

let person = new Person['Nguyen', 'Hung'];

0

Cách này thường được các thư viện hoặc khung JavaScript sử dụng để giúp công việc viết mã được linh hoạt hơn

Thẩm Gia Cộng Đồng Học Lập Trình Thật

Nếu bạn quan tâm đến ngành lập trình và muốn tìm hiểu những kiến ​​thức bổ trợ khác, hãy tham gia ngay cộng đồng Học Lập Trình Thật Nhất nhé