Hướng dẫn Tận hưởng Hàm Khởi tạo JavaScript

Trong JavaScript, một hàm khởi tạo được sử dụng để tạo ra các đối tượng. Ví dụ,

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// create an object
const person = new Person();

Run Code

Trong ví dụ trên, function Person() là một hàm khởi 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 từ khóa new.

Chú ý : Được coi là một thói quen tốt là viết hoa chữ cái đầu tiên của hàm khởi tạo của bạn.

Tạo Nhiều Đối tượng với Hàm Khởi 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);  // John

Run Code

Trong chương trình trên, hai đối tượng được tạo ra bằng cùng một hàm khởi tạo.

Khóa this trong JavaScript

Trong JavaScript, khi từ khóa this được sử dụng trong một hàm khởi tạo, this trỏ đến đối tượng khi đối tượng được tạo ra. Ví dụ,

// constructor function
function Person () {
    this.name = 'John',
}

// create object
const person1 = new Person();

// access properties
console.log(person1.name);  // John

Run Code

Vì vậy, khi một đối tượng truy cập các thuộc tính, nó có thể truy cập trực tiếp vào thuộc tính như person1.name.

Tham số Hàm Khởi 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"

Run Code

Trong ví dụ trên, chúng ta đã truyền các đối số vào hàm khởi tạo trong quá trình tạo ra đố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 hiển thị ở trên,

console.log(person1.name); trả về John

console.log(person2.name); trả về Sam

Tạo Đối tượng: So sánh Hàm Khởi tạo và Đối tượng Chữ

Cảm ơn bạn!
* Đối tượng Chữ cái thông thường thường được sử dụng để tạo một đối tượng duy nhất. Hàm tạo là hữu ích nếu bạn muốn tạo nhiều đối tượng. Ví dụ,

// 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 tạo là duy nhất. Bạn có thể có các thuộc tính giống như hàm 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 tính age này là duy nhất cho đối tượng person1 và không có sẵn cho đối tượng person2.

Tuy nhiên, nếu một đối tượng được tạo với một chữ cái đối tượng và nếu một biến được định nghĩa với giá trị đối tượng đó, bất kỳ thay đổi nào trong giá trị biến sẽ thay đổi đối tượng gốc. 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); // John

Run Code

Khi một đối tượng được tạo bằng một chữ cái đối tượng, bất kỳ biến đối tượng nào được xuất phát từ đối tượng đó sẽ hoạt động như một bản sao của đối tượng gốc. Do đó, bất kỳ thay đổi nào bạn thực hiện trên một đối tượng cũng sẽ phản ánh trên đối tượng khác.

Thêm Thuộc tính Và Phương thức vào một Đối tượng

Bạn có thể thêm các thuộc tính hoặc phương thức vào 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();

Run Code

Kết quả

hello
Uncaught TypeError: person2.greet is not a function

Trong ví dụ trên, một thuộc tính mới gender và một phương thức mới greet() được thêm vào đối tượng person1.

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 gender hoặc greet() từ person2. Do đó, chương trình báo lỗi khi chúng ta cố gắng truy cập person2.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 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

Run Code

Các Hàm Tạo Sẵn trong JavaScript

JavaScript cũng có các hàm tạo sẵn. Một số trong số chúng 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 object

Trong JavaScript, chuỗi có thể được tạo ra dưới dạng đối tượng bằng cách:

const name = new String ('John');
console.log(name); // "John"

Run Code

Trong JavaScript, số có thể được tạo ra dưới dạng đối tượng bằng cách:

const number = new Number (57);
console.log(number); // 57

Run Code

Trong JavaScript, các giá trị boolean có thể được tạo ra dưới dạng đối tượng bằng cách:

const count = new Boolean(true);
console.log(count); // true

Run Code

Lưu ý : Được khuyến nghị sử dụng kiểu dữ liệu nguyên thủy và tạo chúng theo cách bình thường, 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 dưới dạng đối tượng vì điều này 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 đối tượng. Các lớp tương tự như các hàm tạo trong JavaScript.

• Bài viết trên blog này ban đầu được xuất bản tại:https://www.programiz.com/