如何理解JavaScript中的原型與原型鏈

本篇文章給大家分享的是有關如何理解JavaScript中的原型與原型鏈，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

原型和原型鏈關系貫穿JavaScript中的對象，而JavaScript中萬物皆對象，所以原型和原型鏈是比較重要的概念，今天就帶大家一起來看一看JavaScript中的原型與原型鏈。

一、了解概念(知道有這兩個名詞即可)

1. 原型（prototype）

2. 原型鏈（__proto__）

二、了解從屬關系

prototype  => 函數的一個屬性         ： 同時也是一個 對象{} (稱之為原型對象亦可)

__proto__ => 對象Object的一個屬性   ： 同時也是一個 對象{}   (__proto__也就是[[Prototype]])

注：對象的__proto__保存著該對象的構造函數的prototype

a.聲明一個構造函數

    function Test() { }
  
    //prototype 是函數的一個屬性
    console.dir(Test);
    console.log(Test.prototype);
    // Test.prototype也是一個對象
    console.log(typeof Test.prototype);

b.聲明一個對象

    const test = new Test();
    
    console.log(test);
    //驗證test為一個對象
    console.log(typeof test);
    //__proto__是對象的一個屬性
    console.log(test.__proto__);
    console.log(Test.prototype);
    //對象的__proto__屬性存儲著Test.prototype
    console.log(test.__proto__ === Test.prototype);
    // test.__proto__也是一個對象
    console.log(typeof test.__proto__);

function Test() {}
console.log(Test.prototype); //驗證函數是否有prototype屬性

let test = new Test();
console.dir(test.__proto__); //驗證對象是否有__proto__屬性
console.log(test.__proto__ === Test.prototype);//驗證對象的__ptoto__是否保存著該對象的構造函數的prototype

console.log(Test.prototype.__proto__ === Object.prototype);//Test.prototype（是一個對象）的__proto__屬性是否是對象的原型屬性
console.log(Object.prototype.__proto__);//原型鏈的頂層沒有__proto__屬性 null

三、深入認識原型鏈、原型和原型繼承

    function Test(){}
    let test =new Test();
    test.a= 10;
    //test.__proto__ === test.constructor.prototype
    test.__proto__.b1=11;//對象的__proto__屬性存儲著對象構造函數的prototype屬性
    Test.prototype.b2=11;
   
    test.__proto__.__proto__.c1=12;
    Object.prototype.c2=12;
    console.log(test);
    console.log(Test.prototype);
    console.log(Object.prototype.__proto__);
   
    /*逐層解析
    * test{
    *        a = 10
    *        __proto__:Test.prototype{
    *                 b = 11
    *                 __proto__:Object.prototype{
    *                           c = 12
    *                           X__prototype__:null
    *                 }         
    *        }
    *     }
    *
    * */

四、總結

• 不建議直接用 __proto__ 訪問。

• 可以簡單概括為以prototype為原型節點, __proto__為原型鏈條。

• 每個實例對象（object）都有一個私有屬性（稱之為 __proto__ ）指向它的構造函數的原型對象（prototype）。該原型對象也有一個自己的原型對象（__proto__），層層向上直到一個對象的原型對象為 null。根據定義，null 沒有原型，并作為這個原型鏈中的最后一個環節。

• someObject.[[Prototype]] 符號是用于指向 someObject 的原型,someObject.[[Prototype]] === __proto__(JavaScript的非標準但許多瀏覽器實現的屬性)。

• Object.prototype 屬性表示 Object 的原型對象。

• 被構造函數創建的實例對象的 [[Prototype]] 指向 func的 prototype 屬性。

以上就是如何理解JavaScript中的原型與原型鏈，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。