javascript實(shí)現(xiàn)繼承有哪些方式

Javascript的繼承在很多書里面細(xì)致的分了很多種類型和實(shí)現(xiàn)方式，大體上就是兩種：對(duì)象冒充、原型方式。這兩種方式各有優(yōu)點(diǎn)和缺陷，這里我給你先列舉出來，再從底層分析區(qū)別：

創(chuàng)新互聯(lián)建站是一家專注于成都做網(wǎng)站、成都網(wǎng)站制作與策劃設(shè)計(jì),靈臺(tái)網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:靈臺(tái)等地區(qū)。靈臺(tái)做網(wǎng)站價(jià)格咨詢:13518219792

(一)對(duì)象冒充

function A(name){

this.name = name;

this.sayHello = function(){alert(this.name+” say Hello!”);};

}

function B(name,id){

this.temp = A;

this.temp(name); //相當(dāng)于new A();

delete this.temp; //防止在以后通過temp引用覆蓋超類A的屬性和方法

this.id = id;

this.checkId = function(ID){alert(this.id==ID)};

}

當(dāng)構(gòu)造對(duì)象B的時(shí)候，調(diào)用temp相當(dāng)于啟動(dòng)A的構(gòu)造函數(shù)，注意這里的上下文環(huán)境中的this對(duì)象是B的實(shí)例，所以在執(zhí)行A構(gòu)造函數(shù)腳本時(shí)，所有A的變量 和方法都會(huì)賦值給this所指的對(duì)象，即B的實(shí)例，這樣子就達(dá)到B繼承了A的屬性方法的目的。之后刪除臨時(shí)引用temp，是防止維護(hù)B中對(duì)A的類對(duì)象（注 意不是實(shí)例對(duì)象）的引用更改，因?yàn)楦膖emp會(huì)直接導(dǎo)致類A（注意不是類A的對(duì)象）結(jié)構(gòu)的變化。

我們看到了，在Js版本更新的過程中，為了更方便的執(zhí)行這種上下文this的切換以達(dá)到繼承或者更加廣義的目的，增加了call和apply函數(shù)。它們的 原理是一樣的，只是參數(shù)不同的版本罷了(一個(gè)可變?nèi)我鈪?shù)，一個(gè)必須傳入數(shù)組作為參數(shù)集合)。這里就以call為例子，解釋一下用call實(shí)現(xiàn)的對(duì)象冒充 繼承。

function Rect(width, height){

this.width = width;

this.height = height;

this.area = function(){return this.width*this.height;};

}

function myRect(width, height, name){

Rect .call(this,width,height);

this.name = name;

this.show = function(){

alert(this.name+” with area:”+this.area());

}

}

關(guān)于Call方法，官方解釋：調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。

call (thisOb,arg1, arg2…)

這也是一種對(duì)象冒充的繼承，其實(shí)在call方法調(diào)用的時(shí)候發(fā)生的事情也是上下文環(huán)境變量this的替換，在myRect函數(shù)體中this肯定是指向類 myRect對(duì)象的實(shí)例了，然而用這個(gè)this作為上下文環(huán)境變量調(diào)用名字叫Rect方法，即類Rect的構(gòu)造函數(shù)。于是此時(shí)調(diào)用Rect時(shí)候?qū)his 的賦值屬性和方法都實(shí)際上是對(duì)一個(gè)myRect的對(duì)象進(jìn)行。所以說盡管call和apply并不是僅僅為了繼承而新增的方法，但用它們可以模擬繼承。

對(duì)象冒充繼承就是這么一回事，它可以實(shí)現(xiàn)多重繼承，只要重復(fù)做這一套賦值的流程就可以了。不過目前真正大規(guī)模使用得并不多，為什么呢？因?yàn)樗幸粋€(gè)明顯的 性能缺陷，這就要說道OO的概念了，我們說對(duì)象是成員+成員方法的集合，構(gòu)造對(duì)象實(shí)例的時(shí)候，這些實(shí)例只需要擁有各自的成員變量就可以了，成員方法只是一 段對(duì)變量操作的可執(zhí)行文本區(qū)域而已，這段區(qū)域不用為每個(gè)實(shí)例而復(fù)制一份，所有的實(shí)例都可以共享。現(xiàn)在回到Js利用對(duì)象冒充模擬的繼承里，所有的成員方法都 是針對(duì)this而創(chuàng)建的，也就是所所有的實(shí)例都會(huì)擁有一份成員方法的副本，這是對(duì)內(nèi)存資源的一種極度浪費(fèi)。其它的缺陷比如說對(duì)象冒充無法繼承 prototype域的變量和方法就不用提了，筆者認(rèn)為前一個(gè)致命缺陷就已經(jīng)足夠。不過，我們還是需要理解它，特別是父類的屬性和方法是如何繼承下來的原 理，對(duì)于理解Js繼承很重要。

