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 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 ý:

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.

Xem Thêm  [Domain] Tên miền là gì? Tổng quan về tên miền cần phải nắm - ten mien xyz

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.

  

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 ().

Xem Thêm  Cách in đậm văn bản trong HTML - cách đặt chữ đậm trong html

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

24 JavaScript Prototype Chain

  • Tác giả: CoderLipi
  • Ngày đăng: 2020-03-28
  • Đánh giá: 4 ⭐ ( 9251 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript uses a similar concept for creating an inheritance by chaining multiple instances to prototypes and creating nested prototypes.
    JavaScript prototype chain – understanding the JavaScript prototype chain.

    JavaScript prototype chain explained
    Method – JavaScript prototype chaining tutorial JavaScript prototype chain diagram What Is Prototype Inheritance In JavaScript

    JavaScript Tutorial for Beginners: Learn JavaScript in 5 Days

    But I suggest python and JavaScript programming language for beginners 2018 – The use of prototype in JavaScript (comparison with constructor and how to use it)

    JavaScript prototype inheritance – JavaScript prototype inheritance explained.

    understanding prototype inheritance in JavaScript .

    js svg clipping masks 108 is JavaScript prototype inheritance example 24 is the latest revision JavaScript prototype inheritance override method JavaScript prototype inheritance simple example Search for jobs related to JavaScript prototype inheritance stack overflow or hire on the world’s largest freelancing marketplace with 17m+ jobs 2020- JavaScript prototype inheritance private methods · queens park performance ball 2014 · time difference queensland new south wales
    template template – JavaScript prototype inheritance constructor JavaScript-Vererbung (9) Grundlegende prototypische Vererbung

    JavaScript prototype – this can be achieved using JavaScript prototype object…

    JavaScript prototype inheritance

    understand JavaScript prototypes. understanding the JavaScript prototype chain.
    JavaScript classes and the prototype.
    JavaScript is a prototype based language not class based.
    JavaScript inheritance and the prototype chain.
    JavaScript classes vs prototypes.

    JavaScript prototype chain – understanding the JavaScript prototype chain.

    JavaScript prototype chain explained
    Method – JavaScript prototype chaining tutorial JavaScript prototype chain diagram What Is Prototype Inheritance In JavaScript

    Part 1: JavaScript fundamentals; About functions in JavaScript · About this and function invocation context ·

    JavaScript tutorial for beginners: learn JavaScript fundamentals & how to create JavaScript functions.

    2020 – An online JavaScript tutorial for beginners is probably the best way to learn JavaScript.

    Tutorial for beginners prototype object JavaScript prototype object JavaScript example use of prototype in JavaScript use of prototype in js.

    This tutorial explains the concept of prototypes in JavaScript how a prototype chain gets built how JavaScript uses the prototype chain to search for methods and how you can customized the prototype chain to build your own custom objects..

    This tutorial explains the concept of prototypes in JavaScript how a prototype chain gets built how JavaScript uses the prototype chain to search for methods and how you can customized the prototype chain to build your own custom objects..

    In this post you’ll learn about a variety of patterns for instantiating new objects and in doing so you’ll be gradually led to understanding JavaScript prototype in depth…
    javascript function prototype
    javascript prototype
    Understand JavaScript Prototypes
    Object Oriented JavaScript Tutorial Prototype
    Prototype in JavaScript

    What is prototype in JavaScript example?
    How does JavaScript prototype work?
    Why prototype is used in JavaScript?
    What is JavaScript prototype inheritance?
    What is difference between __ proto __ and prototype?
    Prototypes in JavaScript – Better Programming

    Using Prototypes in JavaScript. … Prototypes allow you to easily define methods to all instances of a particular object. The beauty is that the method is applied to the prototype, so it is only stored in the memory once, but every instance of the object has access to it

    ==============================================================
    javascript prototype, object, objects, object oriented js, object oriented javascript tutorial, oop tutorial, oop javascript, object oriented js tutorial, js tutorial, javascript objects, proto vs prototypes, prototype tutorial, javascript prototype, javascript prototype inheritance, javascript prototypes, prototype chain, javascript prototype intro, javascript prototype object, javascript prototype inheritance example, javascript prototype interview questions, javascript prototype class, javascript prototype vs __proto__, javascript prototype property, javascript prototype explained, javascript prototype vs class, javascript prototype constructor, prototypal inheritance javascript, prototype chain javascript, prototypal inheritance javascript, object oriented javascript, prototype inheritance in javascript, object oriented programming javascript, prototype object javascript example, inheritance in javascript, javascript interview questions, js prototype chain, prototype in js, proto vs prototype, __proto__ vs prototype, prototype programming, is prototype what is prototypal, understanding prototypal, constructor method

Nguyên mẫu (Archetype) là gì ? Định nghĩa về nguyên mẫu dưới học thuyết của Carl Jung (P1)

  • Tác giả: spiderum.com
  • Đánh giá: 4 ⭐ ( 7236 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu khái niệm về các archetypes của Carl Jung

Sự khác biệt giữa nguyên mẫu chuỗi và đối tượng chuỗi trong JavaScript là gì?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 2249 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] JavaScript có hai loại chính, primivites và object. var s = ‘test’; var ss = new…

Design Pattern trong JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 3638 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi bắt đầu một project mới, điều cần làm trước tiên thay vì lao ngay vào việc code là xác định mục đich và phạm vi của project, sau đó là liệt kê ra các tính năng hay spec. Và nếu project phức tạp th…

Themorning City – Mua Sắm Sầm Uất

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

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á: 3 ⭐ ( 6845 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 ⭐ ( 1400 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  GeeksforGeeks - các loại danh sách trong python

By ads_php