Bài viết này giải thích nguyên mẫu trong JavaScript là gì. Làm thế nào để truy cập nguyên mẫu của một hàm hoặc một đối tượng?

Bạn đang xem : nguyên mẫu js là gì

Nguyên mẫu trong JavaScript

JavaScript là một ngôn ngữ động. Bạn có thể đính kèm các thuộc tính mới vào một đối tượng bất kỳ lúc nào như được hiển thị bên dưới.

Ví dụ: Đính kèm thuộc tính vào đối tượng

  

function

Student () {

this

.name =

'John'

;

this

. Giới =

'Nam'

; }

var

studObj1 =

new

Student (); studObj1.age = 15; cảnh báo (studObj1.age);

// 15

var

studObj2 =

new

Student (); cảnh báo (studObj2.age);

// không xác định

Như bạn có thể thấy trong ví dụ trên, thuộc tính age được đính kèm với phiên bản studObj1. Tuy nhiên, phiên bản studObj2 sẽ không có thuộc tính age vì nó chỉ được định nghĩa trên cá thể studObj1.

Vậy phải làm gì nếu chúng ta muốn thêm các thuộc tính mới ở giai đoạn sau vào một hàm sẽ được chia sẻ trên tất cả các phiên bản?

Câu trả lời là Nguyên mẫu .

Nguyên mẫu là một đối tượng được liên kết với mọi hàm và đối tượng theo mặc định trong JavaScript, trong đó thuộc tính nguyên mẫu của hàm có thể truy cập và sửa đổi được và thuộc tính nguyên mẫu của đối tượng (hay còn gọi là thuộc tính) không hiển thị.

Mọi hàm đều bao gồm đối tượng nguyên mẫu theo mặc định.


Nguyên mẫu trong JavaScript

Đối tượng nguyên mẫu là loại đối tượng có thể liệt kê đặc biệt mà các thuộc tính bổ sung có thể được gắn vào nó, đối tượng này sẽ được chia sẻ trên tất cả các phiên bản của hàm khởi tạo của nó.

Vì vậy, hãy sử dụng thuộc tính nguyên mẫu của một hàm trong ví dụ trên để có thuộc tính tuổi trên tất cả các đối tượng như được hiển thị bên dưới.

Ví dụ: nguyên mẫu < / p>

  

function

Student () {

this

.name =

'John'

;

this

. Giới =

'M'

; } Student.prototype.age = 15;

var

studObj1 =

new

Student (); cảnh báo (studObj1.age);

// 15

var

studObj2 =

new

Student (); cảnh báo (studObj2.age);

// 15

Mọi đối tượng được tạo bằng cú pháp chữ hoặc cú pháp hàm tạo với từ khóa mới, bao gồm thuộc tính __proto__ trỏ đến đối tượng nguyên mẫu của hàm đã tạo đối tượng này.


Nguyên mẫu trong JavaScript

Bạn có thể gỡ lỗi và xem thuộc tính nguyên mẫu của đối tượng hoặc chức năng trong công cụ dành cho nhà phát triển của chrome hoặc firefox. Hãy xem xét ví dụ sau.

Ví dụ: nguyên mẫu

  

function

Student () {

this

.name =

'John'

;

this

. Giới =

'M'

; }

var

studObj =

new

Student (); console.log (Student.prototype);

// đối tượng

console.log (studObj.prototype);

// không xác định

console.log (studObj .__ proto__);

// đối tượng

console.log (

typeof

Student.prototype);

// đối tượng

console.log (

typeof

studObj .__ proto__);

// đối tượng

console.log (Student.prototype === studObj .__ proto__);

// true

Như bạn có thể thấy trong ví dụ trên, thuộc tính nguyên mẫu của Hàm có thể được truy cập bằng cách sử dụng & lt; function-name & gt; .prototype. Tuy nhiên, một đối tượng (phiên bản) không hiển thị thuộc tính nguyên mẫu, thay vào đó bạn có thể truy cập nó bằng cách sử dụng __proto__ .

Lưu ý:

Xem Thêm  Lập trình đa luồng trong Java (Java Multi-threading) - da luong trong java

Thuộc tính nguyên mẫu là loại đối tượng có thể liệt kê đặc biệt không thể lặp lại bằng cách sử dụng vòng lặp for..in hoặc foreach.

