JavaScript之各種繼承方式和優缺點
阿新 • • 發佈:2019-03-10
JavaScript之各種繼承方式和優缺點
- 原型鏈繼承
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
問題:
- 引用型別的屬性被所有的例項共享,修改了會影響所有例項
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' ]
優點:
- 避免了引用型別的屬性被所有例項共享
- 可以在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
問題
- 方法都在建構函式中定義,每次建立例項都會建立一遍方法。