Trình xây dựng đối tượng JavaScript
Ví dụ
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Hãy tự mình thử »Ghi chú
Việc đặt tên hàm xây dựng bằng chữ cái đầu tiên viết hoa được coi là một cách thực hành tốt.
Về điều này
Trong hàm xây dựng, giá this
không có giá trị. Nó là một sự 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.
Xem thêm:
Các loại đối tượng (Bản thiết kế) (Lớp học)
Các ví dụ từ các chương trước còn hạn chế. Họ chỉ tạo ra các đối tượng duy nhất.
Đôi khi chúng ta cần một " bản thiết kế " để tạo ra nhiều đối tượng cùng "loại".
Cách để tạo một "loại đối tượng" là sử dụng hàm tạo đối tượng .
Trong ví dụ trên, function Person()
là hàm xây dựng đối tượng.
Các đối tượng cùng loại được tạo bằng cách gọi hàm khởi tạo với từ khóa new
:
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
Hãy tự mình thử » Cái này là cái gì ?
Trong JavaScript, từ khóa this
đề cập đến một đối tượng .
Đối tượng nào phụ thuộc vào cách this
được gọi (được sử dụng hoặc được gọi).
Từ khóa this
đề cập đến các đối tượng khác nhau tùy thuộc vào cách nó được sử dụng:
Trong một phương thức đối tượng, this đề cập đến đối tượng . |
Một mình, this đề cập đến đối tượng toàn cầu . |
Trong một hàm, this đề cập đến đối tượng toàn cục . |
Trong một hàm, ở chế độ nghiêm ngặt, this là undefined . |
Trong một sự kiện, this đề cập đến phần tử đã nhận được sự kiện. |
Các phương thức như call() , apply() và bind() có thể tham chiếu this tới bất kỳ đối tượng nào . |
Ghi chú
this
không phải là một biến. Đó là một từ khóa. Bạn không thể thay đổi giá trị của this
.Xem thêm:
Thêm thuộc tính vào đối tượng
Việc 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:
Thuộc tính sẽ được thêm vào myFather. Không phải với mẹ tôi. (Không để bất kỳ đối tượng người nào khác).
Thêm một phương thức vào một đối tượng
Việc 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ụ
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
Hãy tự mình thử »Phương thức này sẽ được thêm vào myFather. Không phải với mẹ tôi. (Không để bất kỳ đối tượng người nào khác).
Thêm một thuộc tính vào một hàm tạo
Bạn không thể thêm thuộc tính mới vào hàm tạo đối tượng giống như cách bạn thêm thuộc tính mới vào đối tượng hiện có:
Để thêm thuộc tính mới vào hàm tạo, bạn phải thêm thuộc tính đó vào hàm tạo:
Ví dụ
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
Hãy tự mình thử »Bằng cách này, các thuộc tính đối tượng có thể có giá trị 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 bạn cũng có thể định nghĩa các phương thức:
Ví dụ
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.name = function() {
return this.firstName + " " + this.lastName;
};
}
Hãy tự mình thử »Bạn không thể thêm phương thức mới vào hàm tạo đối tượng giống như cách bạn thêm phương thức mới vào đối tượng hiện có.
Việc thêm các phương thức vào hàm tạo đối tượng phải được thực hiện bên trong hàm tạo:
Ví dụ
function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}
Hàm ChangeName() gán giá trị tên cho thuộc tính họ của người đó.
JavaScript biết bạn đang nói đến người nào bằng cách "thay thế" điều này bằng myMother .
Trình xây dựng JavaScript tích hợp
JavaScript có các hàm tạo tích hợp cho các đối tượng gốc:
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
Hãy tự mình thử » Đối tượng Math()
không có trong danh sách. Math
là một đối tượng toàn cầu. Từ khóa new
không thể được sử dụng trên Math
.
Bạn có biết không?
Như bạn có thể 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 String
, Number
và Boolean
. Nhưng không có lý do gì để tạo ra những đối tượng phức tạp. Giá trị nguyên thủy nhanh hơn nhiều:
Sử dụng chuỗi ký tự ""
thay vì new String()
.
Sử dụng chữ số 50
thay vì new Number()
.
Sử dụng các ký tự boolean true / false
thay vì new Boolean()
.
Sử dụng đối tượng bằng chữ {}
thay vì new Object()
.
Sử dụng mảng chữ []
thay vì new Array()
.
Sử dụng các chữ mẫu /()/
thay vì new RegExp()
.
Sử dụng biểu thức hàm () {}
thay vì new Function()
.
Ví dụ
let x1 = ""; // new primitive string
let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new Object object
const x5 = []; // new Array object
const x6 = /()/ // new RegExp object
const x7 = function(){}; // new function
Hãy tự mình thử »Đối tượng chuỗi
Thông thường, các chuỗi được tạo dưới dạng nguyên thủy: firstName = "John"
Nhưng chuỗi cũng có thể được tạo dưới dạng đối tượng bằng từ khóa new
:
firstName = new String("John")
Tìm hiểu lý do tại sao không nên tạo chuỗi làm đối tượng trong chương Chuỗi JS .
Đối tượng số
Thông thường, các số được tạo dưới dạng nguyên thủy: x = 30
Nhưng các số cũng có thể được tạo dưới dạng đối tượng bằng từ khóa new
:
x = new Number(30)
Tìm hiểu lý do tại sao không nên tạo số làm đối tượng trong chương Số JS .
Đối tượng Boolean
Thông thường, các boolean được tạo dưới dạng nguyên thủy: x = false
Nhưng boolean cũng có thể được tạo dưới dạng đối tượng bằng từ khóa new
:
x = new Boolean(false)
Tìm hiểu tại sao không nên tạo booleans làm đối tượng trong chương JS Booleans .