JavaScript中的原型與繼承

ky0ncheng 發(fā)布于2019-08-26 12:13 / 3634人閱讀

摘要：如下代碼示例刪除刪除方法每個(gè)對(duì)象中都會(huì)具有一個(gè)方法，該方法用來(lái)判斷一個(gè)對(duì)象是否是一個(gè)對(duì)象的原型屬性上述代碼說(shuō)明對(duì)象存在一個(gè)指向構(gòu)造函數(shù)的原型，這個(gè)鏈接被叫做屬性需要注意的是屬性與屬性并不等價(jià)。

原型

在JavaScript中，函數(shù)是一個(gè)包含屬性和方法的Function類型的對(duì)象。而原型(Prototype)就是Function類型對(duì)象的一個(gè)屬性
在函數(shù)定義時(shí)就包含prototype屬性，它的初始值是一個(gè)空對(duì)象。在JavaScript中并沒(méi)有定義函數(shù)的原型類型，所以原型可以是任何類型
原型是用于保存對(duì)象的共享屬性和方法的，原型的屬性和方法并不會(huì)影響函數(shù)本身的屬性和方法

function foo(a,b){
    return a+b;
}
console.log(typeof foo.prototype);//object

獲取原型

通過(guò)如下兩種方式可以獲取對(duì)象的原型，從而設(shè)置共享的屬性和方法：

通過(guò)構(gòu)造函數(shù)的prototype屬性

function Person(){
    console.log("Person instantiated");
}
console.log(Person.prototype);

通過(guò)Object對(duì)象的getPrototypeOf(obj)方法

function Person(){
    console.log("Person instantiated");
}
console.log(Object.getPrototypeOf(Person));

原型的屬性和方法

通過(guò)如下兩種方式可以設(shè)置原型的屬性和方法：

原型的屬性和方法多帶帶進(jìn)行定義

構(gòu)造函數(shù).prototype.屬性名=屬性值;
構(gòu)造函數(shù).prototype.方法名=function(){}

直接為原型定義一個(gè)新對(duì)象

構(gòu)造函數(shù).prototype={

屬性名:屬性值,
方法名:function(){}

}

自有屬性與原型屬性

自有屬性：通過(guò)對(duì)象的引用添加的屬性。其它對(duì)象可能無(wú)此屬性;即使有，也是彼此獨(dú)立的屬性

原型屬性：從原型對(duì)象中繼承來(lái)的屬性，一旦原型對(duì)象中屬性值改變，所有繼承自該原型的對(duì)象屬性均改變

function Emp(ename,salary){
    this.ename=ename;
    this.salary=salary;
}
Emp.prototype={city:"北京市",dept:"研發(fā)部"}
var emp1=new Emp("Mary",3800);
var emp2=new Emp("Tom",3000);

檢測(cè)自有或原型屬性

使用hasOwnPrototype()方法檢測(cè)對(duì)象是否具有指定的自有屬性：

function Hero(){}
var hero=new Hero();
console.log(hero.hasOwnPrototype("name"));

使用in關(guān)鍵字檢測(cè)對(duì)象及其原型鏈中是否具有指定屬性：

function Hero(){}
var hero=new Hero();
console.log("name" in hero);

擴(kuò)展屬性或方法

通過(guò)原型可以為指定構(gòu)造函數(shù)或?qū)ο髷U(kuò)展其屬性或方法，如下代碼示例：

function Hero(){}
Hero.prototype={
    name:"Mary",
    salary:3800
}

var hero=new Hero();
console.log(hero.name);//Mary

重寫原型屬性

通過(guò)構(gòu)造函數(shù)或?qū)ο蟮淖杂袑傩钥梢灾貙懺偷膶傩裕缦麓a示例：

function Hero(){}

Hero.prototype={
    name:"Mary",
    salary:3800
}

var hero=new Hero();
hero.name="Tom";

console.log(hero.name);//Tom

刪除屬性

通過(guò)delete關(guān)鍵字可以刪除對(duì)象的屬性，如果該對(duì)象既具有原型屬性又具有自有屬性的話，先刪除自有屬性，再刪除原型屬性。如下代碼示例：

function Hero(){}
Hero.prototype={name:"Mary",salary:3800}

var hero=new Hero();
hero.name="Tom";

delete hero.name;//刪除 Tom
console.log(hero.name);//Mary

