最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識(shí)百科 - 正文

[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解

來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 22:31:36
文檔

[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解

[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解:于javascript原型鏈的層層遞進(jìn)查找規(guī)則,以及原型對象(prototype)的共享特性,實(shí)現(xiàn)繼承是非常簡單的事情 一、把父類的實(shí)例對象賦給子類的原型對象(prototype),可以實(shí)現(xiàn)繼承 function Person(){ this.userName = 'ghostwu'; }
推薦度:
導(dǎo)讀[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解:于javascript原型鏈的層層遞進(jìn)查找規(guī)則,以及原型對象(prototype)的共享特性,實(shí)現(xiàn)繼承是非常簡單的事情 一、把父類的實(shí)例對象賦給子類的原型對象(prototype),可以實(shí)現(xiàn)繼承 function Person(){ this.userName = 'ghostwu'; }

于javascript原型鏈的層層遞進(jìn)查找規(guī)則,以及原型對象(prototype)的共享特性,實(shí)現(xiàn)繼承是非常簡單的事情

一、把父類的實(shí)例對象賦給子類的原型對象(prototype),可以實(shí)現(xiàn)繼承

function Person(){
 this.userName = 'ghostwu';
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher (){}
 Teacher.prototype = new Person();

 var oT = new Teacher(); 
 console.log( oT.userName ); //ghostwu
 console.log( oT.showUserName() ); //ghostwu

通過把父類(Person)的一個(gè)實(shí)例賦給子類Teacher的原型對象,就可以實(shí)現(xiàn)繼承,子類的實(shí)例就可以訪問到父類的屬性和方法

如果你不會(huì)畫這個(gè)圖,你需要去看下我的這篇文章:

[js高手之路]一步步圖解javascript的原型(prototype)對象,原型鏈

第11行,執(zhí)行oT.userName, 首先去oT對象上查找,很明顯oT對象上沒有任何屬性,所以就順著oT的隱式原型__proto__的指向查找到Teacher.prototype,

發(fā)現(xiàn)還是沒有userName這個(gè)屬性,繼續(xù)沿著Teacher.prototype.__proto__向上查找,找到了new Person() 這個(gè)實(shí)例上面有個(gè)userName,值為ghostwu

所以停止查找,輸出ghostwu.

第12行,執(zhí)行oT.showUserName前面的過程同上,但是在new Person()這個(gè)實(shí)例上還是沒有查找到showUserName這個(gè)方法,繼續(xù)沿著new Person()的

隱式原型__proto__的指向( Person.prototype )查找,在Person.prototype上找到了showUserName這個(gè)方法,停止查找,輸出ghostwu.

二、把父類的原型對象(prototype)賦給子類的原型對象(prototype),可以繼承到父類的方法,但是繼承不到父類的屬性

function Person(){
 this.userName = 'ghostwu';
 }
 Person.prototype.showUserName = function(){
 return 'Person::showUserName方法';
 }
 function Teacher (){}
 Teacher.prototype = Person.prototype;

 var oT = new Teacher(); 
 console.log( oT.showUserName() ); //ghostwu
 console.log( oT.userName ); //undefined, 沒有繼承到父類的userName

因?yàn)門eacher.prototype的隱式原型(__proto__)只指向Person.prototype,所以獲取不到Person實(shí)例的屬性

三、發(fā)生繼承關(guān)系后,實(shí)例與構(gòu)造函數(shù)(類)的關(guān)系判斷

還是通過instanceof和isPrototypeOf判斷

function Person(){
 this.userName = 'ghostwu';
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher (){}
 Teacher.prototype = new Person();
 
 var oT = new Teacher();
 console.log( oT instanceof Teacher ); //true
 console.log( oT instanceof Person ); //true
 console.log( oT instanceof Object ); //true
 console.log( Teacher.prototype.isPrototypeOf( oT ) ); //true
 console.log( Person.prototype.isPrototypeOf( oT ) ); //true
 console.log( Object.prototype.isPrototypeOf( oT ) ); //true

四,父類存在的方法和屬性,子類可以覆蓋(重寫),子類沒有的方法和屬性,可以擴(kuò)展

function Person() {}
 Person.prototype.showUserName = function () {
 console.log('Person::showUserName');
 }
 function Teacher() { }
 Teacher.prototype = new Person();
 Teacher.prototype.showUserName = function(){
 console.log('Teacher::showUserName');
 }
 Teacher.prototype.showAge = function(){
 console.log( 22 );
 }
 var oT = new Teacher();
 oT.showUserName(); //Teacher::showUserName
 oT.showAge(); //22

五、重寫原型對象之后,其實(shí)就是把原型對象的__proto__的指向發(fā)生了改變

原型對象prototype的__proto__的指向發(fā)生了改變,會(huì)把原本的繼承關(guān)系覆蓋(切斷)

function Person() {}
 Person.prototype.showUserName = function () {
 console.log('Person::showUserName');
 }
 function Teacher() {}
 Teacher.prototype = new Person();
 Teacher.prototype = {
 showAge : function(){
 console.log( 22 );
 }
 }
 var oT = new Teacher();
 oT.showAge(); //22
 oT.showUserName();

上例,第7行,Teacher.prototype重寫了Teacher的原型對象(prototype),原來第6行的原型對象的隱式原型(__proto__)指向就沒有作用了

所以在第14行,oT.showUserName() 就會(huì)發(fā)生調(diào)用錯(cuò)誤,因?yàn)門eacher的原型對象(prototype)的隱式原型(__proto__)不再指向父類(Person)的實(shí)例,繼承關(guān)系被破壞了.

六、在繼承過程中,小心處理實(shí)例的屬性上引用類型的數(shù)據(jù)

function Person(){
 this.skills = [ 'php', 'javascript' ];
 }
 function Teacher (){}
 Teacher.prototype = new Person();

 var oT1 = new Teacher();
 var oT2 = new Teacher();
 oT1.skills.push( 'linux' );
 console.log( oT2.skills ); //php, java, linux

oT1的skills添加了一項(xiàng)linux數(shù)據(jù),其他的實(shí)例都能訪問到,因?yàn)槠渌麑?shí)例中共享了skills數(shù)據(jù),skills是一個(gè)引用類型

七、借用構(gòu)造函數(shù)

為了消除引用類型影響不同的實(shí)例,可以借用構(gòu)造函數(shù),把引用類型的數(shù)據(jù)復(fù)制到每個(gè)對象上,就不會(huì)相互影響了

function Person( uName ){
 this.skills = [ 'php', 'javascript' ];
 this.userName = uName;
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher ( uName ){
 Person.call( this, uName );
 }
 var oT1 = new Teacher();
 oT1.skills.push( 'linux' );
 var oT2 = new Teacher();
 console.log( oT2.skills ); //php,javascript
 console.log( oT2.showUserName() );

雖然oT1.skills添加了一項(xiàng)Linux,但是不會(huì)影響oT2.skills的數(shù)據(jù),通過子類構(gòu)造函數(shù)中call的方式,去借用父類的構(gòu)造函數(shù),把父類的屬性復(fù)制過來,而且還能

傳遞參數(shù),如第8行,但是第15行,方法調(diào)用錯(cuò)誤,因?yàn)樵跇?gòu)造中只復(fù)制了屬性,不會(huì)復(fù)制到父類原型對象上的方法

八、組合繼承(原型對象+借用構(gòu)造函數(shù))

經(jīng)過以上的分析, 單一的原型繼承的缺點(diǎn)有:

1、不能傳遞參數(shù),如,

Teacher.prototype = new Person();
有些人說,小括號(hào)后面可以跟參數(shù)啊,沒錯(cuò),但是只要跟了參數(shù),子類所有的實(shí)例屬性,都是跟這個(gè)一樣,說白了,還是傳遞不了參數(shù)

2、把引用類型放在原型對象上,會(huì)在不同實(shí)例上產(chǎn)生相互影響

單一的借用構(gòu)造函數(shù)的缺點(diǎn):

1、不能復(fù)制到父類的方法

剛好原型對象方式的缺點(diǎn),借用構(gòu)造函數(shù)可以彌補(bǔ),借用構(gòu)造函數(shù)的缺點(diǎn),原型對象方式可以彌補(bǔ),于是,就產(chǎn)生了一種組合繼承方法:

function Person( uName ){
 this.skills = [ 'php', 'javascript' ];
 this.userName = uName;
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher ( uName ){
 Person.call( this, uName );
 }
 Teacher.prototype = new Person();

 var oT1 = new Teacher( 'ghostwu' );
 oT1.skills.push( 'linux' );
 var oT2 = new Teacher( 'ghostwu' );
 console.log( oT2.skills ); //php,javascript
 console.log( oT2.showUserName() ); //ghostwu

子類實(shí)例oT2的skills不會(huì)受到oT1的影響,子類的實(shí)例也能調(diào)用到父類的方法。

以上這篇[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

文檔

[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解

[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解:于javascript原型鏈的層層遞進(jìn)查找規(guī)則,以及原型對象(prototype)的共享特性,實(shí)現(xiàn)繼承是非常簡單的事情 一、把父類的實(shí)例對象賦給子類的原型對象(prototype),可以實(shí)現(xiàn)繼承 function Person(){ this.userName = 'ghostwu'; }
推薦度:
  • 熱門焦點(diǎn)

最新推薦

热门图文

猜你喜歡

專題
Top

抖音扫码关注

手机端二维码

每天分享百科知识!