JS原型對象也祠、原型鏈和繼承

1昙楚、理解Object和Function

Object和Function都是引用類型,是一種數(shù)據(jù)結(jié)構(gòu)诈嘿,封裝數(shù)據(jù)和功能堪旧,常常被稱為類。

Object類型

既然是類奖亚,就可以用來創(chuàng)建對象淳梦,如 var person = new Object();

此外,JS中還提供另一個創(chuàng)建對象的方式:對象字面量昔字,如 var persion = {};

上面兩種方式的等價的爆袍。

Function類型

Function是類首繁,它的對象是什么呢?其實就是我們常用的函數(shù)陨囊。沒錯弦疮,JS中的函數(shù)是對象,是Function類型的實例蜘醋。如:

function sum(num1,num2){
    return num1+num2
};

此外胁塞,JS還提供使用函數(shù)表達式定義函數(shù)的方式,如:

var sum = function(num1,num2){
    return num1+num2;
};
  1. 函數(shù)的內(nèi)部屬性:

在函數(shù)內(nèi)部压语,有兩個特殊的對象:arguments和this啸罢,arguments是一個類數(shù)組對象,包含傳入函數(shù)中的所有參數(shù)胎食。這個對象還有有一個名叫callee的屬性扰才。該屬性是一個指針,指向擁有這個arguments對象的函數(shù)厕怜。

ECMAScript5規(guī)范化了另一個函數(shù)對象的屬性:caller衩匣,它保存著調(diào)用當前函數(shù)的函數(shù)的引用。

  1. 函數(shù)屬性和方法:

每個函數(shù)都包含兩個屬性:length和prototype酣倾;length表示接受參數(shù)的個數(shù)舵揭;prototype保存函數(shù)類型的所有實例方法,相當與類方法躁锡,在自定義類型和實現(xiàn)繼承時要特別注意午绳。

每個函數(shù)還包含兩個非繼承而來的方法:apply()和call(),它們的區(qū)別在于接受參數(shù)的方式不同映之。這兩個方法能擴充函數(shù)的作用域拦焚,使對象和方法解耦合。

2杠输、理解原型對象

只要創(chuàng)建一個新函數(shù)赎败,就會為該函數(shù)創(chuàng)建一個prototype屬性,該屬性指向函數(shù)的原型對象蠢甲。下面通過實例代碼和圖說明僵刮。

首先通過構(gòu)造函數(shù)和原型創(chuàng)建實例,代碼如下:

function Person(){}

Person.prototype.name = 'xiaoming';

Person.prototype.sayName = function(name){alert(this.name)}

var p1 = new Person();

p1.sayName();// xiaoming

var p2 = new Person();

p2.sayName();// xiaoming

構(gòu)造函數(shù)鹦牛、原型對象即通過構(gòu)造函數(shù)創(chuàng)建的實例對象之間的關(guān)系如下圖所示:

image

3搞糕、理解原型鏈和繼承

JS將原型鏈作為實現(xiàn)繼承的主要方法,基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法曼追。

原型鏈實現(xiàn)有一種基本模式窍仰,代碼如下:

function Parent(){

this.property = true;

}

Parent.prototype.getParentValue = function(){

return this.property;

}

function Child(){

this.subproperty = false;

}

//子類繼承父類

Child.prototype = new Parent();

Child.prototype.getSubValue = function(){

return this.subproperty;

}

var instance = new Child()

console.log(instance.getSubValue);

構(gòu)造函數(shù)、原型對象即通過構(gòu)造函數(shù)創(chuàng)建的實例對象之間的關(guān)系如下圖所示:

image

這種模式實現(xiàn)繼承有有個最大問題在于包含引用類型的原型礼殊,這可以通過組合繼承解決驹吮,也就是組合原型鏈和構(gòu)造函數(shù)针史,這種方式是JS中最常用的繼承模式。背后的思路是使用原型鏈實現(xiàn)對原型屬性和方法的繼承碟狞,而通過借用構(gòu)造函數(shù)的方式實現(xiàn)對實例屬性的繼承啄枕。

實例如下:

function Parent(){

this.name = name;

this.colors = ['red','blue','green']

}

Parent.prototype.sayName= function(){

return this.name;

}

function Child(){

//繼承屬性

Parent.call(this,name);

this.age = age;

}

//繼承方法

Child.prototype = new Parent();

Child.prototype.constructor = Child;

Child.prototype.sayAge= function(){

return this.age;

}

var instance = new Child('xiaoming','28')

instance.colors.push("black");

consloe.log(instance.colors);// ['red','blue','green','black']

instance.sayName();//xiaoming

instance.sayAge();//28

var instance2 = new Child('xiaoli',30)

consloe.log(instance2.colors);//['red','blue','green']

instance2.sayName();//xiaoli

instance2.sayAge();//30

組合繼承還是有個小問題,那就是多次調(diào)用超類型構(gòu)造函數(shù)而導致的低效率問題篷就。從而引出實現(xiàn)繼承最有效的方式--寄生組合式繼承

實例如下:

//借助原型基于已有對象創(chuàng)建對象

function object(o){

function F(){}

F.prototype = o;

return new F();

}

function inheritProtype(Parent,Child){

var prototype = object(Parent.prototype);//創(chuàng)建對象

prototype.constructor = Child;//增強對象

Child.prototype = prototype;//指定對象

}

function Parent(){

this.name = name;

this.colors = ['red','blue','green']

}

Parent.prototype.sayName= function(){

return this.name;

}

function Child(){

//繼承屬性

Parent.call(this,name);

this.age = age;

}

inheritProtype(Parent,Child);

Child.prototype.sayAge = function(){

return this.age

}

參考:JavaScript高級程序設計(第三版)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末射亏,一起剝皮案震驚了整個濱河市近忙,隨后出現(xiàn)的幾起案子竭业,更是在濱河造成了極大的恐慌,老刑警劉巖及舍,帶你破解...
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件未辆,死亡現(xiàn)場離奇詭異,居然都是意外死亡锯玛,警方通過查閱死者的電腦和手機咐柜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來攘残,“玉大人拙友,你說我怎么就攤上這事〖吖” “怎么了遗契?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長病曾。 經(jīng)常有香客問我牍蜂,道長,這世上最難降的妖魔是什么泰涂? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任鲫竞,我火速辦了婚禮,結(jié)果婚禮上逼蒙,老公的妹妹穿的比我還像新娘从绘。我一直安慰自己,他們只是感情好是牢,可當我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布僵井。 她就那樣靜靜地躺著,像睡著了一般妖泄。 火紅的嫁衣襯著肌膚如雪驹沿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天蹈胡,我揣著相機與錄音渊季,去河邊找鬼朋蔫。 笑死,一個胖子當著我的面吹牛却汉,可吹牛的內(nèi)容都是我干的驯妄。 我是一名探鬼主播,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼合砂,長吁一口氣:“原來是場噩夢啊……” “哼青扔!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起翩伪,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤微猖,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后缘屹,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體凛剥,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年轻姿,在試婚紗的時候發(fā)現(xiàn)自己被綠了犁珠。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡互亮,死狀恐怖犁享,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情豹休,我是刑警寧澤炊昆,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站慕爬,受9級特大地震影響窑眯,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜医窿,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一磅甩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧姥卢,春花似錦卷要、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至棺榔,卻和暖如春瓶堕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背症歇。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工郎笆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谭梗,地道東北人。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓宛蚓,卻偏偏與公主長得像激捏,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子凄吏,可洞房花燭夜當晚...
    茶點故事閱讀 45,507評論 2 359