原型對(duì)象
javascript語言是一種面向?qū)ο蟮恼Z言钉鸯,它沒有"子類"和"父類"的概念,里面所有的數(shù)據(jù)類型都是對(duì)象邮辽,如何將這些對(duì)象聯(lián)系起來呢唠雕?
Brendan Eich在考慮設(shè)計(jì)繼承機(jī)制的時(shí)候,參考了C++和JAVA使用new命令吨述,通過調(diào)用類的構(gòu)造函數(shù)生成實(shí)例的方式岩睁,將new命令引入javascript。
C++的寫法是:
ClassName *object = new ClassName(param);
Java的寫法是:
Person person = new Person();
但是揣云,javascript里面沒有“類”這個(gè)概念捕儒,那么,Brendan Eich決定直接在new后面跟一個(gè)構(gòu)造函數(shù)灵再,來生成實(shí)例肋层。
構(gòu)造函數(shù)是什么?構(gòu)造函數(shù)與其他函數(shù)唯一的區(qū)別在于調(diào)用方式不同翎迁。任何函數(shù)只要通過new來調(diào)用就可以作為構(gòu)造函數(shù)栋猖,它是用來創(chuàng)建特定類型的對(duì)象。
下面定義一個(gè)構(gòu)造函數(shù)Female:
1 function Female(name){
2 this.name = name;
3 this.sex = 'female';
4 }
通過new命令來生成一個(gè)person實(shí)例:
var person1 = new Female("Summer")
這里汪榔,構(gòu)造函數(shù)Female就是實(shí)例對(duì)象person1的原型F牙!痴腌!Female里的this關(guān)鍵字就指的是person1這個(gè)對(duì)象雌团!
new出來的person1對(duì)象此時(shí)已經(jīng)和Female再無聯(lián)系了!也就是說每一個(gè)new出來的實(shí)例都有自己的屬性和方法的副本士聪,是獨(dú)立的的锦援!修改其中一個(gè)不會(huì)影響另一個(gè)!
var person1 = new Female("Summer");
var person2 = new Female("Lily");
person2.sex = 'male';
console.log(person1.sex) // female
console.log(person2.sex) // male
但是剥悟,我們希望構(gòu)造函數(shù)中的sex屬性是一個(gè)共有屬性灵寺,那么此時(shí)用這樣的方法曼库,每個(gè)實(shí)例中都有一個(gè)相同的sex屬性,會(huì)造成資源極大的浪費(fèi)略板!
那么原型對(duì)象就即將登場(chǎng)了毁枯!Brendan Eich決定給每一個(gè)構(gòu)造函數(shù)都設(shè)置一個(gè)prototype屬性,這個(gè)屬性就指向原型對(duì)象叮称。其實(shí)原型對(duì)象就只是個(gè)普通對(duì)象种玛,里面存放著所有實(shí)例對(duì)象需要共享的屬性和方法!所以瓤檐,我們把需要共享的放到原型對(duì)象里赂韵,把那些不需要共享的屬性和方法存在在構(gòu)造函數(shù)里!
那么上面的代碼可改寫如下:
function Person(name,age){
this.name = name;
}
Person.prototype.sex = 'female';
var person1 = new Person("Summer");
var person2 = new Person("Lily");
console.log(person1.sex) // female
console.log(person2.sex) // female
Person.prototype.sex = 'male';
console.log(person1.sex) // male
console.log(person2.sex) // male
可以看出距帅,修改prototype屬性會(huì)影響它的所有實(shí)例的sex的值S蚁恰!
實(shí)例一旦創(chuàng)建出來就會(huì)自動(dòng)引用prototype對(duì)象的屬性和方法碌秸!所以實(shí)例對(duì)象的屬性和方法一般分為兩種:一種是自身的,一種是引用自prototype的悄窃。
具體實(shí)現(xiàn)是這樣的:
每當(dāng)代碼讀取某個(gè)對(duì)象的某個(gè)屬性的時(shí)候讥电,都會(huì)執(zhí)行一次搜索刃泡。首先從對(duì)象實(shí)例本身開始馋贤,如果在實(shí)例中找到了該屬性,則返回該屬性的值乔外,如果沒有找到横媚,則順著**原型鏈指針**向上纠炮,到原型對(duì)象中去找,如果如果找到就返回該屬性值灯蝴。
這里要提一點(diǎn)恢口,如果為對(duì)象實(shí)例添加了一個(gè)屬性與原型中同名,則該屬性會(huì)屏蔽掉原型中的同名屬性穷躁,不會(huì)去修改它耕肩!使用delete可以刪除實(shí)例中的屬性(提到delete那要插一句delete只能刪除對(duì)象下的屬性,不能刪除變量和參數(shù)问潭!)
原型鏈
事實(shí)上猿诸,js里完全依靠"原型鏈"(prototype chain)模式來實(shí)現(xiàn)繼承。
上面說完原型對(duì)象狡忙。下面要扒一扒proto梳虽、prototype、constructor
proto:事實(shí)上就是原型鏈指針T肿隆窜觉!
prototype:上面說到這個(gè)是指向原型對(duì)象的
constructor:每一個(gè)原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針谷炸,就是constructor
繼承實(shí)現(xiàn)方式:
為了實(shí)現(xiàn)繼承,proto會(huì)指向上一層的原型對(duì)象竖螃,而上一層的結(jié)構(gòu)依然類似淑廊,那么就利用proto一直指向Object的原型對(duì)象上!Object.prototype.proto = null;表示到達(dá)最頂端特咆。如此形成了原型鏈繼承季惩。
下面有個(gè)圖解非常經(jīng)典,我自己也手畫了一遍去理解腻格,真的非常有效~
大致總結(jié)一下就是:
Object是作為眾多new出來的實(shí)例的基類 function Object(){ [ native code ] }
Function是作為眾多function出來的函數(shù)的基類 function Function(){ [ native code ] }
構(gòu)造函數(shù)的proto(包括Function.prototype和Object.prototype)都指向Function.prototype
原型對(duì)象的proto都指向Object.prototype
Object.prototype.proto指向null