delete hero.name;//刪除 Mary
console.log(hero.name);//undefined

isPrototypeOf()方法

每個(gè)對(duì)象中都會(huì)具有一個(gè)isPrototypeOf()方法，該方法用來(lái)判斷一個(gè)對(duì)象是否是一個(gè)對(duì)象的原型

var monkey={}
function Human(){}
Human.prototype=monkey;

var man=new Human();

monkey.isPrototypeOf(man);//true

__Proto__屬性

function Hero(){}

Hero.prototype={
    name:"Mary",
    salary:3800
}

var hero=new Hero();
console.log(hero.name);//Mary

上述代碼說(shuō)明hero對(duì)象存在一個(gè)指向構(gòu)造函數(shù)Hero的原型，這個(gè)鏈接被叫做__proto__屬性
需要注意的是：__proto__屬性與prototype屬性并不等價(jià)。__proto__屬性只能在調(diào)試時(shí)使用

__proto__屬性是指定對(duì)象的屬性

prototype屬性是指定構(gòu)造函數(shù)的屬性

擴(kuò)展內(nèi)建對(duì)象

JavaScript中的內(nèi)置對(duì)象有些也具有prototype屬性，利用內(nèi)置對(duì)象的prototype屬性可以為內(nèi)置對(duì)象擴(kuò)展屬性或方法
通過(guò)原型擴(kuò)展內(nèi)置對(duì)象的屬性和方法非常靈活，根據(jù)個(gè)性化要求制定JavaScript語(yǔ)言的具體內(nèi)容。一般建議慎用這種方式，如果JavaScript的版本更新時(shí)可能會(huì)提供個(gè)性化的屬性或方法，導(dǎo)致沖突。

Array.prototype.inArray=function(color){
   for(var i=0,len=this.length;i
繼承
原型鏈
構(gòu)造函數(shù)或構(gòu)造器具有prototype屬性，對(duì)象具有__proto__屬性，這就是之前學(xué)習(xí)的原型
如果構(gòu)造函數(shù)或?qū)ο驛，A的原型指向構(gòu)造函數(shù)或?qū)ο驜，B的原型再指向構(gòu)造函數(shù)或?qū)ο驝，以此類推，最終的構(gòu)造函數(shù)或?qū)ο蟮脑椭赶騉bject的原型。由此形成一條鏈狀結(jié)構(gòu)，被稱之為原型鏈。
按照上述的描述，在B中定義的屬性或方法，可以直接在A中使用并不需要定義。這就是繼承，它允許每個(gè)對(duì)象來(lái)訪問(wèn)其原型鏈上的任何屬性或方法
原型鏈?zhǔn)荅CMAScript標(biāo)準(zhǔn)中指定的默認(rèn)實(shí)現(xiàn)繼承的方式。
原型鏈實(shí)現(xiàn)繼承
function A(){
    this.name="a";
    this.toString=function(){return this.name};
}
function B(){
    this.name="b";
}
function C(){
    this.name="c";
    this.age=18;
    this.getAge=function(){return this.age};
}
B.prototype=new A();
C.prototype=new B();
只繼承于原型
出于對(duì)效率的考慮，盡可能地將屬性和方法添加到原型上?？梢圆扇∫韵路绞剑?/p>

不要為繼承關(guān)系多帶帶創(chuàng)建新對(duì)象
盡量減少運(yùn)行時(shí)的方法搜索

只繼承于原型
根據(jù)上述方式進(jìn)行更改后，代碼如下：
function A(){}
A.prototype.name="a";
A.prototype.toString=function(){return this.name}

function B(){}
B.prototype=A.prototype;
B.prototype.name="b";

function C(){}
C.prototype=B.prototype;
C.prototype.name="c";
C.prototype.age=18;
C.prototype.getAge=function(){return this.age};
原型鏈雖然很強(qiáng)大，用它可以實(shí)現(xiàn)JavaScript中的繼承，但同時(shí)也存在著一些問(wèn)題。

原型鏈實(shí)際上是在多個(gè)構(gòu)造函數(shù)或?qū)ο笾g共享屬性和方法
創(chuàng)建子類的對(duì)象時(shí)，不能像父級(jí)的構(gòu)造函數(shù)傳遞任何參數(shù)

綜上所述，在實(shí)際開發(fā)中很少會(huì)多帶帶使用原型鏈