開發十年，就只剩下這套架構體系了！ >>>   

JavaScript之各種繼承方式和優缺點

1. 原型鏈繼承

function Parson(){
    this.name = 'hy'
}
Parson.prototype.getName = function(){
    console.log(this.name)
}

function Child(){

}

Child.prototype = new Parson()

var Child1 = new Parson()

Child1.getName() // hy
 

問題：

1. 引用型別的屬性被所有的例項共享，修改了會影響所有例項

function Parson(){
    this.name = 'hy'
    this.age = [13,15]
}
Parson.prototype.getName = function(){
    console.log(this.name)
}

function Child(){

}

Child.prototype = new Parson()

var Child1 = new Child()
Child1.age.push(16)
console.log(Child1.age) // [ 13, 15, 16 ]

var Child2 = new Child()
console.log(Child2.age) // [ 13, 15, 16 ]


Child1.getName() // hy
Child2.getName() // hy
 

    2. 在建立 Child 的例項時，不能向Parent傳參

2.借用建構函式繼承（經典繼承）

function Parson(){
    this.names = ['hy', 'ycl']
}

function Child(){
    Parson.call(this)
}

var child1 = new Child()

child1.names.push('zz')
console.log(child1.names) // [ 'hy', 'ycl', 'zz' ]

var child2 = new Child()
console.log(child2.names) // [ 'hy', 'ycl' ]
 

優點：

1. 避免了引用型別的屬性被所有例項共享
2. 可以在Child中向Parson傳引數

function Parson(name){
    this.names = name
}

function Child(name){
    Parson.call(this , name)
}

var child1 = new Child('hy')

console.log(child1.names) // hy

var child2 = new Child('ycl')
console.log(child2.names) // ycl

問題

1. 方法都在建構函式中定義，每次建立例項都會建立一遍方法。