Trình tạo đối tượng JavaScript

Ví dụ

// Hàm định nghĩa đối tượng person
function Person(first, last, age, eye){
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
// tạo một đối tượng person
const person1 = new Person("John","Doe",50,"blue");
// Hiển thị đối tượng
document.getElementById('demo').innerHTML = person1.firstName + " năm nay " + person1.age + " tuổi.";

Xem kết quả

Việc đặt tên cho các hàm khởi tạo với chữ cái đầu tiên viết hoa được coi là phương pháp hay.

Các loại đối tượng


Các ví dụ từ các bài trước là một hạn chế. Nó chỉ tạo ra các đối tượng đơn lẻ và thủ công.

Đôi khi chúng ta cần một "bản thiết kế" để tạo ra nhiều đối tượng cùng một "kiểu".

Cách để tạo "kiểu đối tượng" như thế này, là sử dụng một hàm tạo đối tượng.

Trong ví dụ trên, function Person() là một hàm tạo đối tượng.

Các đối tượng cùng kiểu được tạo bằng cách gọi hàm khởi tạo với từ khóa new.

Ví dụ

// tạo hai đối tượng person
const person1 = new Person("John","Doe",50,"blue");
const person2 = new Person("Thanh","Hoa",20,"green");

Xem kết quả

Từ khóa this


Trong JavaScript, đối tượng gọi this chính là đối tượng "sở hữu" hàm.

Giá trị của this, khi được sử dụng trong một đối tượng, là chính đối tượng đó.

Trong một hàm tạo this không có giá trị. Nó là một thay thế cho đối tượng mới. Giá trị của this sẽ trở thành đối tượng mới khi một đối tượng mới được tạo.

Lưu ý rằng this không phải là một biến. Nó là một từ khóa. Bạn không thể thay đổi giá trị của this.

Thêm một thuộc tính vào một đối tượng


Thêm một thuộc tính mới vào một đối tượng hiện có thật dễ dàng.

Ví dụ

// Thêm thuộc tính với vào đối tượng
person2.nationality = "Việt Nam";

Xem kết quả

Thuộc tính sẽ được thêm vào đối tượng person2. Không phải person1. (Cũng không phải đối tượng nào khác).

Thêm một phương thức vào một đối tượng


Thêm một phương thức mới vào một đối tượng hiện có thật dễ dàng.

Ví dụ

// Thêm phương thức mới với vào đối tượng
person2.fullName = function(){
        return this.firstName + " " + this.lastName;
    };

Xem kết quả

Phương thức sẽ được thêm vào đối tượng person2. Không phải person1. (Cũng không phải đối tượng nào khác).

Thêm thuộc tính vào hàm tạo


Chúng ta không thể thêm thuộc tính mới vào hàm khởi tạo đối tượng giống như cách chúng ta thêm thuộc tính mới vào một đối tượng hiện có.

Ví dụ

// không thể thêm một thuộc tính mới vào một hàm khởi tạo
Person.nationality = "Việt Nam";

Xem kết quả

Để thêm một thuộc tính mới vào một hàm tạo, chúng ta phải thêm nó trực tiếp vào hàm tạo.

Ví dụ

function Person(first, last, age, eye){
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
    this.nationality = "Việt Nam";
}

Xem kết quả

Thêm bằng cách này, các thuộc tính đối tượng tạo mới sẽ có giá trị thuộc tính nationality mặc định.

Thêm một phương thức vào một hàm tạo


Hàm khởi tạo của chúng ta cũng có thể xác định các phương thức.

Ví dụ

function Person(first, last, age, eye){
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
    this.fullName = function(){
        return this.firstName + " " + this.lastName;    
    }
}

Xem kết quả

Chúng ta cũng không thể thêm một phương thức mới vào một hàm khởi tạo đối tượng giống như cách chúng ta thêm một phương thức mới vào một đối tượng hiện có.

Việc thêm các phương thức vào một hàm khởi tạo đối tượng phải được thực hiện bên trong hàm khởi tạo.

Chúng ta hãy xem ví dụ sau.

Ví dụ

function Person(first, last, age, eye){
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.changeName = function(name){
	this.lastName = name;	
    }
  }

Hàm changeName() sẽ gán giá trị của name cho thuộc tính lastName của người đó.

Bây giờ chúng ta có thể thay đổi giá trị cho thuộc tính lastName.

Ví dụ

// Thay đổi lastName
person2.changeName("Thúy");

Xem kết quả

Hàm tạo JavaScript tích hợp


JavaScript có các hàm tạo dựng sẵn cho các đối tượng gốc.

Ví dụ

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

Xem kết quả

Đối tượng Math() không có trong danh sách. Math là một đối tượng toàn cục. Từ khóa new không thể được sử dụng trên Math.

Như chúng ta thấy ở trên, JavaScript có các phiên bản đối tượng của các kiểu dữ liệu nguyên thủy như String, NumberBoolean. Chúng ta không có lý do gì để tạo ra và làm cho các đối tượng phức tạp thêm. Giá trị ban đầu nhanh hơn nhiều.

Sử dụng các ký tự chuỗi "" thay vì new String().

Sử dụng các ký tự số 50 thay vì new Number().

Sử dụng các ký tự boolean true/false thay vì new Boolean().

Sử dụng các ký tự đối tượng {} thay vì new Object().

Sử dụng các ký tự mảng [] thay vì new Array().

Sử dụng các ký tự mẫu /()/ thay vì new RegExp().

Sử dụng biểu thức hàm function(){} thay vì new Function().

Ví dụ

var x1 = "";      // string 
var x2 = 0;       // number
var x3 = false;   // boolean
const x4 = {};    // Object object
const x5 = [];    // Array object
const x6 = /()/;  // RegExp object
const x7 = function(){};  // function

Xem kết quả