Làm cách nào để gọi hàm tạo javascript?

Cú pháp

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

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

  // return this;  (implicitly)
}

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

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

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

  // return this;  (implicitly)
}

Các hàm xây dựng về mặt kỹ thuật là các hàm thông thường. Có hai quy ước mặc dù

1. Họ được đặt tên với chữ in hoa đầu tiên
2. Chúng chỉ nên được thực thi 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ụ

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)
}

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. Thân hàm 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 các thuộc tính mới vào nó
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ả về

Nói cách khác,

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

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

  // return this;  (implicitly)
}

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)
}

let user = {
  name: "Jack",
  isAdmin: false
};

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

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

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

  // return this;  (implicitly)
}

let user = {
  name: "Jack",
  isAdmin: false
};

Đó là mục đích chính của các nhà xây dựng - để triển khai mã tạo đối tượng có thể tái sử dụng

Hãy lưu ý một lần nữa – về mặt kỹ thuật, bất kỳ hàm nào (ngoại trừ hàm mũi tên, vì chúng không có

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

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

  // return this;  (implicitly)
}

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

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

  // return this;  (implicitly)
}

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

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

  // return this;  (implicitly)
}

hàm mới() { … }

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

// create a function and immediately call it with new
let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};

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

Nội dung nâng cao

Cú pháp từ phần này hiếm khi được sử dụng, hãy bỏ qua trừ khi bạn muốn biết mọi thứ

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

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

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

  // return this;  (implicitly)
}

let user = {
  name: "Jack",
  isAdmin: false
};

Nó không được xác định cho các cuộc gọi thông thường và bằng chức năng 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)
}

function User() {
  alert(new.target);
}

// without "new":
User(); // undefined

// with "new":
new User(); // function User { .. }

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

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

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

  // return this;  (implicitly)
}

Chúng tôi cũng có thể thực hiện cả cuộc gọi

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

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

  // return this;  (implicitly)
}

function User(name) {
  if (!new.target) { // if you run me without new
    return new User(name); // ...I will add new for you
  }

  this.name = name;
}

let john = User("John"); // redirects call to new User
alert(john.name); // John

Cách tiếp cận này đôi khi được sử dụng trong các thư viện để làm cho cú pháp linh hoạt hơn. Để 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)
}

Tuy nhiên, có lẽ không phải là một điều tốt để sử dụng ở mọi nơi, bởi vì việc bỏ qua

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

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

  // return this;  (implicitly)
}

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

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

  // return this;  (implicitly)
}

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

// create a function and immediately call it with new
let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};

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

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

  // return this;  (implicitly)
}

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

// create a function and immediately call it with new
let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};

• Nếu

  // create a function and immediately call it with new
  let user = new function() {
    this.name = "John";
    this.isAdmin = false;
  
    // ...other code for user creation
    // maybe complex logic and statements
    // local variables etc
  };

  2 được gọi với một đối tượng, thì đối tượng đó sẽ được trả về thay vì

  function User(name) {
    // this = {};  (implicitly)
  
    // add properties to this
    this.name = name;
    this.isAdmin = false;
  
    // return this;  (implicitly)
  }

  4
• Nếu

  // create a function and immediately call it with new
  let user = new function() {
    this.name = "John";
    this.isAdmin = false;
  
    // ...other code for user creation
    // maybe complex logic and statements
    // local variables etc
  };

  2 được gọi với số nguyên thủy, nó sẽ bị bỏ qua

Nói cách khác,

// create a function and immediately call it with new
let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};

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

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

  // return this;  (implicitly)
}

Chẳng hạn, ở đây

// create a function and immediately call it with new
let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};

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

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

  // return this;  (implicitly)
}

function BigUser() {

  this.name = "John";

  return { name: "Godzilla" };  // <-- returns this object
}

alert( new BigUser().name );  // Godzilla, got that object

Và đây là một ví dụ với một

// create a function and immediately call it with new
let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};

function SmallUser() {

  this.name = "John";

  return; // <-- returns this
}

alert( new SmallUser().name );  // John

Thông thường các nhà xây dựng không có câu lệnh

// create a function and immediately call it with new
let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};

Bỏ qua dấu ngoặc đơn

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

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

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

  // return this;  (implicitly)
}

let user = new User; // <-- no parentheses
// same as
let user = new User();

Bỏ qua dấu ngoặc đơn ở đây không được coi là "phong cách tốt", nhưng cú pháp được cho phép theo đặc điểm kỹ thuật

Sử dụng các hàm xây dựng để tạo các đối tượng mang lại rất nhiều tính linh hoạt. Hàm xây dựng 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 đặt trong đó

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

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

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

  // return this;  (implicitly)
}

Chẳng hạn,

function User() {
  alert(new.target);
}

// without "new":
User(); // undefined

// with "new":
new User(); // function User { .. }

function User() {
  alert(new.target);
}

// without "new":
User(); // undefined

// with "new":
new User(); // function User { .. }

function User() {
  alert(new.target);
}

// without "new":
User(); // undefined

// with "new":
new User(); // function User { .. }

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "My name is: " + this.name );
  };
}

let john = new User("John");

john.sayHi(); // My name is: John

/*
john = {
   name: "John",
   sayHi: function() { .. }
}
*/

Để 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, mà chúng ta sẽ đề cập sau

• Các hàm xây dựng hay ngắn gọn là các hàm tạo là các hàm thông thường, nhưng có một thỏa thuận chung là đặt tên chúng bằng chữ in hoa trước
• Hàm xây dựng 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. Một cuộc gọi như vậy ngụ ý tạo ra một

  function User(name) {
    // this = {};  (implicitly)
  
    // add properties to this
    this.name = name;
    this.isAdmin = false;
  
    // return this;  (implicitly)
  }

  4 trống ở đầu và trả về một cái đã điền ở cuối

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

JavaScript cung cấp các hàm tạo cho nhiều đối tượng ngôn ngữ tích hợp. như

function User(name) {
  if (!new.target) { // if you run me without new
    return new User(name); // ...I will add new for you
  }

  this.name = name;
}

let john = User("John"); // redirects call to new User
alert(john.name); // John

function User(name) {
  if (!new.target) { // if you run me without new
    return new User(name); // ...I will add new for you
  }

  this.name = name;
}

let john = User("John"); // redirects call to new User
alert(john.name); // John

Đối tượng, chúng tôi sẽ trở lại

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

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

Làm cách nào để gọi hàm tạo trong JavaScript?

Toán tử nào được sử dụng để gọi hàm tạo?

Gọi hàm tạo có nghĩa là gì?

Hàm tạo có được gọi tự động không?