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 : js nguyên mẫu 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  Cách tạo các phần tử kéo và thả bằng Vanilla JavaScript và HTML - kéo và thả js

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.

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.

Xem Thêm  Cách thêm CSS vào HTML: Tìm hiểu CSS nội tuyến, nội bộ và bên ngoài - cách thêm css bên ngoài vào html

  

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ủ đề js nguyên mẫu là gì

Prototypes in JavaScript – FunFunFunction #16

  • Tác giả: Fun Fun Function
  • Ngày đăng: 2016-01-25
  • Đánh giá: 4 ⭐ ( 8065 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 💖 Support the show by becoming a Patreon
    https://www.patreon.com/funfunfunction

    Let’s say that you have a food type, and you want to make lots of different instances of that food, such as waffles, and I don’t know why you’d want any other food than waffles, but maybe you like carrots or something. In that context, *food* is the prototype of *waffles* and *carrots*.

    Some of you will be thinking – that reminds me of classes! You’d be right, but they are not the same thing, so try to put classes aside and think of prototypes as something completely new – if you try to shove prototypes into the same place in your brain where you keep classes you’ll be very unhappy.

    Music by http://incompetech.com/

    💛 Follow on Twitch
    We record the show live Mondays 7 AM PT
    https://twitch.tv/funfunfunction

    💛 Fun Fun Forum
    Private discussion forum with other viewers in between shows. https://www.funfunforum.com. Available to patron members, become one at https://www.patreon.com/funfunfunction

    💛 mpj on Twitter
    https://twitter.com/mpjme

    💛 CircleCI (Show sponsor)
    Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:
    https://circleci.funfunfunction.com

    💛 Quokka (Show sponsor)
    Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer – use this link when you buy to let them know you came from here:
    http://quokka.funfunfunction.com

    💛 FUN FUN FUNCTION
    Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.

    🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.

    Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.

    📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.

    ⏯ On Fridays, an edited version of the show is adapted for and published on YouTube.

    Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Software Development, Project Management

Nguyên mẫu prototype là gì, nó hoạt động như thế nào và tại sao nó lại quan trọng trong Javascript?

  • Tác giả: thanglongcitydaimo1.blogspot.com
  • Đánh giá: 4 ⭐ ( 3625 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á: 4 ⭐ ( 6885 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.

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á: 3 ⭐ ( 8578 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lời mở đầu

JavaScript là gì?

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

Đối tượng, Nguyên mẫu và Lớp trong JavaScript

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

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

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

Xem Thêm  Cách sử dụng PHP trong HTML - sử dụng php trong html

By ads_php