(二)原型方式

第二種繼承方式是原型方式，所謂原型方式的繼承，是指利用了prototype或者說以某種方式覆蓋了prototype，從而達(dá)到屬性方法復(fù)制的目的。 其實(shí)現(xiàn)方式有很多中，可能不同框架多少會(huì)有一點(diǎn)區(qū)別，但是我們把握住原理，就不會(huì)有任何不理解的地方了。看一個(gè)例子（某一種實(shí)現(xiàn)）：

function Person(){

this.name = “Mike”;

this.sayGoodbye = function(){alert(“GoodBye!”);};

}

Person.prototype.sayHello = function(){alert(”Hello!”);};

function Student(){}

Student.prototype = new Person();

關(guān)鍵是對(duì)最后一句Student原型屬性賦值為Person類構(gòu)造的對(duì)象，這里筆者解釋一下父類的屬性和方法是如何copy到子類上的。Js對(duì)象在讀取某 個(gè)對(duì)象屬性的時(shí)候，總是先查看自身域的屬性列表，如果有就返回否則去讀取prototype域(每個(gè)對(duì)象共享構(gòu)造對(duì)象的類的prototype域所有屬性 和方法)，如果找到就返回，由于prototype可以指向別的對(duì)象，所以Js解釋器會(huì)遞歸的去查找prototype域指向?qū)ο蟮膒rototype 域，直到prototype為本身，查找變成了一種循環(huán)，就停止，此時(shí)還沒找到就成undefined了。

這樣看來，最后一句發(fā)生的效果就是將父類所有屬性和方法連接到子類的prototype域上，這樣子類就繼承了父類所有的屬性和方法，包括name、 sayGoodbye和sayHello。這里與其把最后一句看成一種賦值，不如理解成一種指向關(guān)系更好一點(diǎn)。這種原型繼承的缺陷也相當(dāng)明顯，就是繼承時(shí) 父類的構(gòu)造函數(shù)時(shí)不能帶參數(shù)，因?yàn)閷?duì)子類prototype域的修改是在聲明子類對(duì)象之后才能進(jìn)行，用子類構(gòu)造函數(shù)的參數(shù)去初始化父類屬性是無法實(shí)現(xiàn)的， 如下所示：

function Person(name){

this.name = name;

}

function Student(name,id){

this.id = id;

}

Student.prototype = new Person(this.name);

兩種繼承方式已經(jīng)講完了，如果我們理解了兩種方式下子類如何把父類的屬性和方法“抓取”下來，就可以自由組合各自的利弊，來實(shí)現(xiàn)真正合理的Js繼承。下面是個(gè)人總結(jié)的一種綜合方式：

function Person(name){

this.name = name;

}

Person.prototype.sayHello = function(){alert(this.name+“say Hello!”);};

function Student(name,id){

Person.call(this,name);

this.id = id;

}

Student.prototype = new Person();

Student.prototype.show = function(){

alert(“Name is:”+ this.name+” and Id is:”+this.id);

}

總結(jié)就是利用對(duì)象冒充機(jī)制的call方法把父類的屬性給抓取下來，而成員方法盡量寫進(jìn)被所有對(duì)象實(shí)例共享的prototype域中，以防止方法副本重復(fù)創(chuàng) 建。然后子類繼承父類prototype域來抓取下來所有的方法。如想徹底理清這些調(diào)用鏈的關(guān)系，推薦大家多關(guān)注Js中prototype的 constructor和對(duì)象的constructor屬性，這里就不多說了。

vue模塊中如何使用javascript類繼承

1、首先確定一個(gè)vue模塊，點(diǎn)擊編輯。

2、其次選擇繼承方式為類繼承。

3、最后直接點(diǎn)擊選擇使用javascript類繼承即可保存。

