在 JavaScript 中 prototype 和 __proto__ 有什麼區別

標籤：images   文章   rom   cal   string   script   意思   perl   產生   

本文主要講三個 問題

1. prototype 和 proto
2. function 和 object
3. new 到底發生了什麼

prototype 和  proto

首先我們說下在 JS 中，常常讓我們感到困惑的地方，就是 prototype 和 __proto__ 到底是幹嘛的1. __proto__ 就是 Javascript中  所謂的原型 （這裡，我們還是拿具體的例子來說明吧）

    function A (name) {         // 這裡是一個建構函式        thia.name = name    }        var Aobj = {                // 這裡是一個 對對象字面量        name: ‘‘    }        // 我們分別列印出來這二個對象看看    console.dir(A)        console.dir(Aobj)

這裡我們可以很明顯的看到 建構函式的  __proto__ 屬性 指向了 function()對象字面量的  __proto__ 屬性 指向了 Object為什麼 指向的 是不一樣的呢？思考下:確實是 不一樣的， 因為 建構函式本身也是一個 函數， 所以它 的原型 指向  function() 而對象字面量 是一個 對象， 那麼他的 原型肯定是指向  Object擴充思考，如果 是一個數組 對象， 那麼它的   __proto__  會指向什麼呐？

    const arr = [112,22,3333]     console.dir(arr)

沒錯， 這裡的  __proto__ 就指向了 Array[0]總結 ：一個對象的 __proto__ 屬性和自己的內部屬性[[Prototype]]指向一個相同的值 (通常稱這個值為原型)tips：firefox、chrome等瀏覽器把對象內部屬性 [[Prototype]] 用 __proto__ 的形式暴露了出來.(老版本的IE並不支援 __proto__ ,IE11中已經加上了 __proto__ 屬性)2.  prototype : 看看上面的 ，你會發現 只有 建構函式 中 有這個玩意兒，  對的。 prototype 確實 是 在 function 中特有的。 別的物件類型中 都不會有的屬性。

我們在看這個 function 對象屬性的 時候就會發現這麼一個 prototype 的屬性，它的值是 一個 Object 。 點開這個 obj 我們就會發現啊， 這個 obj 的constructor 屬性 指向了 這個建構函式本身。 是不是很神奇，至於為什麼會是這樣子的。留一個 思考題吧， 為什麼在 javascript 中，函數對象的 prototype 屬性的 constructor 指向是 函數本身？（在下面的介紹中，我們會 回答到這個問題）

function 和 object

同樣，我們來先看一個例子。

    function B(name) {        this.name = name        this.getName = function() {            console.log(this.name)        }        var c = ‘test‘        console.log(c)    }    var b = new B(‘testb‘)      // test    console.log(b)              // B: { name: ‘testb‘,getName: function() {} }    B(‘testc‘)                  // test

看到上面的 輸出 是不是覺得又很詫異了。確實， 為什麼 在 new 的時候， 建構函式居然 執行了一次。同樣， 在非strict 模式下， 我們直接執行 建構函式， B(‘testc‘) 相當於：

    // window.name = ‘testc‘    // window.getName = function() { console.log(this.name) }

思考： 我們的函數B既可以直接執行,又可以new一下返回一個對象。function和object到底是什麼關係,new的時候發生了什麼?

new 到底發生了什麼

還是上面的 問題， 當我們執行 var b = new B(‘testb‘) 的時候發生了什嗎？MDN 上的介紹是這樣的說的：對於 var b = new B(‘testb‘)

//  javascript 實際上執行的是：var o = new Object()   // 產生一個 新的 對象  b 這裡 可以約等於  var b = {}o.__proto__ = B.prototype // 這裡就是 函數對象中 專屬的 prototype 屬性。                          // 這個專屬的 prototype 屬性 包含了一個 constructor 屬性方法，指向的就是 建構函式， 也就是 這裡的  function B(name) {}B.call(o)                 // tips :這裡 就需要注意了，因為很多同學都搞不清楚 這裡是什麼意思。                                                    // 由於 call 的使用 將這裡this是指向o, 所以就 可以 把什麼this.name/getName 強行的綁定到o上。同時，需要注意的一點就是， 這裡的 建構函式 執行科一遍， 只不過是 將 this 指向的 屬性和方法，都 強行的 給 新建立的  這個 o 對象 綁定了一遍。var b = o                 // 把 這個 o 返回給了  b 。 從而完成了  var b = new B(‘testb‘) 的過程// 如果 還是不明白是 什麼意思的話。 我們來看看  call 是幹嘛用的 

    // 關於 call 的使用說明     var o1 = {        name: ‘111‘,        getName: function() {            console.log(this.name)        }    }    var o2 = {        name: ‘222‘    }    o1.getName.call(o2)  // 222

所以 這個時候，我們反過頭來 看看  這個 new 的對象都有哪些 屬性 和方法。我們 可以 來 做一個 小實驗，來 證明下，我們以上所說的東西。

function A (name) {         // 這裡是一個建構函式    this.name = name}var o = {}o.__proto__ = A.prototypeA.call(o)var a = ovar b = new A()console.log(a)console.log(b)

果然 和 我們想象 的一模一樣。 至於 js 為什麼要 把 建立 對象的 原型 指向 建構函式的 prototype 屬性。我們可以這樣來理解。 因為 通過 new 方法來建立的  obj 。肯定是需要 一個 標記 來找到自己的 構造器函數。所以 為了讓 整個 程式結構看上去 合理。 我們需要   把 建立 對象的 原型 指向 建構函式的 prototype 屬性。

`
所以到最後，我們 總結一下 。

在 javascript 中 prototype 和 proto 到底有什麼區別。

prototype 是 面向 建構函式，來思考，
proto 是 面向 執行個體化 後 的對象 來思考就對了。

`

最後再 給一個例子， 是一個，我們經常會在開發中用到的 例子。

var Person = function(){}Person.prototype.sayName = function() {    alert(‘my name is xxx‘)}Person.prototype.age = 12var p = new Person()p.sayName()// 當我們 執行個體化 之後， 在我們 去執行 p.sayName() 的 時候，我們就會去 this 內部去 尋找（這裡就是 建構函式 Person 內部去找。 可是 沒找到啊。只是一個 空函數， 怎麼辦呢？）// 這個時候 就會沿著 原型鏈向上追溯， 但是如何 追溯呢？// 這裡就要用到 __proto__ 屬性 來作為 追溯的 橋樑。// 因為 執行個體化對象的 __proto__ 屬性 指向的就是 建構函式的  prototype 屬性所對應的 對象啊

最後 終於 愉快的 找到了，自己的對象啦~ 單身狗就可能一直找不到，或者看不懂這篇文章。

好了，以上就是 在 看 vuejs 源碼 的時候 關於 new 的 一個 知識 擴充。

在 JavaScript 中 prototype 和 __proto__ 有什麼區別