Categories

Nguyên mẫu đối tượng trong prototype là gì

prototype-la-gi-5-a3-theoceanapartments-com-vn

Trong bài viết này, chúng ta sẽ hiểu khái niệm về nguyên mẫu trong javascript để giúp bạn hiểu cách thêm nguyên mẫu vào các đối tượng.

Chúng ta đã thấy các đối tượng và hoạt động trên các đối tượng trong prototype là gì, nhưng đây chỉ là một phần nhỏ của những gì các đối tượng có liên quan. Hôm nay chúng ta sẽ học cách thêm các phương thức hoặc thuộc tính vào các đối tượng thông qua các nguyên mẫu.

1. Nguyên mẫu trong prototype là gì?

Prototype có nghĩa là một nguyên mẫu, nhưng trong javascript nó là một tập hợp các phương thức và thuộc tính nằm trong một đối tượng được gọi là nguyên mẫu và đối tượng đó tồn tại trong đối tượng.

prototype-la-gi-5-a3-theoceanapartments-com-vn

Vì vậy, tất cả các đối tượng trong Javascript đều có nguyên mẫu riêng để lưu trữ các thành phần này. Bây giờ, khi bạn tạo một cá thể mới, cá thể đó sẽ kế thừa tất cả các phương thức và thuộc tính có trong nguyên mẫu của đối tượng.

Mục nhập này đã được đăng trong [free tuts .net]

Ví dụ: khi bạn tạo một thể hiện của đối tượng Number, thể hiện đó sẽ có tất cả các khả năng xử lý số của đối tượng Number.

Đầu tiên

2

3

4

5

6

7

số 8

// Tạo một đối tượng Number mới

var age = new Number (12);

// Bây giờ chúng ta có thể sử dụng phương thức

age.toString ();

age.toFixed ();

age.toPre precision ();

age.valueOf ();

Bây giờ tôi sẽ console.log để xem có gì trong đó.

Đầu tiên

console.log (tuổi);

kết quả:

Nguyên mẫu đối tượng js 1 JPG

Nó trông không rõ ràng lắm. Bây giờ tôi sẽ thêm một số thuộc tính vào biến age và chạy lại lệnh console.log.

Đầu tiên

2

3

4

var age = new Number (12);

age.name = “Cuong”;

age.address = “DakLak”;

console.log (tuổi);

Nguyên mẫu đối tượng js 2 JPG

Do đó, mỗi đối tượng sẽ được chia thành 2 phần như hình bên.

Phần đầu tiên là các thuộc tính riêng của cá thể.

Phần thứ hai là nguyên mẫu, chứa các phương thức và thuộc tính kế thừa từ đối tượng. Cụ thể là các đối tượng Số trong ví dụ này.

2. Thêm thuộc tính và phương thức vào nguyên mẫu

Các đối tượng trong javascript có nguyên mẫu, vì vậy nếu bạn muốn thêm thuộc tính hoặc phương thức vào nguyên mẫu, hãy sử dụng cú pháp sau:

Đầu tiên

ObjectName.prototype.property_name = data;

nơi dữ liệu có thể là thuộc tính hoặc phương thức.

Thêm thuộc tính vào nguyên mẫu

Trong ví dụ dưới đây, tôi thêm thuộc tính count vào đối tượng Number.

Đầu tiên

2

3

Number.prototype.count = 0;

let age = newNumber (12);

console.log (tuổi);

Kết quả là như sau:

Nguyên mẫu đối tượng js 3 JPG

Như được hiển thị, chúng ta có thuộc tính count trong nguyên mẫu của biến tuổi.

Thêm các phương thức vào nguyên mẫu

Bây giờ mình thêm một hàm plus () vào đối tượng Number, hàm này có tác dụng cộng giá trị.

prototype-la-gi-5-a2-theoceanapartments-com-vn

Lưu ý: Bạn cần sử dụng hàm valueOf () để lấy giá trị hiện tại của đối tượng.

chạy thử nghiệm

Đầu tiên

2

3

4

5

6

7

số 8

9

mười

11

thứ mười hai

// tạo đối tượng

Number.prototype.plus = function (value) {

trả về this.valueOf () + parseInt (giá trị);

};

 

// tạo đối tượng mới

var age = new Number (12);

document.write (age.plus (12) + “<br/>”);

 

// tạo một đối tượng khác

