Trong hướng dẫn này, bạn sẽ tìm hiểu về hàm tạo JavaScript với sự trợ giúp của các ví dụ.
Trong JavaScript, một hàm khởi tạo được sử dụng để tạo các đối tượng. Ví dụ,
// constructor function
function Person () {
this.name = 'John',
this.age = 23
}
// create an object
const person = new Person();Trong ví dụ trên, function Person()là một hàm tạo đối tượng.
Để tạo một đối tượng từ một hàm khởi tạo, chúng ta sử dụng newtừ khóa.
Lưu ý : Việc viết hoa chữ cái đầu tiên của hàm khởi tạo được coi là một phương pháp hay.
Tạo nhiều đối tượng với hàm tạo
Trong JavaScript, bạn có thể tạo nhiều đối tượng từ một hàm khởi tạo. Ví dụ,
// constructor function
function Person () {
this.name = 'John',
this.age = 23,
this.greet = function () {
console.log('hello');
}
}
// create objects
const person1 = new Person();
const person2 = new Person();
// access properties
console.log(person1.name); // John
console.log(person2.name); // JohnTrong chương trình trên, hai đối tượng được tạo bằng cách sử dụng cùng một hàm khởi tạo.
JavaScript từ khóa này
Trong JavaScript, khi thistừ khóa được sử dụng trong một hàm khởi tạo, thisđề cập đến đối tượng khi đối tượng được tạo. Ví dụ,
// constructor function
function Person () {
this.name = 'John',
}
// create object
const person1 = new Person();
// access properties
console.log(person1.name); // JohnDo đó, khi một đối tượng truy cập vào các thuộc tính, nó có thể truy cập trực tiếp vào thuộc tính với tư cách là person1.name.
Tham số hàm tạo JavaScript
Bạn cũng có thể tạo một hàm khởi tạo với các tham số. Ví dụ,
// constructor function
function Person (person_name, person_age, person_gender) {
// assigning parameter values to the calling object
this.name = person_name,
this.age = person_age,
this.gender = person_gender,
this.greet = function () {
return ('Hi' + ' ' + this.name);
}
}
// creating objects
const person1 = new Person('John', 23, 'male');
const person2 = new Person('Sam', 25, 'female');
// accessing properties
console.log(person1.name); // "John"
console.log(person2.name); // "Sam"
Trong ví dụ trên, chúng ta đã truyền các đối số cho hàm khởi tạo trong quá trình tạo đối tượng.
const person1 = new Person('John', 23, 'male');
const person2 = new Person('Sam', 25, 'male');Điều này cho phép mỗi đối tượng có các thuộc tính khác nhau. Như được trình bày ở trên,
console.log(person1.name); cho John
console.log(person2.name); cho Sam
Tạo đối tượng: Hàm xây dựng Vs đối tượng Literal
- Object Literal is generally used to create a single object. The constructor function is useful if you want to create multiple objects. For example,
// using object literal
let person = {
name: 'Sam'
}// using constructor function
function Person () {
this.name = 'Sam'
}
let person1 = new Person();
let person2 = new Person();- Mỗi đối tượng được tạo từ hàm khởi tạo là duy nhất. Bạn có thể có các thuộc tính giống như hàm khởi tạo hoặc thêm một thuộc tính mới vào một đối tượng cụ thể. Ví dụ,
// using constructor function
function Person () {
this.name = 'Sam'
}
let person1 = new Person();
let person2 = new Person();
// adding new property to person1
person1.age = 20;Bây giờ thuộc agetính này là duy nhất cho person1đối tượng và không có sẵn cho person2đối tượng.
Tuy nhiên, nếu một đối tượng được tạo bằng ký tự đối tượng và nếu một biến được xác định với giá trị đối tượng đó, thì bất kỳ thay đổi nào trong giá trị biến sẽ thay đổi đối tượng ban đầu. Ví dụ,
// using object lateral
let person = {
name: 'Sam'
}
console.log(person.name); // Sam
let student = person;
// changes the property of an object
student.name = 'John';
// changes the origins object property
console.log(person.name); // JohnKhi một đối tượng được tạo với một đối tượng theo nghĩa đen, bất kỳ biến đối tượng nào bắt nguồn từ đối tượng đó sẽ hoạt động như một bản sao của đối tượng ban đầu. Do đó, bất kỳ thay đổi nào bạn thực hiện trong một đối tượng cũng sẽ phản ánh trong đối tượng kia.
Thêm thuộc tính và phương thức trong một đối tượng
Bạn có thể thêm thuộc tính hoặc phương thức trong một đối tượng như sau:
// constructor function
function Person () {
this.name = 'John',
this.age = 23
}
// creating objects
let person1 = new Person();
let person2 = new Person();
// adding property to person1 object
person1.gender = 'male';
// adding method to person1 object
person1.greet = function () {
console.log('hello');
}
person1.greet(); // hello
// Error code
// person2 doesn't have greet() method
person2.greet();Đầu ra
hello Uncaught TypeError: person2.greet is not a function
Trong ví dụ trên, một thuộc tính mới gendervà một phương thức mới greet()được thêm vào person1đối tượng.
Tuy nhiên, thuộc tính và phương thức mới này chỉ được thêm vào person1. Bạn không thể truy cập genderhoặc greet()từ person2. Do đó chương trình báo lỗi khi chúng tôi cố gắng truy cậpperson2.greet();
Nguyên mẫu đối tượng JavaScript
Bạn cũng có thể thêm các thuộc tính và phương thức vào một hàm khởi tạo bằng cách sử dụng một nguyên mẫu . Ví dụ,
// constructor function
function Person () {
this.name = 'John',
this.age = 23
}
// creating objects
let person1 = new Person();
let person2 = new Person();
// adding new property to constructor function
Person.prototype.gender = 'Male';
console.log(person1.gender); // Male
console.log(person2.gender); // MaleĐể tìm hiểu thêm về các nguyên mẫu, hãy truy cập Nguyên mẫu JavaScript .
Trình tạo dựng sẵn JavaScript
JavaScript cũng có các hàm tạo dựng sẵn. Một số trong số đó là:
let a = new Object(); // A new Object object
let b = new String(); // A new String object
let c = new Number(); // A new Number object
let d = new Boolean(); // A new Boolean objectTrong JavaScript, các chuỗi có thể được tạo dưới dạng các đối tượng bằng cách:
const name = new String ('John');
console.log(name); // "John"Trong JavaScript, số có thể được tạo dưới dạng đối tượng bằng cách:
const number = new Number (57);
console.log(number); // 57Trong JavaScript, boolean có thể được tạo dưới dạng đối tượng bằng cách:
const count = new Boolean(true);
console.log(count); // trueLưu ý : Bạn nên sử dụng các kiểu dữ liệu nguyên thủy và tạo ra chúng một cách bình thường, chẳng hạn như const name = 'John';, const number = 57;vàconst count = true;
Bạn không nên khai báo chuỗi, số và giá trị boolean là các đối tượng vì chúng làm chậm chương trình.
Lưu ý : Trong JavaScript, từ khóa classđược giới thiệu trong ES6 (ES2015) cũng cho phép chúng ta tạo các đối tượng. Các lớp tương tự như các hàm khởi tạo trong JavaScript. Để tìm hiểu thêm, hãy truy cập Lớp học JavaScript .