您好,登錄后才能下訂單哦!
這篇文章給大家介紹使用JavaScript怎么實(shí)現(xiàn)一個(gè)封裝功能,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
1.在 Object類上增加一個(gè)擴(kuò)展方法
//聲明一個(gè)父類 function Person(name){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //聲明一個(gè)子類 function Student(){ this.no=no; this.study=function(){ alert("我在學(xué)習(xí)!"); } } // 通過循壞,將父類對(duì)象的所有屬性和方法,全部賦給子類對(duì)象 Object.prototype.extend=function(parent){ for(var i in parent){ this[i].parent[i]; } } var p=new Person("張三",12); var s=new Student("1234567"); //子類對(duì)象調(diào)用這個(gè)擴(kuò)展方法 s.extend() console.log(s);
上述實(shí)現(xiàn)繼承的原理:
通過循壞,將父類對(duì)象的所有屬性和方法,全部賦給子類對(duì)象。關(guān)鍵點(diǎn)在于for-in循壞,即使不擴(kuò)展Object,也能通過簡(jiǎn)單的循壞實(shí)現(xiàn)操作。
但是用這種方法實(shí)現(xiàn)繼承也有一些缺點(diǎn):
①無(wú)法通過一次實(shí)例化,直接拿到完整的子類對(duì)象。而需要先拿到父類對(duì)象和子類對(duì)象兩個(gè)對(duì)象,再手動(dòng)合并;
②擴(kuò)展Object的繼承方法,也會(huì)保留在子類的對(duì)象上。
再來(lái)看看第二種實(shí)現(xiàn)繼承的方法吧~
2.使用原型繼承
在介紹這種方法之前先來(lái)說兩個(gè)概念:原型對(duì)象與原型
1、prototype:函數(shù)的原型對(duì)象
①只有函數(shù)才有prototype,而且所有函數(shù)必有prototype
②prototype本身也是一個(gè)對(duì)象!
③prototype指向了當(dāng)前函數(shù)所在的引用地址!
2、__proto__:對(duì)象的原型!
①只有對(duì)象才有__proto__,而且所有對(duì)象必有__proto__
②__proto__也是一個(gè)對(duì)象,所以也有自己的__proto__,順著這條線向上照的順序,就是原型鏈。
③函數(shù)、數(shù)組都是對(duì)象,都有自己的__proto__
//聲明父類 function Person(name,age){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //聲明子類 function Student(no){ this.no=no; this.study=function(){ alert("我在學(xué)習(xí)!我叫"+this.name+"今年"+this.age"); } } //將父類對(duì)象賦給子類的prototype Student.prototype=new Person("張三",14); //拿到子類對(duì)象時(shí),就會(huì)將父類對(duì)象的所有屬性和方法,添加到__proto__ var s=new Student(); s.study();
使用原型繼承的原理:
將父類對(duì)象,賦值給子類的prototype,那么父類對(duì)象的屬性和方法就會(huì)出現(xiàn)在子類的prototype中。那么,實(shí)例化子類時(shí),子類的prototype又會(huì)到子類對(duì)象的__proto__中,最終,父類對(duì)象的屬性和方法,會(huì)出現(xiàn)在子類對(duì)象的__proto__中。
這種繼承的特點(diǎn):
①子類自身的所有屬性都是成員屬性,父類繼承過來(lái)的屬性都是原型屬性。
②依然無(wú)法通過一步實(shí)例化拿到完成的子類對(duì)象。
第三種實(shí)現(xiàn)繼承的方法:
call()和apply()還有bind(),這三種方法很相似,只有在傳參方面有所不同。
function Person(name,age){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } function Student(no,name,age){ this.no=no; this.study=function(){ alert("我在學(xué)習(xí)!"); } //將父類函數(shù)的this,指向?yàn)樽宇惡瘮?shù)的this Person.call(this,name,age); } var s=new Student(12,"張三",24); console.log(s);
三個(gè)函數(shù)的唯一區(qū)別,在于接受func的參數(shù)列表的方式不同,除此之外,功能上沒有任何差異!
三個(gè)函數(shù)的寫法(區(qū)別):
call寫法:func.call(func的this指向的obj,func參數(shù)1,func參數(shù)2,...);
apply寫法:func.apply(func的this指向的obj,[func參數(shù)1,func參數(shù)2,...]);
bind寫法:func.bind(func的this指向的obj)(func參數(shù)1,func參數(shù)2,...);
關(guān)于使用JavaScript怎么實(shí)現(xiàn)一個(gè)封裝功能就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。