Thiết lập hàm tạo javascript

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
0Cú pháp thông thường cho phép tạo một đối tượng. Nhưng thường thì chúng ta cần tạo nhiều đối tượng tương tự, như nhiều người dùng hoặc các menu mục, v. v

Điều đó có thể được thực hiện bằng cách sử dụng hàm Constructor và toán tử

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
1

Nội dung chính

  • 1. hàm xây dựng
  • 2. Kiểm tra constructor. Mới. Mục tiêu
  • 3. Trả về từ hàm tạo
  • 4. Các phương thức trong constructor
  • 5. Tóm tắt

1. hàm xây dựng

Hàm Constructor về mặt kỹ thuật là hàm thông thường. Có hai quy ước

  1. We are set with the name in the first hoa
  2. Họ chỉ nên được thực hiện với toán tử
    function User(name) {
      // this = {};  (implicitly)
    
      // add properties to this
      this.name = name;
      this.isAdmin = false;
    
      // return this;  (implicitly)
    }
    1

Ví dụ

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: [email protected]
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false

Khi một hàm được thực thi với

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3, nó thực hiện các bước sau

  1. Một đối tượng trống mới được tạo và gán cho
    function User(name) {
      // this = {};  (implicitly)
    
      // add properties to this
      this.name = name;
      this.isAdmin = false;
    
      // return this;  (implicitly)
    }
    4
  2. Các phần thân hàm được thực thi. Thông thường nó đã sửa đổi
    function User(name) {
      // this = {};  (implicitly)
    
      // add properties to this
      this.name = name;
      this.isAdmin = false;
    
      // return this;  (implicitly)
    }
    4, thêm giá trị mới cho thuộc tính
  3. Giá trị của
    function User(name) {
      // this = {};  (implicitly)
    
      // add properties to this
      this.name = name;
      this.isAdmin = false;
    
      // return this;  (implicitly)
    }
    4được trả lại cho biến người dùng

Nói cách khác,

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
7làm một cái gì đó như

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}

Vì vậy,

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
8cho kết quả tương tự như

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
1

Bây giờ nếu chúng ta muốn tạo người dùng khác, chúng ta có thể gọi là

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
9,
function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
10v. v. Ngắn hơn nhiều so với việc sử dụng chữ dài dòng cho mỗi lần tạo và dễ đọc

Đó là mục đích chính của các hàm tạo – để thực thi mã tạo đối tượng có thể sử dụng lại

Chúng ta hãy lưu ý một lần nữa – về mặt kỹ thuật, bất kỳ hàm nào cũng có thể được sử dụng như một hàm tạo. Which is. Bất kỳ hàm nào cũng có thể được chạy cùng

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3và nó sẽ thực thi thuật toán ở trên. Chữ viết hoa đầu tiên của tên đối tượng đó là một thỏa thuận chung, để chỉ ra rằng một chức năng sẽ được thực hiện
function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3

hàm mới() { … }

Nếu chúng ta có nhiều dòng mã về việc tạo duy nhất cho một đối tượng phức tạp, thì chúng ta có thể đóng gói chúng trong hàm tạo, như thế này

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
6

Hàm tạo không thể được gọi lại, vì nó không được lưu ở bất kỳ đâu, chỉ cần tạo và gọi. Vì vậy, thủ thuật này nhằm mục đích đích đóng gói mã xây dựng đối tượng ở một nơi duy nhất, mà không sử dụng lại trong tương lai

2. Kiểm tra constructor. Mới. Mục tiêu

Công cụ nâng cao

Cú pháp from this section when being used, bỏ qua nó ngoại trừ khi bạn muốn biết mọi thứ

Bên trong một chức năng, chúng ta có thể kiểm tra xem nó được gọi là có

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3hoặc không có nó, bằng cách sử dụng một thuộc tính đặc biệt
function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
14

Nó trống khi gọi thông thường và bằng hàm nếu được gọi với

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
0

Điều đó có thể được sử dụng bên trong hàm để biết liệu nó có được gọi là với

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3 không

Chúng ta cũng có thể thực hiện cả hai

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3và khi gọi thông thường để làm như vậy, như thế này

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3

Cách tiếp cận này kép khi được sử dụng trong các thư viện để làm cho cú pháp linh hoạt hơn. Vì vậy, mọi người có thể gọi hàm có hoặc không có

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3, và nó vẫn hoạt động

Có thể không phải là một điều tốt để sử dụng ở mọi nơi, bởi vì bỏ qua

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3làm cho nó ít rõ ràng hơn những gì đang xảy ra. Với
function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3tất cả chúng ta đều biết rằng các đối tượng mới đang được tạo ra

