Nguyên mẫu trong JavaScript – nguyên mẫu trong javascript là gì

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 trong javascript 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 xác định 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 (thể hiệ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  Hơn 75 mẫu HTML miễn phí sắp ra mắt - tệp html sắp ra mắt

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 liệu một đối tượng có chứa thuộc tính được chỉ định như một 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.

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.

Xem Thêm  Trả lại chỉ mục của phần tử cụ thể - chỉ mục jquery của phần tử có lớp

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 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 trong javascript là gì

Closure Trong Javascript Là Gì | Justin Nguyen

  • Tác giả: Justin Nguyen
  • Ngày đăng: 2021-09-03
  • Đánh giá: 4 ⭐ ( 3323 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chào mừng các bạn đến với series video Học Javascript Qua Khái Niệm về Closure, Lexical Environment, những cách sài và vấn đề hay gặp phải khi sử dụng closure.

    Nội dung trong video:
    🟢 0:55 Ôn lại Lexical Environment, Scope chain và call stack
    🟢 5:40 Closure trong javascript là gì?
    🟢 9:50 Sử dụng factory method và closure để tối ưu code
    🟢 15:25 Vấn đề khi sử dụng closure hay được sử dụng khi phỏng vấn

    ♥️ Xem toàn bộ series Học Javascript Qua Khái Niệm: https://www.youtube.com/watch?v=61rUGyUiw8U&list=PL80CNtS5d8_ytV3Jq5RSH3luyT3qGd0GY
    ♥️ Xem toàn bộ series Học Javascript Qua Ví Dụ: https://www.youtube.com/watch?v=QXwotZn5WrY&list=PL80CNtS5d8_yEuis6Cc4xTnNB4ePE5obx
    ♥️ MDN về Closure: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

    Hãy bấm like, chia sẻ nếu bạn thích video này nhé, đăng ký kênh để theo dõi những series video tiếp theo.

    Từ mới Tiếng anh trong video, xem thêm video để hiểu ý nghĩa nhé:
    ⭐ Closure
    ⭐ Hoisting
    ⭐ Execution Context, Lexical Environment, Scope Chain

    Plugin được sử dụng để chạy JS trong Visual Studio Code: Code Runner

    Website: https://appsindie.com/
    Twitter: https://twitter.com/apps_indie
    Facebook: https://www.facebook.com/AppsIndie
    Github: https://github.com/justindannguyen

    © Copyright 2021 by Justin Nguyen, AppsIndie.com

Object Prototype trong Javascript là gì?

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 1317 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Prototype trong Javascript là gì? Prototype là tất cả những phương thức và thuộc tính của object prototype , đối tượng này tồn tại trong các object.

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

  • Tác giả: s8.galaxyz.net
  • Đánh giá: 3 ⭐ ( 5635 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.

Hiểu nguyên mẫu và thừa kế trong JavaScript

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

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

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 7818 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á: 5 ⭐ ( 8782 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ại sao Prototype Lại Quan Trọng Trong Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 3 ⭐ ( 7023 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Prototype là khái niệm cốt lõi cơ bản trong JavaScript khá quan trọng để thực thi OOP trong JavaScript. Trong bài này chúng ta cùng tìm hiểu về nó nhé!

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

Xem Thêm  Lập trình hướng đối tượng trong C ++ - Rất tiếc các khái niệm trong c ++