原型物件 繼承

2021-07-13 14:52:41 字數 3194 閱讀 1489

一、繼承的概念

**物件導向的特徵就是封裝性、繼承性和多型性

1、封裝:就是將複雜的包裹起來,隱藏起來,讓簡單的東西預留在外面

2、繼承:繼承它父級,拿來主義,自己沒有,把別人拿過來

在js中有兩種繼承模型

(1)、原型繼承:如果需要讓乙個物件有某乙個行為(屬性,方法),那可以考慮將這個行為加到原型物件中那麼這個物件就是繼承自原型物件,獲得了該行為。

(2)、組和繼承:將其他的物件中的成員加到自己身上

**組合繼承例子:

var o1=;

var o2=

};//讓o2繼承自o1

//將o1的成員加到o2上

for(var k in o1)

//由於for in迴圈中的物件可以隨意的替換,因此o2可以繼承自任意的物件,因此這個繼承方法稱為組合式繼承。

**希望o2可以繼承自任意的物件,所以為簡化繼承的**,給o2提供乙個方法,叫extend

var o1=;

var o2=

};o2.extend=function(obj)

};o2.extend(o1);//繼承

o2.extend(,

tag:function(tag){},

showerr:function(msg)

});**原型式繼承:物件繼承自其原型物件,在物件的原型物件中加東西即可

**使用原型物件的方法:

1、利用物件的動態特性新增成員

var o={};

o.name="alvin";

var person=function(){};

person.prototype.sayhello=function();

此時原型物件是物件,可以利用動態特性隨時新增成員,新增成員都會被建構函式的物件繼承。

2、利用覆蓋原型物件

var person=function (){};

person.prototype.sayhello=function(){};

person.prototype.saylove=function(){};

//.....person.prototype重複編寫

//如果需要新增的內容非常多

person.prototype=,

saygoodbye:function(){},

saylove:function(){}

};這裡由person建立出來的物件是什麼型別?

var p=new person();

console.log(p.constructor.name);

//結果person ,如果不在上面的新增constructor:person,結果是object,因為上面person的原型物件沒有constructor,所以去原型物件的原型上找建構函式名,此時原型物件的物件是object,所以列印出來object

//覆蓋原型物件實現繼承的時候,一定要給新物件新增乙個constructor屬性,以便模擬物件的型別,但是如果對物件的型別要求不嚴格的可以忽略。

3、利用組合式繼承新增原型成員

物件.extend(物件);

二、經典繼承

1、在實際開發中如果希望獲得乙個繼承自物件o 物件,可以使用object.create方法,es5提供的方法,新物件object.create(作為原型物件的物件)。

var o1=;

var o2=object.create(o1);//與型別無關,無法判斷型別

2、ie不支援create,所以建立乙個新物件,讓它繼承自引數物件;建立新物件就有建構函式;繼承物件就有原始物件

function create(obj)

//要有繼承

f.prototype=obj;//要有原型,此時f  new出來的物件統統繼承obj

return new f();

}var o1=

var o3=create(o1);

conlose.log(o3);

結果:o3:f   

name:"alvin"

3、在實際開發中,為了相容所有瀏覽器,有兩種方法

(1)、用原生物件中提供的方法

if(!object.create)

f.prototype=obj;

return new f();}}

var o1=;

var o4=object.create(o1);

(2)、無論瀏覽器是否支援該方法,都應該使用自己定義的方法完成,但是在方法內部,判斷瀏覽器內部是否具有該功能,如果有該功能;則使用瀏覽器提供的的功能;如果瀏覽器不支援該功能則自己實現。

var create=function(obj)

else;

f.prototype=obj;

return new f();}}

var o5=create(obj);

總結原型式繼承:

1、概念:物件繼承自原型物件,物件沒有的成員,可以由原型物件提供。

2、實現方式

(1)、動態新增原型物件的成員

(2)、直接替換原型物件(如果對型別要求嚴格需要新增constructor屬性)

(3)、利用extend函式給原型物件新增成員。

3、經典的繼承**

var o1=;

var o2=object.create(o1);

o2作為物件,它的原型物件由誰來決定;

o2的原型物件由建構函式的prototype決定;

o2的原型物件就是o1;

所以:o2建構函式的prototype=o1;

**o2沒有建構函式:o2是由create函式建立的,那麼函式內容有乙個建構函式就可以了

var create=function(obj)//在create裡建立乙個建構函式

f.prototype=obj;//把obj變成f建構函式中的原型物件

return new f();

}**瀏覽器相容性問題

1、直接交給原生物件,給原生物件提供功能

if(!object.create)

f.prototype=obj;

return new f();

}2、專案複雜的時候,上面的方法混亂

先考慮瀏覽器是否有該方法,有就使用瀏覽器,沒有就使用自己實現的

function create(obj)

else

f.prototype=obj;

return new f();}}

js原型物件 原型鏈 繼承

原型物件 只要建立了乙個新函式,就會根據一些特定的規則為該函式建立乙個prototype屬性,這個屬性指向的物件就是該新函式的原型物件。預設情況下,所有原型物件都會自動獲取乙個constructor屬性,這個屬性是乙個指向prototype屬性所在函式的指標 原型物件的優點 可以讓所有物件例項共享它...

物件導向 原型 繼承

繼承 聖杯模式 prototype constructor prpto 三者之間關係 typeof 區分陣列與物件 instanceof object.create 類陣列好玩的 1.字串函式擴充套件 一般呼叫 string.prototype.repeat function num console...

物件導向 建立物件 原型鏈 繼承

字面量建立物件 使用json形式建立物件,適用於建立單個物件.json js物件表示法,由鍵值對組成,每乙個鍵值對之間使用冒號連線,每一對鍵值對之間使用逗號隔開.var obj console.log obj console.log typeof obj object console.log obj...