Nguyên mẫu của đối tượng

Như đã đề cập trước đây, thuộc tính nguyên mẫu của đối tượng là vô hình. Sử dụng phương thức Object.getPrototypeOf (obj) thay vì __proto__ để truy cập đối tượng nguyên mẫu.

Ví dụ: Nguyên mẫu của đối tượng

  

function

Student () {

this

.name =

'John'

;

this

. Giới =

'M'

; }

var

studObj =

new

Student (); Student.prototype.sayHi = function () { alert (

"Xin chào"

); };

var

studObj1 =

new

Student ();

var

proto = Object.getPrototypeOf (studObj1);

// trả về đối tượng nguyên mẫu của Sinh viên

cảnh báo (proto.constructor);

// trả về hàm Sinh viên

Đối tượng nguyên mẫu bao gồm các thuộc tính và phương thức sau.

Tài sản

Sự mô tả

người xây dựng

Trả về một hàm đã tạo phiên bản.

__proto__

Đây là thuộc tính vô hình của một đối tượng. Nó trả về đối tượng nguyên mẫu của một hàm mà nó liên kết đến.

Phương pháp

Sự mô tả

hasOwnProperty ()

Trả về một boolean cho biết một đối tượng có chứa thuộc tính được chỉ định là thuộc tính trực tiếp của đối tượng đó và không được kế thừa thông qua chuỗi nguyên mẫu hay không.

isPrototypeOf ()

Trả về một chỉ báo boolean liệu đối tượng được chỉ định có nằm trong chuỗi nguyên mẫu của đối tượng mà phương thức này được gọi hay không.

propertyIsEnumerable ()

Trả về một boolean cho biết thuộc tính được chỉ định có thể liệt kê được hay không.

toLocaleString ()

Trả về chuỗi ở định dạng cục bộ.

toString ()

Trả về chuỗi.

giá trị của

Trả về giá trị ban đầu của đối tượng được chỉ định.

Chrome và Firefox biểu thị nguyên mẫu của đối tượng là __proto__ là liên kết công khai trong khi nội bộ nó tham chiếu là [[Nguyên mẫu]]. Internet Explorer không bao gồm __proto__ . Chỉ IE 11 mới có nó.

Phương thức getPrototypeOf () được chuẩn hóa kể từ ECMAScript 5 và có sẵn kể từ IE 9.

Xem Thêm  Cách thay đổi kích thước hình ảnh để thiết kế web đáp ứng - thay đổi kích thước hình ảnh trong css

Thay đổi nguyên mẫu

Như đã đề cập ở trên, nguyên mẫu của mỗi đối tượng được liên kết với đối tượng nguyên mẫu của hàm. Nếu bạn thay đổi nguyên mẫu của hàm thì chỉ các đối tượng mới sẽ được liên kết với nguyên mẫu đã thay đổi. Tất cả các đối tượng hiện có khác sẽ vẫn liên kết với nguyên mẫu cũ của chức năng. Ví dụ sau đây minh họa kịch bản này.

Ví dụ: Thay đổi nguyên mẫu

  

function

Student () {

this

.name =

'John'

;

this

. Giới =

'M'

; } Student.prototype.age = 15;

var

studObj1 =

new

Student (); alert (

'studObj1.age ='

+ studObj1.age);

// 15

var

studObj2 =

new

Student (); alert (

'studObj2.age ='

+ studObj2.age);

// 15

Student.prototype = {age: 20};

var

studObj3 =

new

Student (); alert (

'studObj3.age ='

+ studObj3.age);

// 20

alert (

'studObj1.age ='

+ studObj1.age);

// 15

alert (

'studObj2.age ='

+ studObj2.age);

// 15

Sử dụng Nguyên mẫu

Đối tượng nguyên mẫu đang được JavaScript engine sử dụng trong hai việc, 1) để tìm các thuộc tính và phương thức của một đối tượng 2) để triển khai kế thừa trong JavaScript.

  

function

Student () {

this

.name =

'John'

;

this

. Giới =

'M'

; } Student.prototype.sayHi = function () { alert (

"Xin chào"

); };

var

studObj =

new

Student (); studObj.toString ();

Trong ví dụ trên, phương thức toString () không được định nghĩa trong Student, vậy làm thế nào và từ đâu nó tìm thấy toString ()?

