js的7種繼承方法

function
person()
function
son(
)  son.prototype =
newperson()
son.constructor = son
son.prototype.count =
50var son =
newson()
console.
log(son.name, son.age, son.num)

把子類的prototype指向父級的例項，也就是原型鏈繼承

簡單明瞭，父級新增的屬性和方法子級都能夠訪問的到

就是多個子類共享乙個原型的屬性和方法，無法實現多個繼承

// 建構函式繼承
// 建構函式繼承
function
person()
person.prototype.count =
50function
son(
)var son =
newson()
console.
log(son.name)
// zhangsan
console.
log(son.age)
// 23
console.
log(son.count)
// undefined

建構函式繼承就是在子級建構函式裡面執行父級的建構函式並且改變this的指向

子級直接繼承父級建構函式的屬性和方法

子類無法繼承父類原型鏈上的屬性和方法

// 混合繼承
function
person()
person.prototype.count =
50function
son(
)  son.prototype =
newperson()
var son =
newson()
console.
log(son.name)
// zhangsan
console.
log(son.age)
// 23
console.
log(son.count)
// 50

混合繼承就是集合原型鏈繼承和建構函式繼承兩者的優點集合在一起，集二者優點與一身

集合了原型鏈繼承和建構函式繼承的優點集合在一起

子類會擁有兩個原型鏈屬性，不過可以忽略不計；

臨時建立乙個建構函式，利用臨時建構函式的原型，在此基礎上例項化物件；

// 原型是繼承；
function
object
(o)f
.prototype = o;
return
newf()
;}var person =
var son =
object
(person)
son.name =
'lisi'
son.friend.
push
('444'
)  console.
log(son.name)
// lisi
console.
log(son.friend)
// '111', '222', '333', '444'
var son2 =
object
(person)
console.
log(son2.name)
// zhangsan
console.
log(son2.friend)
// '111', '222', '333', '444'

原型的引用型別會在各例項化物件中共享，一旦修改其中乙個就會汙染其他例項；

es5通過object.create()方法規範了原型式繼承，可以接受兩個引數，乙個是用作新物件原型的物件和乙個可選的為新物件定義額外屬性的物件，行為相同，基本用法和上面的object一樣，除了object不能接受第二個引數以外

var person =
var anotherperson = object.
create
(person)
console.
log(anotherperson.friends)
// "shelby", "court"

寄生式繼承的思路與寄生建構函式和工廠模式類似，即建立乙個僅用於封裝繼承過程的函式

function
createsuper
(o)return clone
}var person =
var anotherpeson =
createsuper
(person)
anotherpeson.fn(
)// hello

基於person返回了乙個新物件anotherpeson，新物件不僅擁有了person的屬性和方法，還有自己的fn方法

使用寄生式組合模式相當於規避了混合繼承裡面重複父類例項的屬性和方法在子類例項和原型裡面重複出現；

基本思路是不必為了子類的原型而呼叫父類的建構函式，我們需要的知識父類原型的乙個副本；

核心概念就是利用寄生式繼承父類的原型，再把結果指定給子類的原型；

// 寄生式繼承的方法；
function
createsuper
(son, person)
function
person()
person.prototype.count =
50function
son(
)createsuper
(son, person)
var son =
newson()
console.
log(son.name)
// zhangsan
console.
log(son.age)
// 23
console.
log(son.num)
// 18
console.
log(son.count)
// 50
function
son2()
createsuper
(son2, person)
var son2 =
newson2()
son2.count =
80  console.
log(son.count)
// 50
console.
log(son2.count)
// 80

在createsuper()函式中所做的事:

在createsuper函式中用到了es5的object.create()方法，將超型別的原型指定為乙個臨時的空建構函式的原型，並返回建構函式的例項。

此時由於建構函式內部為空（不像person裡面有例項屬性），所以返回的例項也不會自帶例項屬性，這很重要！因為後面用它作為son 的原型時，就不會產生無用的原型屬性了，借調建構函式也就不用進行所謂的「重寫」了。

然後為這個物件重新指定constructor為son ，並將其賦值給son 的原型。這樣，就達到了將超型別建構函式的例項作為子型別原型的目的，同時沒有一些從person繼承過來的無用原型屬性。

繼承了混合繼承的優點，避免了出現重複多個原型鏈屬性

感覺沒什麼缺點，如果非說有缺點，個人感覺就是不好理解

// es6 class類的繼承
class
personfn(
)}// let person = new person('zhangsan', 23)
// person.fn()
class
sonextends
person
fn1()}
var son =
newson
('小花',18
,50)var son2 =
newson
('小紅',20
)  son.fn(
)// 小花
son.
fn1(
)// 小花 50
son2.fn(
)// 小紅
son2.
fn1(
)// 小紅 undefined

就是相容性

js的7種繼承方法

js繼承的7種方式

js 中的五種繼承方法

js 中的五種繼承方法

js的7種繼承方法

js繼承的7種方式

js 中的五種繼承方法

js 中的五種繼承方法

相關推薦