js原型鏈和繼承的理解

Object() Function() Array() 等等都為構(gòu)造函數(shù)。

Js 面向?qū)ο笈c傳統(tǒng)oop 有些不同，語法較高級(jí) 語法糖封裝。

This 為指針。指向this作用域的調(diào)用者

1.原型繼承鏈頂端為Object 。Js函數(shù)是對(duì)象

2.當(dāng)讀取對(duì)象中的屬性時(shí)，先去實(shí)例本身中搜索，如搜索不到則去指向的原型中搜索

1.原型的存在意義在于實(shí)現(xiàn)繼承共享，是在構(gòu)造函數(shù)中定義的一個(gè)成員對(duì)象，在下次實(shí)例化時(shí)不需要在構(gòu)造函數(shù)中定義成員 就可實(shí)現(xiàn)實(shí)例共享方法屬性。

例子：通常為。 構(gòu)造函數(shù).prototype.xxx=我想實(shí)現(xiàn)實(shí)例繼承的東西 -》 new 構(gòu)造函數(shù) -》新實(shí)例a對(duì)象.原型指針指向構(gòu)造函數(shù)的xxx對(duì)象（引用類型）

例子：Array 不等于 Array（） 原因 Array為一個(gè)函數(shù)，而Array（）為一個(gè)構(gòu)造函數(shù)調(diào)用語句，故Array擁有prototype對(duì)象用于實(shí)例的共享繼承，Array（）產(chǎn)生一個(gè)實(shí)例 故只能擁有prototype對(duì)象的私有指針 proto

2.在使用原型繼承時(shí) 不能使用字面量 構(gòu)造函數(shù).prototype={} 的方式重寫原型對(duì)象 。因?yàn)闀?huì)導(dǎo)致該原型對(duì)象的constructor屬性被重寫，在生成的實(shí)例中導(dǎo)致constructor指向Object并且會(huì)切斷之前原型對(duì)象的聯(lián)系，破壞原型鏈。

3.JavaScript 主要通過原型鏈實(shí)現(xiàn)繼承。原型鏈的構(gòu)建是通過將一個(gè)類型的實(shí)例賦值給另一個(gè)構(gòu)造函數(shù)的原型實(shí)現(xiàn)的

例子：

xxx實(shí)例. proto -》function xxx()構(gòu)造函數(shù).prototype對(duì)象故xxx. proto === xxx.prototype

xxx.prototype. proto -》Object.prototype因?yàn)樗袑?duì)象都為Object函數(shù)構(gòu)造來的。故xxx.prototype. proto ===Object.prototype。

Object.prototype. proto 為原型鏈頂端 proto 定義了尚未使用所以為null故Object.prototype. proto ===null約定俗成。

instanceof 用來判斷某實(shí)例是否為某構(gòu)造函數(shù)的實(shí)例

isPrototypeOf 用于判斷某實(shí)例是否擁有某構(gòu)造函數(shù)的原型對(duì)象指針

1.原型模式有忽略構(gòu)造函數(shù)定義初始值步驟及原型中操作引用類型的缺點(diǎn)。

所以需要組合使用 構(gòu)造函數(shù)模式+原型模式 來創(chuàng)建實(shí)例。在構(gòu)造函數(shù)中定義實(shí)例的屬性，而需共享的方法就定義在原型對(duì)象中。

繼承：在子構(gòu)造函數(shù)中調(diào)用 父.call(this, name); 實(shí)現(xiàn)構(gòu)造函數(shù)之間的屬性繼承。使用 子.prototype = new 父(); 子.prototype.constructor = 子;實(shí)現(xiàn)方法的繼承。

2.如要在生產(chǎn)環(huán)境下的構(gòu)造函數(shù)新增方法（如Array） 需要使用一個(gè)類似于工廠函數(shù)的寄生構(gòu)造函數(shù)模式 在構(gòu)造函數(shù)中返回一個(gè)修改后的對(duì)象

JavaScript六種繼承方式？

繼承是面向?qū)ο缶幊讨杏忠环浅Ｖ匾母拍睿琂avaScript支持實(shí)現(xiàn)繼承，不支持接口繼承，實(shí)現(xiàn)繼承主要依靠原型鏈來實(shí)現(xiàn)的。

原型鏈