3. Trả về từ hàm tạo

Thông thường, các hàm tạo không có hàm

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
61. Nhiệm vụ của họ là viết tất cả những thứ cần thiết vào
function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
4, và nó tự động trả lại kết quả

Nhưng nếu có một câu lệnh

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
61, thì quy tắc rất đơn giản

  • If
    function User(name) {
      // this = {};  (implicitly)
    
      // add properties to this
      this.name = name;
      this.isAdmin = false;
    
      // return this;  (implicitly)
    }
    61được gọi với một đối tượng, thì đối tượng được trả lại vì
    function User(name) {
      // this = {};  (implicitly)
    
      // add properties to this
      this.name = name;
      this.isAdmin = false;
    
      // return this;  (implicitly)
    }
    4
  • If
    function User(name) {
      // this = {};  (implicitly)
    
      // add properties to this
      this.name = name;
      this.isAdmin = false;
    
      // return this;  (implicitly)
    }
    61được gọi với một kiểu nguyên thủy, nó bị loại bỏ

Nói cách khác,

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
61với một đối tượng trả về đối tượng đó, trong tất cả các trường hợp khác nhau
function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
4được trả lại

Chẳng hạn, ở đây

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
61ghi đè
function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
4 bằng cách trả lại một đối tượng

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: [email protected]
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false
7

Và đây là một ví dụ về một sản phẩm trống được

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
61(hoặc chúng ta có thể đặt kiểu nguyên thủy sau nó, không thành vấn đề)

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: [email protected]
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false
9

Thông thường các hàm tạo không có câu lệnh

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
61. Ở đây chúng ta đề cập đến hành động đặc biệt với các đối tượng được trả lại chủ yếu vì mục đích hoàn chỉnh

Unsigned menu

Nhân tiện ích, chúng ta có thể bỏ qua dấu trích đơn sau

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
3, nếu nó không có đối số

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
2

Bỏ dấu ngoặc đơn ở đây không được coi là một cách tốt, nhưng cú pháp được đặc tả cho phép

4. Các phương thức trong constructor

Sử dụng các hàm tạo hàm để tạo các đối tượng mang lại sự linh hoạt cao. Hàm tạo có thể có các tham số xác định cách xây dựng đối tượng và những gì cần thiết trong đó

Tất nhiên, chúng ta có thể thêm

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
4 vào không chỉ các thuộc tính, mà cả các phương thức

Chẳng hạn,

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
05bên dưới tạo một đối tượng với
function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
06 và phương thức đã cho
function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
07

function User(name) {
  // this = {};  (implicitly)

  // add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
7

Để tạo các đối tượng phức tạp, có một cú pháp nâng cao hơn, các lớp , chúng ta sẽ đề cập sau

5. Tóm tắt

  • Các hàm Constructor rút gọn, các hàm Constructor là các hàm thông thường, nhưng chúng có một thỏa thuận chung để đặt tên chúng bằng chữ in hoa
  • Hàm Constructor chỉ nên được gọi bằng cách sử dụng
    function User(name) {
      // this = {};  (implicitly)
    
      // add properties to this
      this.name = name;
      this.isAdmin = false;
    
      // return this;  (implicitly)
    }
    3. Khi gọi như vậy nghĩa là tạo ra sản phẩm
    function User(name) {
      // this = {};  (implicitly)
    
      // add properties to this
      this.name = name;
      this.isAdmin = false;
    
      // return this;  (implicitly)
    }
    4 và trả lại những cái được điền vào đối tượng

Chúng ta có thể sử dụng Constructor hàm để tạo nhiều đối tượng tương tự

JavaScript cung cấp hàm Constructor cho nhiều đối tượng trong ngôn ngữ được tích hợp sẵn. như ________ 230 ngày tháng, ________ 231 cho các tập hợp và các đối tượng khác mà chúng tôi dự án nghiên cứu

Trong chương trình này, chúng tôi chỉ đề cập đến những điều cơ bản về các đối tượng và các Constructor. Chúng rất cần thiết để tìm hiểu thêm về các kiểu dữ liệu và hàm trong các chương trình tiếp theo

Sau khi chúng tôi biết điều đó, chúng tôi trở lại các đối tượng và bao hàm chúng tôi sâu sắc hơn trong các chương trình Nguyên mẫu, kế thừa và Lớp

Full series tự học Javascript từ cơ bản tăng cao tại đây nha

Nếu thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa