JavaScript四種繼承方式

2021-07-16 08:49:12 字數 1908 閱讀 6659

原型繼承

function person(name,age)

person.prototype.say=function();

function man()

man.prototype=new person('霍頓',22);//這句是重點,敲黑板

var man1=new man();

man1.say();

var man2=new man();

alert(man2.name);

alert(man2.age);

//這種繼承方式很直接,為了獲取

person

的所有屬性方法直接將父類的例項賦給了子類

//的原型,其實子類的例項本身是乙個完全空的物件,所有的屬性和方法都得去原型鏈上去找

//因而找到的屬性方法都是同乙個,所以直接利用原型鏈繼承是不現實的。

構造繼承

function person(name,age)

person.prototype.say=function()

function man(name,age)

var man1=new man('霍頓');

alert(man1.name);

man1.say();//沒有輸出,無法呼叫

//利用建構函式繼承,在子類的建構函式裡利用了

去呼叫父類的建構函式,從而達到繼承父類屬性的效果

//比直接利用原型鏈要好,但這種方法只能繼承父類的例項屬性因而找不到

say方法,為了繼承父類的屬性和方法引入了組合繼承方式

組合繼承

function person(name,age)

person.prototype.say=function();

function man(name,age)

man.prototype=new person();//這句是重點,敲黑板

var man1=new man("霍頓");

var man2=new man("霍頓他爹");

alert(man1.name);

alert(man1.say());

//需要注意的是

man1

的例項屬性其實是覆蓋了原型屬性但是並沒有要覆蓋掉原型上的

say方法

//所以

man1.say==man2.say

依然返回

true

,因而需要十分小心沒有覆蓋掉的原型屬性,

//因為它是所有例項共有的。

寄生繼承

function person(name,age)

person.prototype.say=function();

function man(name,age)

man.prototype=object.create(person.prototype);//這句是重點,敲黑板

man.prototype.constructor=man;//這句是重點,敲黑板

var man1=new man("霍頓");

var man2=new man("霍頓他爹");

alert(man1.say==man2.say);

alert(man1.say());

alert(man2.say());

//寄生組合繼承和上面的組合繼承區別僅在於構造子類原型物件的方式上

//這裡用到了

object.create(obj)

方式,該方法其實是對傳入的

obj物件進行淺拷貝

JS 繼承的四種方式

js 本身是基於物件導向開發的程式語言。類 封裝 繼承 多型 繼承機制使得不同的例項可以共享建構函式的原型物件的屬性和方法 以下情況都是 b 為子類,a 為父類 基本思想是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。我們知道每個建構函式都有乙個原型物件 prototype 原型物件都包含乙...

HTTP請求Content Type四種方式比較

1 content type作用 乙個正確的http請求應當具備狀態行 請求頭 訊息主體 請求的資料應當放到訊息主體裡,資料本身的編碼方式由content type宣告,請求的客戶端和服務端必須遵守同乙個編碼方式才能正確解析資料的內容 常用於原生的 form 表單提交 3 multipart for...

JavaScript四種建立物件的方法

var colo document.getelementbyid colors innerhtml colo.blue 訪問物件屬性 訪問物件方法 document.getelementbyid colors innerhtml colo.black var colo new object colo...