js各種繼承方式彙總

2022-01-31 08:29:11 字數 3561 閱讀 8923

首先定義乙個父類:

function animal(name) 

}animal.prototype.eat = function (food)

特點:

1、子類的原型指向父類的例項

缺點:1、無法多繼承

2、無法向父類的構造傳參

3、來自原型物件的引用屬性是所有例項共享的

function cat() 

cat.prototype = new animal()

cat.prototype.name = '貓'

// test code

const cat = new cat()

console.log(cat.name) // 貓

cat.eat('魚') // 貓正在吃:魚

cat.sleep() // 貓正在睡覺!

console.log(cat instanceof cat) // true

console.log(cat instanceof animal) // true

function dog(name) 

// test code

const dog = new dog()

console.log(dog.name) // 狗

dog.sleep() // 狗正在睡覺!

// dog.eat('粑粑') 不能繼承原型上的eat

console.log(dog instanceof dog) // true

console.log(dog instanceof animal) // false,等於是複製父類的例項屬性給子類,沒用到原型

特點:

1、子類的構造中返回父類的例項

優點:1、可以繼承原型上的屬性或方法

缺點:1、例項為父類例項,而非子類例項

2、不能實現多繼承

function pig(name) 

// test code

const pig = new pig()

console.log(pig.name) // 豬

pig.sleep() // 豬正在睡覺!

pig.eat('菠菜葉子') // 豬正在吃:菠菜葉子

console.log(pig instanceof pig) // false

console.log(pig instanceof animal) // true

特點:

1、子類的構造中強制拷貝父類原型上的屬性或方法

優點:1、可以多重繼承

缺點:1、效率較低,記憶體占用高

2、不能繼承父類不可列舉的屬性(不能用for in遍歷的)

function rabbit(name) 

rabbit.prototype.name = name || '兔子'

}// test code

const rabbit = new rabbit('傻兔子')

console.log(rabbit.name) // 傻兔子

rabbit.sleep() // 傻兔子正在睡覺!

rabbit.eat('胡蘿蔔') // 傻兔子正在吃:胡蘿蔔

console.log(rabbit instanceof rabbit) // true

console.log(rabbit instanceof animal) // false

同構造繼承

function mouse(name) 

// test code

const mouse = new mouse('老鼠')

console.log(mouse.name) // 老鼠

mouse.sleep() // 老鼠正在睡覺!

// mouse.eat('大公尺') // 繼承不到原型上的屬性

console.log(mouse instanceof mouse) // true

console.log(mouse instanceof animal) // false

特點:

1、組合構造繼承和原型鏈繼承

優點:1、可以繼承例項屬性/方法,也可以繼承原型屬性/方法

2、既是子類的例項,也是父類的例項

3、不存在引用屬性共享問題

4、可傳參

5、函式可復用

缺點:1、呼叫了兩次父類建構函式

function duck(name) 

duck.prototype = new animal()

duck.prototype.say = function ()

// test code

const duck = new duck('鴨子')

console.log(duck.name) // 鴨子

duck.sleep() // 鴨子正在睡覺!

duck.eat('蟲子') // 鴨子正在吃:蟲子

console.log(duck instanceof duck) // true

console.log(duck instanceof animal) // true

特點:

1、使用中間函式物件避免父類構造被兩次呼叫的問題

優點:1、完美

缺點:1、寫起來費勁

function snake(name) 

const super = function ()

super.prototype = animal.prototype

snake.prototype = new super()

// test code

const snake = new snake('蛇')

console.log(snake.name) // 蛇

snake.sleep() // 蛇正在睡覺!

snake.eat('小鳥') // 蛇正在吃:小鳥

console.log(snake instanceof snake) // true

console.log(snake instanceof animal) // true

class point 

tostring()

static hello()

}class colorpoint extends point

tostring()

}// test code

const cp = new colorpoint(25, 8, 'green')

console.log(cp instanceof colorpoint) // true

console.log(cp instanceof point) // true

colorpoint.hello() // hello world!

JS 繼承方式

原型鏈繼承 所謂原型鏈繼承,就是根據js原型鏈的特性而實現的一種繼承方式。原型鏈特性 每個函式都自帶有乙個prototype屬性指向該函式對應的原型物件,而原型物件又會有乙個屬性指向該函式。而通過new 建構函式出來的例項,會有乙個屬性指向原型物件。1 原型鏈繼承 2 function supert...

js 繼承方式

父類 定義乙個動物類 function animal name 原型方法 animal.prototype.eat function food 1.原型繼承 核心 將父類的例項作為子類的原型 function cat cat.prototype new animal cat.prototype.na...

js繼承方式

一.原型鏈繼承 function parent function son son.prototype new parent 原理 子類的原型物件指向父類的例項。缺點 1.子類例項共享子類原型物件的引用屬性。2.建立子類的時候不能向父類建構函式傳參。二.建構函式繼承 function parent f...