Đây, nguyên mẫu đi vào hình ảnh. Trước hết, JavaScript engine sẽ kiểm tra xem phương thức toString () có được gắn vào studObj hay không? (Có thể đính kèm một hàm mới vào một thể hiện trong JavaScript). Nếu nó không tìm thấy ở đó thì nó sử dụng liên kết __proto__ của studObj trỏ đến đối tượng nguyên mẫu của hàm Student.
Nếu nó vẫn không thể tìm thấy nó ở đó thì nó sẽ đi lên trong hệ thống và kiểm tra đối tượng nguyên mẫu của hàm Object vì tất cả các đối tượng đều có nguồn gốc từ Object trong JavaScript và tìm phương thức toString (). Do đó, nó tìm thấy phương thức toString () trong đối tượng nguyên mẫu của hàm Object và vì vậy chúng ta có thể gọi studObj.toString ().

Bằng cách này, nguyên mẫu rất hữu ích trong việc chỉ giữ một bản sao của các hàm cho tất cả các đối tượng (cá thể).

Hình sau minh họa tình huống trên.


Nguyên mẫu trong JavaScript

Tìm hiểu cách chúng ta có thể đạt được tính kế thừa bằng cách sử dụng nguyên mẫu trong phần tiếp theo.


Xem thêm những thông tin liên quan đến chủ đề nguyên mẫu js là gì

JS Basic – 1 : JavaScript là gì?

  • Tác giả: Son Nguyen
  • Ngày đăng: 2022-04-22
  • Đánh giá: 4 ⭐ ( 6286 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tham gia các khóa học MIỄN PHÍ tại Criti Studio tại đây nhé (tất cả khóa học JavaScript, Python, AI, Machine Learning, Django, NextJS, Zbrush, SolidWorks, Inventor, CC3, Blender):
    www.critistudio.com

    Chào các bạn, đây là khóa học lập trình Javascript cơ bản cho người mới bắt đầu được Criti Studio chia sẻ miễn phí trên youtube. Mong muốn của việc làm này là chia sẻ kiến thức và lan tỏa đam mê học lập trình.
Xem Thêm  Cách tạo một biểu mẫu HTML gửi cho bạn một email - gửi email dạng html

One moment, please…

  • Tác giả: tiensok.com
  • Đánh giá: 5 ⭐ ( 7754 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

nguyên mẫu – Wiktionary tiếng Việt

  • Tác giả: vi.wiktionary.org
  • Đánh giá: 4 ⭐ ( 1377 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

16 khái niệm Javascript cần phải nắm rõ – Phần 1: Javascript Object

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 4278 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lời mở đầu

[Tự học Javascript] Kế thừa protocol(nguyên mẫu) trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 4 ⭐ ( 9816 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chẳng hạn, chúng ta có một đối tượng user với các thuộc tính và phương thức của nó, và muốn tạo adminvà guestcác biến thể được sửa đổi một chút của nó. Chúng ta muốn sử dụng lại những gì chúng ta có từuser, không sao chép / thực hiện lại các phương thức của nó, chỉ cần xây dựng một đối tượng mới.

Nguyên mẫu và Chuỗi nguyên mẫu với JavaScript hướng đối tượng

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 8257 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng ta luôn thấy rằng mọi đối tượng trong JavaScript đều có một số phương thức được xác định trước. Để biết về, chúng ta phải tìm câu trả lời cho những câu hỏi sau: Nguyên mẫu là gì? Chuỗi…

Tìm hiểu Nguyên mẫu và Kế thừa trong JavaScript

  • Tác giả: s16.galaxyz.net
  • Đánh giá: 5 ⭐ ( 2234 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript là một ngôn ngữ dựa trên nguyên mẫu , nghĩa là các thuộc tính và phương thức của đối tượng có thể được chia sẻ thông qua các đối tượng tổng quát có khả năng được nhân bản và mở rộng. Đây được gọi là kế thừa nguyên mẫu và khác với kế thừa lớp. Trong số các ngôn ngữ lập trình hướng đối tượng phổ biến, JavaScript tương đối độc đáo, vì các ngôn ngữ nổi bật khác như PHP, Python và Java là các ngôn ngữ dựa trên lớp, thay vào đó định nghĩa các lớp là bản thiết kế cho các đối tượng.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php