首先得要明白什么是原型鏈，昆明北大青鳥建議可以在一篇文章看懂proto和prototype的關(guān)系及區(qū)別中講得非常詳細(xì)

原型鏈繼承基本思想就是讓一個(gè)原型對(duì)象指向另一個(gè)類型的實(shí)例

添加方法

在給SubType原型添加方法的時(shí)候，如果，父類上也有同樣的名字，SubType將會(huì)覆蓋這個(gè)方法，達(dá)到重新的目的。但是這個(gè)方法依然存在于父類中。

記住不能以字面量的形式添加，因?yàn)椋厦嬲f過通過實(shí)例繼承本質(zhì)上就是重寫，再使用字面量形式，又是一次重寫了，但這次重寫沒有跟父類有任何關(guān)聯(lián)，所以就會(huì)導(dǎo)致原型鏈截?cái)唷?/p>

問題

單純的使用原型鏈繼承，主要問題來自包含引用類型值的原型。

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

此方法為了解決原型中包含引用類型值所帶來的問題。

這種方法的思想就是在子類構(gòu)造函數(shù)的內(nèi)部調(diào)用父類構(gòu)造函數(shù)，可以借助apply()和call()方法來改變對(duì)象的執(zhí)行上下文

傳遞參數(shù)

借助構(gòu)造函數(shù)還有一個(gè)優(yōu)勢(shì)就是可以傳遞參數(shù)

js中繼承的幾種用法總結(jié)

一，js中對(duì)象繼承

js中有三種繼承方式

1.js原型（prototype）實(shí)現(xiàn)繼承

復(fù)制代碼 代碼如下:

SPAN style="BACKGROUND-COLOR: #ffffff"SPAN style="FONT-SIZE: 18px"html

body

script type="text/javascript"

function Person(name,age){

this.name=name;

this.age=age;

}

Person.prototype.sayHello=function(){

alert("使用原型得到Name："+this.name);

}

var per=new Person("馬小倩",21);

per.sayHello(); //輸出：使用原型得到Name:馬小倩

function Student(){}

Student.prototype=new Person("洪如彤",21);

var stu=new Student();

Student.prototype.grade=5;

Student.prototype.intr=function(){

alert(this.grade);

}

stu.sayHello();//輸出：使用原型得到Name:洪如彤

stu.intr();//輸出：5

/script

/body

/html/SPAN/SPAN

2.構(gòu)造函數(shù)實(shí)現(xiàn)繼承

復(fù)制代碼 代碼如下:

SPAN style="FONT-SIZE: 18px"html

body

script type="text/javascript"

function Parent(name){

this.name=name;

this.sayParent=function(){

alert("Parent:"+this.name);

}

}

function Child(name,age){

this.tempMethod=Parent;

this.tempMethod(name);

this.age=age;

this.sayChild=function(){

alert("Child:"+this.name+"age:"+this.age);

}

}

var parent=new Parent("江劍臣");

parent.sayParent(); //輸出：“Parent:江劍臣”

var child=new Child("李鳴",24); //輸出：“Child:李鳴 age:24”

child.sayChild();

/script

/body

/html/SPAN

3.call , apply實(shí)現(xiàn)繼承

復(fù)制代碼 代碼如下:

SPAN style="FONT-SIZE: 18px"html

body

script type="text/javascript"

function Person(name,age,love){

this.name=name;

this.age=age;

this.love=love;

this.say=function say(){

alert("姓名："+name);

}

}

//call方式

function student(name,age){

Person.call(this,name,age);

}

//apply方式

function teacher(name,love){

Person.apply(this,[name,love]);

//Person.apply(this,arguments); //跟上句一樣的效果，arguments

}

//call與aplly的異同：

//1,第一個(gè)參數(shù)this都一樣,指當(dāng)前對(duì)象

//2,第二個(gè)參數(shù)不一樣：call的是一個(gè)個(gè)的參數(shù)列表；apply的是一個(gè)數(shù)組（arguments也可以）

var per=new Person("武鳳樓",25,"魏熒屏"); //輸出：“武鳳樓”

per.say();

var stu=new student("曹玉",18);//輸出：“曹玉”

stu.say();

var tea=new teacher("秦杰",16);//輸出：“秦杰”

tea.say();

/script

/body

/html/SPAN

二、call和apply的用法（詳細(xì)介紹）

