在 JavaScript 中 prototype 和 proto 有什麼區別

時間＼2017-03-11

本文主要講三個問題

prototype 和 protofunction 和 objectnew 到底發生了什麼

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 的時候，構造函數居然執行了一次。

同樣，在非嚴格模式下，我們直接執行構造函數， 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.prototype A.call(o) var a = o var 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 = 12 var p = new Person p.sayName // 當我們產生實體之後，在我們去執行 p.sayName 的時候，我們就會去 this 內部去查找（這裡就是構造函數 Person 內部去找。可是沒找到啊。只是一個空函數，怎麼辦呢？） // 這個時候就會沿著原型鏈向上追溯，但是如何追溯呢？ // 這裡就要用到 __proto__ 屬性來作為追溯的橋樑。 // 因為產生實體物件的 __proto__ 屬性指向的就是構造函數的 prototype 屬性所對應的物件啊

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

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

我們來看看 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.prototype A.call(o) var a = o var b = new A console.log(a) console.log(b)