JavaScript 深入之從原型到原型鏈(轉載)
構造函數創建對象
我們先使用構造函數創建一個對象:
function Person() { } var person = new Person(); person.name = ‘name‘; console.log(person.name) // name
在這個例子中,Person就是一個構造函數,我們使用new創建了一個實例對象person。
很簡單吧,接下來進入正題:
prototype
每個函數都有一個prototype屬性,就是我們經常在各種例子中看到的那個prototype,比如:
function Person() { } // 雖然寫在註釋裏,但是你要註意: // prototype是函數才會有的屬性Person.prototype.name = ‘name‘; var person1 = new Person(); var person2 = new Person(); console.log(person1.name) // name console.log(person2.name) // name
那這個函數的prototype屬性到底指向的是什麽呢?是這個函數的原型嗎?
其實,函數的prototype屬性指向了一個對象,這個對象正是調用該構造函數而創建的實例的原型,也就是這個例子中的person1和person2的原型。
那麽什麽是原型呢?你可以這樣理解:每一個JavaScript對象(null除外)在創建的時候就會與之關聯另一個對象,這個對象就是我們所說的原型,每一個對象都會從原型”繼承”屬性。
讓我們用一張圖表示構造函數和實例原型之間的關系:
在這張圖中我們用Object.prototype表示實例原型
那麽我們該怎麽表示實例與實例原型,也就是person和Person.prototype之間的關系呢,這時候我們就要講到第二個屬性:
__proto__
這是每一個JavaScript對象(除了null)都具有的一個屬性,叫__proto__,這個屬性會指向該對象的原型。
為了證明這一點,我們可以在火狐或者谷歌中輸入:
function Person() { } var person = new Person(); console.log(person.__proto__ === Person.prototype); //true
於是我們更新下關系圖:
既然實例對象和構造函數都可以指向原型,那麽原型是否有屬性指向構造函數或者實例呢?
constructor
指向實例倒是沒有,因為一個構造函數可以生成多個實例,但是原型指向構造函數倒是有的,這就要講到第三個屬性:construcotr,每個原型都有一個constructor屬性指向關聯的構造函數
為了驗證這一點,我們可以嘗試:
function Person() { } console.log(Person === Person.prototype.constructor); //true
所以再更新下關系圖:
綜上我們已經得出:
function Person() { } var person = new Person(); console.log(person.__proto__ == Person.prototype) // true console.log(Person.prototype.constructor == Person) // true // 順便學習一個ES5的方法,可以獲得對象的原型 console.log(Object.getPrototypeOf(person) === Person.prototype) //true
了解了構造函數、實例原型、和實例之間的關系,接下來我們講講實例和原型的關系:
實例與原型
當讀取實例的屬性時,如果找不到,就會查找與對象關聯的原型中的屬性,如果還查不到,就去找原型的原型,一直找到最頂層為止。
舉個例子:
function Person() { } Person.prototype.name = ‘name‘; var person = new Person(); person.name = ‘name of this person‘; console.log(person.name) // name of this person delete person.name; console.log(person.name) // name
在這個例子中,我們設置了person的name屬性,所以我們可以讀取到為’name of this person’,當我們刪除了person的name屬性時,讀取person.name,從person中找不到就會從person的原型也就是person.__proto__ == Person.prototype中查找,幸運的是我們找到了為’name’,但是萬一還沒有找到呢?原型的原型又是什麽呢?
在前面,我們已經講了原型也是一個對象,既然是對象,我們就可以用最原始的方式創建它,那就是
var obj = new Object(); obj.name = ‘name‘ console.log(obj.name) // name
所以原型對象是通過Object構造函數生成的,結合之前所講,實例的__proto__指向構造函數的prototype,所以我們再更新下關系圖:
原型鏈
那Object.prototype的原型呢?
null,嗯,就是null,所以查到Object.prototype就可以停止查找了
所以最後一張關系圖就是
順便還要說一下,圖中由相互關聯的原型組成的鏈狀結構就是原型鏈,也就是藍色的這條線。
補充
最後,補充和糾正本文中一些不嚴謹的地方:
首先是constructor,
function Person() { } var person = new Person(); console.log(person.constructor === Person); // true
當獲取person.constructor時,其實person中並沒有constructor屬性,當不能讀取到constructor屬性時,會從person的原型也就是Person.prototype中讀取,正好原型中有該屬性,所以
person.constructor === Person.prototype.constructor
其次是__proto__, 絕大部分瀏覽器都支持這個非標準的方法訪問原型,然而它並不存在與Person.prototype中,實際上,它是來自於Object.prototype,與其說是一個屬性,不如說是一個getter/setter,當使用obj.__proto__時,可以理解成返回了Object.getPrototypeOf(obj)
最後是關於繼承,前面我們講到“每一個對象都會從原型”繼承”屬性”,實際上,繼承是一個十分具有迷惑性的說法,引用《你不知道的JavaScript》中的話,就是:繼承意味著復制操作,然而JavaScript默認並不會復制對象的屬性,相反,JavaScript只是在兩個對象之間創建一個關聯,這樣,一個對象就可以通過委托訪問另一個對象的屬性和函數,所以與其叫繼承,委托的說法反而更準確些。
更多
JavaScript深入系列的更多文章可以在 https://github.com/mqyqingfeng/Blog 查看
JavaScript 深入之從原型到原型鏈(轉載)