本文主要講三個 問題
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)
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 到底發生了什麼還是上面的 問題, 當我們執行 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上。 同時, 需要注意的一點就是,
` 所以到最後,我們 總結一下 。
在 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 的 一個 知識 擴展。
果然 和 我們想像 的一模一樣。 至於 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 的 一個 知識 擴展。