đối tượng nguyên mẫu javascript

Tất cả các đối tượng JavaScript kế thừa các thuộc tính và phương thức từ một nguyên mẫu.

Trong bài đọc trước, chúng ta đã học cách sử dụng một phương thức khởi tạo đối tượng.

Ví dụ

// hàm khởi tạo đối tượng
function Person(first,last,age,eye){
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye
}

const person1 = new Person("John","Doe",50,"blue");
const person2 = new Person("Thanh","Hoa",20,"green");

Xem kết quả

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

Ví dụ

// không thể thêm thuộc tính mới vào hàm khởi tạo hiện có
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 khởi tạo, chúng ta phải thêm trực tiếp nó vào hàm khởi tạo.

Ví dụ

// hàm khởi tạo đối tượng
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ả

Kế thừa nguyên mẫu javascript

Tất cả các đối tượng JavaScript đều kế thừa các thuộc tính và phương thức từ một nguyên mẫu.

Đối tượng Date kế thừa từ Date.prototype
Đối tượng Array kế thừa từ Array.prototype
Đối tượng Person kế thừa từ Person.prototype

Object.prototype nằm trên cùng của chuỗi kế thừa nguyên mẫu.

Đối tượng Date, đối tượng Array và đối tượng Person kế thừa từ Object.prototype.

Đôi khi chúng ta muốn thêm thuộc tính (hoặc phương thức) mới vào tất cả các đối tượng hiện có của một kiểu định dạng nhất định.

Đôi khi chúng ta muốn thêm các thuộc tính (hoặc phương thức) mới vào một hàm khởi tạo đối tượng.

Sử dụng Thuộc tính prototype

Thuộc tính JavaScript prototype cho phép chúng ya thêm các thuộc tính mới vào các hàm tạo đối tượng.

Ví dụ

// Hàm khởi tạo đối tượng
function Person(first,last,age,eye){
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye
}
// Thuộc tính prototype cho phép thêm mới vào hàm khởi tạo
Person.prototype.nationality = "Việt Nam";

Xem kết quả

Thuộc tính JavaScript prototype cũng cho phép chúng ta thêm các phương thức mới vào các hàm tạo đối tượng.

Ví dụ

// Hàm khởi tạo đối tượng
function Person(first,last,age,eye){
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye
}
// Thuộc tính prototype cho phép thêm mới vào hàm khởi tạo
Person.prototype.fullName = function(){
        return this.firstName + " " + this.lastName;
    };

Xem kết quả

Lưu ý là chúng ta chỉ sửa đổi nguyên mẫu hàm khởi tạo do chúng ta định nghĩa . Không bao giờ sửa đổi nguyên mẫu của các đối tượng JavaScript tiêu chuẩn.