js中call和apply都可以實(shí)現(xiàn)繼承，唯一的一點(diǎn)參數(shù)不同，func.call(func1,var1,var2,var3)對(duì)應(yīng)的apply寫法為：func.apply(func1,[var1,var2,var3])。

JS手冊(cè)中對(duì)call的解釋：

復(fù)制代碼 代碼如下:

SPAN style="FONT-SIZE: 18px"call 方法

調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

參數(shù)

thisObj

可選項(xiàng)。將被用作當(dāng)前對(duì)象的對(duì)象。

arg1, arg2, , argN

可選項(xiàng)。將被傳遞方法參數(shù)序列。

說明

call 方法可以用來代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。

如果沒有提供 thisObj 參數(shù)，那么 Global 對(duì)象被用作 thisObj。/SPAN

說簡(jiǎn)單一點(diǎn)，這兩函數(shù)的作用其實(shí)就是更改對(duì)象的內(nèi)部指針，即改變對(duì)象的this指向的內(nèi)容。這在面向?qū)ο蟮膉s編程過程中有時(shí)是很有用的。下面以apply為例，說說這兩個(gè)函數(shù)在 js中的重要作用。如：

復(fù)制代碼 代碼如下:

SPAN style="FONT-SIZE: 18px" function Person(name,age){ //定義一個(gè)類

this.name=name; //名字

this.age=age; //年齡

this.sayhello=function(){alert(this.name)};

}

function Print(){ //顯示類的屬性

this.funcName="Print";

this.show=function(){

var msg=[];

for(var key in this){

if(typeof(this[key])!="function"){

msg.push([key,":",this[key]].join(""));

}

}

alert(msg.join(" "));

};

}

function Student(name,age,grade,school){ //學(xué)生類

Person.apply(this,arguments);//比call優(yōu)越的地方

Print.apply(this,arguments);

this.grade=grade; //年級(jí)

this.school=school; //學(xué)校

}

var p1=new Person("卜開化",80);

p1.sayhello();

var s1=new Student("白云飛",40,9,"岳麓書院");

s1.show();

s1.sayhello();

alert(s1.funcName);/SPAN

另外，F(xiàn)unction.apply()在提升程序性能方面有著突出的作用：

我們先從Math.max()函數(shù)說起，Math.max后面可以接任意個(gè)參數(shù)，最后返回所有參數(shù)中的最大值。

比如

復(fù)制代碼 代碼如下:

SPAN style="FONT-SIZE: 18px"alert(Math.max(5,8)); //8

alert(Math.max(5,7,9,3,1,6)); //9

//但是在很多情況下，我們需要找出數(shù)組中最大的元素。

var arr=[5,7,9,1];

//alert(Math.max(arr)); // 這樣卻是不行的。NaN

//要這樣寫

function getMax(arr){

var arrLen=arr.length;

for(var i=0,ret=arr[0];iarrLen;i++){

ret=Math.max(ret,arr[i]);

}

return ret;

}

alert(getMax(arr)); //9

//換用apply，可以這樣寫

function getMax2(arr){

return Math.max.apply(null,arr);

}

alert(getMax2(arr)); //9

//兩段代碼達(dá)到了同樣的目的，但是getMax2卻優(yōu)雅，高效，簡(jiǎn)潔得多。

//再比如數(shù)組的push方法。

var arr1=[1,3,4];

var arr2=[3,4,5];

//如果我們要把 arr2展開，然后一個(gè)一個(gè)追加到arr1中去，最后讓arr1=[1,3,4,3,4,5]

//arr1.push(arr2)顯然是不行的。 因?yàn)檫@樣做會(huì)得到[1,3,4,[3,4,5]]

//我們只能用一個(gè)循環(huán)去一個(gè)一個(gè)的push(當(dāng)然也可以用arr1.concat(arr2)，但是concat方法并不改變arr1本身)

var arrLen=arr2.length;

for(var i=0;iarrLen;i++){

arr1.push(arr2[i]);

}

//自從有了Apply,事情就變得如此簡(jiǎn)單

Array.prototype.push.apply(arr1,arr2); //現(xiàn)在arr1就是想要的結(jié)果/SPAN

分享題目：javascript繼承方式的簡(jiǎn)單介紹
本文來源：http://chinadenli.net/article24/phisje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)建站、關(guān)鍵詞優(yōu)化、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)