javascript關(guān)于繼承的用法匯總
本文實(shí)例匯總了javascript關(guān)于繼承的用法。分享給大家供大家參考。具體如下:
例子:
* 實(shí)現(xiàn)子類(lèi)繼承父類(lèi),但不會(huì)產(chǎn)生多余的屬性和方法
* @returns {Function}
*/
define(function(){
return function(subType, superType){
var proto = new Object(superType.prototype);
proto.constructor = subType;
subType.prototype = proto;
};
});
//——————————————————————————
define(function(){
function ostring(s)
{
this.str = s;
this.length = this.str.length;
}
ostring.prototype.show = function(){
alert(this.str);
};
return ostring;
});
//——————————————————————————
define(['inherit', 'ostring'], function(inherit, ostring){
function wstring(s){
//用call實(shí)現(xiàn)調(diào)用父類(lèi)構(gòu)造函數(shù)
ostring.call(this, s);
this.chlength = 2 * s.length;
}
//繼承其他的屬性
inherit(wstring, ostring);
wstring.prototype.add = function(w)
{
alert(this.str + w);
};
return wstring;
});
再看例子
一、用function實(shí)現(xiàn):
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
this.inherit=person;
this.inherit(name);
this.books = books;
}
var au=new Author("dororo","Learn much");
au.name
或者同等效力的:
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
Person.call(this, name);
this.books = books;
}
var au=new Author("dororo","Learn much");
au.getName
由于這只是將this作為參數(shù),調(diào)用父類(lèi)Person的構(gòu)造函數(shù),把賦予父類(lèi)的所有域賦予Author子類(lèi),所以任何父類(lèi)Person構(gòu)造函數(shù)之外的定義的域(原型prototype),子類(lèi)都不會(huì)繼承。所以上面例子中,au.getName將是沒(méi)有被定義的(undefined),因?yàn)間etName是在Person的原型對(duì)象中定義的。
而且,子類(lèi)的構(gòu)造函數(shù)要在定義自己的域之前調(diào)用父類(lèi)構(gòu)造函數(shù),免得子類(lèi)的定義被父類(lèi)覆蓋掉。也就是說(shuō),Author定義屬性book要在Person.call之后,否則會(huì)被Person中屬性覆蓋。同時(shí),在子類(lèi)中也最好不要用prototype來(lái)定義子類(lèi)的函數(shù)域,因?yàn)樵谝粋€(gè)子類(lèi)被new,實(shí)例化之后就要執(zhí)行prototype,然后才是調(diào)用父類(lèi)的構(gòu)造函數(shù),這樣也容易被父類(lèi)的屬性覆蓋掉。
二、用prototype實(shí)現(xiàn):
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
this.books = books;
}
Author.prototype=new Person(name);
Author.prototype.constructor=Author;
Author.prototype.getBooks = function() {
return this.books;
}
var au1=new Author("dororo1","Learn much");
var au2=new Author("dororo2","Learn less");
alert(au1.getName());
alert(au2.getName());
這種方法避免了function實(shí)現(xiàn)中,無(wú)法繼承prototype的問(wèn)題。因?yàn)?Author.prototype=new Person(name);new Person()實(shí)例會(huì)調(diào)用Person構(gòu)造和原型的所有屬性。但是缺點(diǎn)是已經(jīng)實(shí)例化了Author.prototype。所以當(dāng)子類(lèi)實(shí)例化的時(shí)候,所有非基本數(shù)據(jù)類(lèi)型都是reference copy。所以上面例子中,無(wú)論實(shí)例au1,還是au2返回的值都是dororo1.
三、用“混合”實(shí)現(xiàn)
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
this.base = new Person(name);
for(var key in this.base){
if(!this[key]){
this[key]=this.base[key];
}
}
this.book=books;
}
var au1=new Author("dororo1","work");
var au2=new Author("dororo2","play");
alert(au1.getName());
alert(au2.getName());
au1.book;
au2.book;
屬于擴(kuò)展,把父類(lèi)的所有域都拷貝到子類(lèi)。完全沒(méi)有上述兩方面的問(wèn)題。
寄生組合模式)
JS的繼承包括屬性的繼承和方法的繼承,他們分別通過(guò)不同的方法來(lái)實(shí)現(xiàn)。
1.屬性的繼承
屬性的繼承通過(guò)改變函數(shù)的執(zhí)行環(huán)境來(lái)實(shí)現(xiàn)的。而改變函數(shù)的執(zhí)行環(huán)境可以使用call()和apply()兩種方法來(lái)實(shí)現(xiàn)。
我們首先創(chuàng)建一個(gè)Animal“類(lèi)”(因?yàn)镴S中沒(méi)有類(lèi)的概念,這里只是一個(gè)模擬,它實(shí)際上只是一個(gè)Function函數(shù)對(duì)象)。
//為當(dāng)前方法的執(zhí)行環(huán)境(this)添加一個(gè)屬性typeName
//但是執(zhí)行環(huán)境(this)要執(zhí)行這個(gè)函數(shù)的時(shí)候才能確定
this.typeName = typeName;
this.colors = ["red","while"];
}
//想函數(shù)的原型里 添加 兩個(gè)(對(duì)象共享的)的方法
Animal.prototype.Shout = function () { alert("我是:--" + this.typeName);};
Animal.prototype.Eat = function () { alert("我是:--" + this.typeName) };
//--定義一個(gè)獅子--“類(lèi)”(其實(shí)就是一個(gè)函數(shù))
function Lion(tn) {
//--執(zhí)行Animal方法,并通過(guò)apply的第一個(gè)參數(shù) 修改了Animal的執(zhí)行環(huán)境為L(zhǎng)ion的this
//同樣的,Lion的this,也要在執(zhí)行的時(shí)候才能確定是誰(shuí)
Animal.apply(this,["獅子"]);//--繼承了父類(lèi)的變量屬性,this因?yàn)槭莕ew了Lion,this是Lion
}
Lion.prototype = Animal.prototype; //繼承父類(lèi)的方法,搞定--但是這寫(xiě)不好,當(dāng)子類(lèi)再添加方法時(shí)候,父類(lèi)同樣也有此方法,這是指針引用
Lion.prototype.Hunt = function () {
alert("我是:獅子,我要去捕獵~~·~");
}
var aminm = new Animal();
aminm.Hunt(); //---可以訪問(wèn)到子類(lèi)的方法,這樣就不好了
//----那么如何解決這個(gè)問(wèn)題呢》??????
//---解決方案:繼承方法時(shí)候可以這樣寫(xiě):
Lion.prototype = new Animal();//繼承父類(lèi)的方法,把Animal對(duì)象賦給了prototype原型,其實(shí)它里面也有屬性
var lion = new Lion(); //new 關(guān)鍵字除了創(chuàng)建的,還會(huì)修改Lion對(duì)象的執(zhí)行環(huán)境為L(zhǎng)ion對(duì)象本身
// ---換句話(huà)說(shuō),就是new完了之后,Lion函數(shù)里的this就是Lion函數(shù)本身了,然后調(diào)用Lion函數(shù)
分析一下new關(guān)鍵字:
而new關(guān)鍵字是十分偉大的,在上段代碼中,new關(guān)鍵字完成了以下幾項(xiàng)工作:
1)開(kāi)辟堆空間,以準(zhǔn)備存儲(chǔ)Lion對(duì)象
2)修改Lion對(duì)象本身的執(zhí)行環(huán)境,使得Lion函數(shù)的this指向了Lion函數(shù)對(duì)象本身。
3)調(diào)用Lion“類(lèi)”的“構(gòu)造函數(shù)”,創(chuàng)建Lion對(duì)象
4)將Lion函數(shù)對(duì)象的堆地址賦值給變量l,這個(gè)時(shí)候l就指向了這個(gè)Lion函數(shù)對(duì)象
lion.Shout();
lion.Eat();
但是這種繼承有個(gè)缺點(diǎn):就是父類(lèi)的構(gòu)造函數(shù)的被調(diào)用了兩次,call一次,然后new又一次。
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- 不錯(cuò)的一篇關(guān)于javascript-prototype繼承
- Javascript 繼承機(jī)制的實(shí)現(xiàn)
- 實(shí)現(xiàn)JavaScript中繼承的三種方式
- JavaScript面向?qū)ο笾甈rototypes和繼承
- 深入了解javascript中的prototype與繼承
- 深入理解JavaScript是如何實(shí)現(xiàn)繼承的
- JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
- javascript 面向?qū)ο蠓庋b與繼承
- 淺談Javascript實(shí)現(xiàn)繼承的方法
相關(guān)文章
20行代碼實(shí)現(xiàn)的一個(gè)CSS覆蓋率測(cè)試腳本
這里我們只求CSS規(guī)則的覆蓋率,所以訪問(wèn) querySelectorAll().length 即可。通過(guò)排序就可看出各個(gè)CSS使用情況2013-07-07JavaScript知識(shí)點(diǎn)總結(jié)(四)之邏輯OR運(yùn)算符詳解
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(四)之邏輯OR運(yùn)算符詳解的相關(guān)資料,在JavaScript中,邏輯OR運(yùn)算符用||表示。本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-05-05Bootstrap 3的box-sizing樣式導(dǎo)致UEditor控件的圖片無(wú)法正常縮放的解決方案
這篇文章主要介紹了Bootstrap 3的box-sizing樣式導(dǎo)致UEditor控件的圖片無(wú)法正??s放的解決方案的相關(guān)資料,需要的朋友可以參考下2016-09-09小程序?qū)崿F(xiàn)短信登錄倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)短信登錄倒計(jì)時(shí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07js原生map實(shí)現(xiàn)的方法總結(jié)
在本篇文章里小編給大家整理了關(guān)于js原生map實(shí)現(xiàn)的方法以及實(shí)例分析內(nèi)容,需要的朋友們可以參考下。2020-01-01