一. 普通對象與函數對象 JavaScript 中,萬物皆對象!但對象也是有差別的。分為普通對象和函數對象,Object ,Function 是JS自帶的函數對象。下面舉例說明 function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); var o3 = new f1(); var o1 = {}; var o2 =new Object(); console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function |
在上面的例子中 o1 o2 o3 為普通對象,f1 f2 f3 為函數對象。怎麼區分,其實很簡單,凡是通過 new Function() 建立的對象都是函數對象,其他的都是普通對象。f1,f2,歸根結底都是通過 new Function()的方式進行建立的。Function Object 也都是通過 New Function()建立的。 二. 原型對象 在JavaScript 中,每當定義一個對象(函數)時候,對象中都會包含一些預定義的屬性。其中函數對象的一個屬性就是原型對象 prototype。注:普通對象沒有prototype,但有__proto__屬性。 原型對象其實就是普通對象(Function.prototype除外,它是函數對象,但它很特殊,他沒有prototype屬性(前面說道函數對象都有prototype屬性))。看下面的例子: function f1(){}; console.log(f1.prototype) //f1{} console.log(typeof f1. prototype) //Object console.log(typeof Function.prototype) // Function,這個特殊 console.log(typeof Object.prototype) // Object console.log(typeof Function.prototype.prototype) //undefined 從這句console.log(f1.prototype) //f1 {} 的輸出就結果可以看出,f1.prototype就是f1的一個執行個體對象。就是在f1建立的時候,建立了一個它的執行個體對象并指派給它的prototype,基本過程如下: var temp = new f1(); f1. prototype = temp; 是以,Function.prototype為什麼是函數對象就迎刃而解了,上文提到凡是new Function ()産生的對象都是函數對象,是以temp1是函數對象。 var temp1 = new Function (); Function.prototype = temp1; 那原型對象是用來做什麼的呢?主要作用是用于繼承。舉了例子: var person = function(name){ this.name = name }; person.prototype.getName = function(){ return this.name; } var zjh = new person(‘zhangjiahao’); zjh.getName(); //zhangjiahao 從這個例子可以看出,通過給person.prototype設定了一個函數對象的屬性,那有person執行個體(例中:zjh)出來的普通對象就繼承了這個屬性。具體是怎麼實作的繼承,就要講到下面的原型鍊了。 三.原型鍊 JS在建立對象(不論是普通對象還是函數對象)的時候,都有一個叫做__proto__的内置屬性,用于指向建立它的函數對象的原型對象prototype。以上面的例子為例: console.log(zjh.__proto__ === person.prototype) //true 同樣,person.prototype對象也有__proto__屬性,它指向建立它的函數對象(Object)的prototype console.log(person.prototype.__proto__ === Object.prototype) //true 繼續,Object.prototype對象也有__proto__屬性,但它比較特殊,為null console.log(Object.prototype.__proto__) //null 我們把這個有__proto__串起來的直到Object.prototype.__proto__為null的鍊叫做原型鍊。如下圖: 四.記憶體結構圖 為了更加深入和直覺的進行了解,下面我們畫一下上面的記憶體結構圖: 畫圖約定: 疑點解釋: 1.Object.__proto__ === Function.prototype // true Object是函數對象,是通過new Function()建立,是以Object.__proto__指向Function.prototype。 2.Function.__proto__ === Function.prototype // true Function 也是對象函數,也是通過new Function()建立,是以Function.__proto__指向Function.prototype。 自己是由自己建立的,好像不符合邏輯,但仔細想想,現實世界也有些類似,你是怎麼來的,你媽生的,你媽怎麼來的,你外婆生的,……類人猿進化來的,那類人猿從哪來,一直追溯下去……,就是無,(NULL生萬物) 正如《道德經》裡所說“無,名天地之始”。 3.Function.prototype.__proto__ === Object.prototype //true 其實這一點我也有點困惑,不過也可以試着解釋一下。 Function.prototype是個函數對象,理論上他的__proto__應該指向 Function.prototype,就是他自己,自己指向自己,沒有意義。 JS一直強調萬物皆對象,函數對象也是對象,給他認個祖宗,指向Object.prototype。Object.prototype.__proto__ === null,保證原型鍊能夠正常結束。 五.constructor 原型對象prototype中都有個預定義的constructor屬性,用來引用它的函數對象。這是一種循環引用 person.prototype.constructor === person //true Function.prototype.constructor === Function //true Object.prototype.constructor === Object //true 完善下上面的記憶體結構圖: 有兩點需要注意: (1)注意Object.constructor===Function;//true 本身Object就是Function函數構造出來的 (2)如何查找一個對象的constructor,就是在該對象的原型鍊上尋找碰到的第一個constructor屬性所指向的對象 六.總結 1.原型和原型鍊是JS實作繼承的一種模型。 2.原型鍊的形成是真正是靠__proto__ 而非prototype 要深入了解這句話,我們再舉個例子,看看前面你真的了解了嗎? var animal = function(){}; var dog = function(){}; animal.price = 2000;// dog.prototype = animal; var tidy = new dog(); console.log(dog.price) //undefined console.log(tidy.price) // 2000 為什麼呢?畫一下記憶體圖: 這說明什麼問題呢,執行dog.price的時候,發現沒有price這個屬性,雖然prototype指向的animal有這個屬性,但它并沒有去沿着這個“鍊”去尋找。同樣,執行tidy.price的時候,也沒有這個屬性,但是__proto__指向了animal,它會沿着這個鍊去尋找,animal中有price屬性,是以tidy.price輸出2000。由此得出,原型鍊的真正形成是靠的__proro__,而不是prototype。 是以,如果在這樣指定dog.__proto__ = animal。那dog.price = 2000。 最後打個比喻,雖然不是很确切,但可能對原型的了解有些幫助。 |