摘要：這篇文章的的目的試圖通過最簡單的表述讓大家理解和先把最重要的幾點列出來大家可以帶著這幾個核心要點閱讀下面的文章是用來在原型鏈上查找你需要的方法的實際對象所有的對象都有這個屬性這個屬性被引擎用作繼承使用根據的規范這個屬性應該是一個內在的屬性但

這篇文章的的目的試圖通過最簡單的表述,讓大家理解prototype和__proto__

先把最重要的幾點列出來,大家可以帶著這幾個核心要點閱讀下面的文章.

__proto__是用來在原型鏈上查找你需要的方法的實際對象,所有的對象都有這個屬性.這個屬性被JavaScript引擎用作繼承使用.
根據ECMA的規范,這個屬性應該是一個內在的屬性,但是大多數的瀏覽器廠商都允許我們去訪問和修改它.

prototype是函數獨有的屬性.當我們使用關鍵詞new并且將函數作為構造函數來構造對象的時候,
它被用來構建對象的__proto__屬性.

__proto__屬性和prototype屬性都是一個對象代碼演示.

(new A()).__proto__ === A.prototype的結果為true,(new A()).prototype === undefined的結果也為true,其中A表示一個函數(也就是構造函數).

接下來我們來使用一些代碼來解釋上面所說的那些要點:代碼演示

    // 這是一個普通函數,我們把它用來當做構造函數,也當做一個[父類]
    function Car(name) {
        this.name = name;
    }
    Car.prototype.introduce = function() {
      console.log("[From Car.prototype.introduce] " + "Hello, my name is: " + this.name);
    };
    
    var car = new Car("porsche");
    console.log(car.name); // porsche
    car.introduce(); // [From Car.prototype.introduce] Hello, my name is: porsche
    
    
    // 我們開始構建另外一個函數,我們把這個函數當做一個[子類],暫時這么說.
    function MiniCar(name, color) {
        this.name = name;
        this.color = color;
    
        this.getColor = function() {
            console.log("My color is: " + this.color);
        }
    }
    MiniCar.prototype = new Car();
    
    var miniCar = new MiniCar("benz", "black");
    console.log("
");
    console.log("name: " + miniCar.name + ";color: " + miniCar.color); // name: benz;color: black
    miniCar.introduce(); // [From Car.prototype.introduce] Hello, my name is: benz
    miniCar.getColor(); // My color is: black
    
    // 如果使用A表示一個構造函數,那么 (new A()).__proto__ === A.prototype
    console.log((new MiniCar()).__proto__ === MiniCar.prototype); // true
    
    // 如果使用a表示A的一個示例的話,那么 a.__proto__ === A.prototype
    console.log(miniCar.__proto__ === MiniCar.prototype); // true
    
    // 一個對象是沒有prototype屬性的
    console.log(miniCar.prototype === undefined); // true

如果你練習了上面的代碼,對這兩個屬性的理解應該會有一定的幫助,也許你已經理解了;如果沒有太懂的話,那也沒關系;我們下面來好好的說一說上面的代碼(開始長篇大論了).
首先,在JavaScript中是沒有類這個概念的,如果你學過Java或者C++的話,應該知道,要是想創建一個對象,必須先有一個類;但是JavaScript中沒有類,那怎么辦?模仿嘍,所以JavaScript創造了__proto__這個屬性用來連接子類和父類.創造了prototype屬性去用來在構建子類時候構建__proto__這個屬性.

這里先暫停上面的線程,我們來說說prototype這個屬性,這個屬性是只屬于Function函數的,那么這個屬性的作用是什么呢?這個屬性的作用是為了讓使用Function作為構造函數new出來的對象實例都能夠共享一些函數.

   function Car(name) {
           this.name = name;
       }
   Car.prototype.introduce = function() {
     console.log("[From Car.prototype.introduce] " + "Hello, my name is: " + this.name);
   };

上面的代碼中,只要是使用Car這個構造函數new出來的對象都具有方法introduce.

繼續上面的線程,我們按照代碼的執行順序來說明這件事情:

首先我們定義了兩個函數Car和MiniCar,如下圖所示:

然后我們給Car的原型上添加了一個方法introduce,如下圖所示:

接下來var car = new Car("porsche")這一行代碼可不像它看起來那樣,它內部的實現還是有許多值得玩味的;首先,函數Car創建了一個新的對象(a),這個對象有一個隱藏的屬性__proto__,這個屬性和Car的原型都指向同一個對象.然后Car函數內部的this指向哪個新創建的對象(a).如下圖所示:

然后我們給這個對象添加了一個屬性name,并且為其賦值.還要注意的一點是,我們這個Car函數是有返回值的,雖然沒有使用return關鍵字把這個值顯式的返回,這個返回值是一個引用,然后變量car就可以用來操作那個對象了(a).

然后上面的語句運行完之后,場面上是下圖這個樣子:

接下來我們輸出了這個對象的名字,然后調用了這個對象(的構造函數的原型上的)的introduce方法.輸出的結果如下圖:

然后我們有定義了一個函數MiniCar,我們把它當做Car(父類)的一個子類;我使用代碼MiniCar.prototype = new Car()來實現這個功能,這段代碼更值得好好分析一下.
首先如上圖所示,MiniCar這個函數的prototype是函數Car使用new關鍵字創建的一個對象(b),所以MiniCar的實例具有這個對象(b)能夠使用的任何屬性和方法.

讓我們更進一步吧,這一步我們開始運行var miniCar = new MiniCar("benz", "black")這段代碼,首先我們先要運行函數MiniCar函數,所以通過new操作,我們新創建了一個對象(c),我們首先給這個對象添加了了兩個屬性,分別是name和color,然后分別賦值benz和black,其實我們可以只添加一個屬性,因為name屬性在Car上是已經存在的.我們還給它添加了一個getColor方法,它的__proto__屬性指向MiniCar.prototype, 而MiniCar.prototype是一個對象,這個對象也有一個__proto__屬性,這個屬性指向Car.prototype,如此一來這個偽繼承就實現了.然后我們將這個對象(c)的索引賦值給miniCar,所以通過miniCar可以操作對象(c).

然后接下來的一切應該都順理成章了.

原文的地址github

參考的文章或者問答:

How does proto differ from constructor.prototype?

proto VS. prototype in JavaScript

Inheritance and the prototype chain

JavaScript difference between proto and prototype

Understanding "Prototypes" in JavaScript

JavaScript Prototype in Plain Language

Object.prototype.__proto__

Function.prototype

js中__proto__和prototype的區別和關系？

prototype與__proto__的聯系與區別

簡單粗暴地理解js原型鏈--js面向對象編程