năm biến thể = 2014;

document.write (year.plus (12));

Trong ví dụ này, bạn sẽ thấy mình đang sử dụng hai phương pháp để tạo các đối tượng Number, cả hai đều sử dụng hàm plus ().

Bây giờ tôi sẽ chạy các lệnh bảng điều khiển để xem cách thực hiện.

Đầu tiên

console.log (tuổi);

Nguyên mẫu đối tượng js 4 JPG

Như được hiển thị, chúng tôi đã thêm một chức năng cộng.

3. Nguyên mẫu đối tượng và hàm trong javascript

Chúng ta đã học cách tạo Đối tượng mới bằng cách sử dụng từ khóa Đối tượng và {} mới, nhưng khi chúng ta tạo theo hai cách này, chúng ta không thể sử dụng từ khóa mới để khởi tạo đối tượng mới.

Đầu tiên

2

3

4

dị nhân = {};

 

// lỗi vì Person không phải là một phương thức khởi tạo

var p = new Person ();

Có một cách khác để giải quyết nó, đó là thông qua các hàm trong Javascript. Chúng ta sẽ sử dụng hàm tạo để khởi tạo một hàm với từ khóa mới.

Ví dụ: Tạo đối tượng Person với các thuộc tính (tên, email, địa chỉ) và phương thức showInfo () để hiển thị thông tin.

Đầu tiên

2

3

4

5

6

7

số 8

9

mười

11

thứ mười hai

13

14

chức năng người () {

 

// tính năng

this.name = “”;

this.email = “”;

this.address = “”;

 

// phương pháp

this.showInfo = function () {

Documentmenet.write (“Tên là:” + this.name + “<br/>”);

Documentmenet.write (“Hộp thư là:” + this.email + “<br/>”);

Documentmenet.write (“Địa chỉ là:” + this.address + “<br/>”);

};

}

Bây giờ, nếu bạn muốn tạo một đối tượng mới và sử dụng các thuộc tính và phương thức, chúng ta thực hiện như sau.

Đầu tiên

2

3

4

5

6

7

số 8

9

mười

// tạo mới

var cuong = new Person ();

 

// gán thuộc tính

cuong.name = “Nguyen Van Kiang”;

cuong.email = “thehalfheart@gmail.com”;

cuong.address = “Buôn Ma Thuột Dal”;

 

// gọi phương thức

cuong.showInfo ();

Nếu bạn gọi hàm mà không sử dụng từ khóa mới, bạn đang gọi hàm chứ không phải tạo đối tượng.

4. Nguyên mẫu trong các lớp javascript

Một lớp đã được thêm vào trong ES6 và nó cũng là một đối tượng, vì vậy nó cũng có các thuộc tính và nguyên mẫu.

Trong ví dụ dưới đây, tôi đã tạo một lớp Sinh viên.

Đầu tiên

2

3

4

5

6

7

số 8

9

mười

11

thứ mười hai

13

14

15

học sinh lớp {

hàm tạo (tên, tuổi) {

this.name = tên;

this.age = tuổi;

}

 

Hiển thị thông tin () {

console.log (`Tên học sinh là $ {this.name}`);

console.log (`Tuổi của học sinh là $ {this.age}`);

}

}

 

let student = new Student (“Cuong”, 32);

 

console.log (sinh viên);

Kết quả là như sau:

JPG nguyên mẫu

Do đó, các thuộc tính của đối tượng sẽ được xem xét và các phương thức sẽ được đưa vào nguyên mẫu.

5. Kết luận

Nguyên mẫu đóng một vai trò rất quan trọng trong việc quản lý các phương thức và thuộc tính của một đối tượng. Những người chỉ viết mã cơ bản có thể sẽ quan tâm, và những người muốn viết mã nâng cao phải biết đối tượng nguyên mẫu này.

Trong bài viết mình đã đưa ra một số ví dụ rất trực quan và trình diễn các thao tác liên quan đến nguyên mẫu trong Javascript, mong rằng qua bài viết này các bạn sẽ hiểu và thấy được sức mạnh thực sự của prototype là gì Nếu bạn vẫn còn thắc mắc, hãy tham khảo bài viết tìm hiểu các nguyên mẫu của javascript.

 

Views:
24
Article Tags:
Article Categories:
Tổng Hợp

Leave a Reply

Your email address will not be published. Required fields are marked *