前端

JS继承的实现方式

2019-08-20聚力创意

// call 继承

function Parent() {
  this.x = 100
  this.sayHello = function() {
    console.log('hello')
  }
}
Parent.prototype.getX = function() {
 console.log(this.x)
}
function Child() {
  Parent.call(this) // this -> n , 让构造函数 Paren1 执行把 Parent 中的 this 指向实例 n
  this.y = 200
} 
var n = new Child
n.x // 100
n.y // 200
n.sayHello() // hello
n.getX // undefined

call继承继承父类私有的属性和方法作为子类私有的属性和方法,缺点:无法继承父类原型对象prototype上的属性和方法

// 原型继承

function Parent(){
  this.x = 100
  this.obj = {name: 'juli'}
}
Parent.prototype.getX = function() {
  console.log(this.x)
}
function Child() {
  this.y = 200
}
Child.prototype = new Parent
var n1 = new Child
var n2 = new Child
n1.x // 100
n1.y // 200
n2.x // 100
n2.y // 200
n1.obj.name = 'julipay'
n2.obj.name // julipay

原型继承继承父类私有、公有属性和方法作为子类公有的属性和方法(原型__proto__上,父类私有和公有在不同级),缺点:因为原型上的属性和方法是公用的,如果原型上有引用数据类型(对象,数组)的属性值,不同实例操作的是同一个属性,修改原型对象上的属性值,会影响所有实例原型上的该属性值,基本数据类型的属性值不会受此影响,

// 混合模式继承,原型继承 + call继承

function Parent(){
  this.x = 100
  this.obj = {name: 'juli'}
}
Parent.prototype.getX = function() {
  console.log(this.x)
}
function Child(){
  Parent.call(this)
}
Child.prototype = new Parent
Child.prototype.constructor = Child

var n1 = new Child
var n2 = new Child
n1.obj.name = 'ju'
n2.obj.name // julipay

混合模式继承继承父类私有的属性和方法作为子类私有的属性和方法,同时父类私有、公有属性和方法在子类原型__proto__上也有一份,缺点:子类私有和原型上都有父类私有的方法,重复继承了

// 混合模式继承优化1

function Parent(){
  this.x = 100
  this.obj = {name: 'juli'}
}
Parent.prototype.getX = function() {
  console.log(this.x)
}
function Child(){
  Parent.call(this)
}
Child.prototype = Parent.prototype

var n1 = new Child
var n2 = new Child

console.log(n1 instanceof Child,n1 instanceof Parent) // true true
console.log(n1.constructor) // Parent

混合模式继承优化1解决了上述方法重复继承的问题,缺点是无法确定实例是父类的还是子类的,子类没有自己的constructor,指向父类

// 混合模式继承优化2

function Parent(){
  this.x = 100
  this.obj = {name: 'juli'}
}
Parent.prototype.getX = function() {
  console.log(this.x)
}
function Child(){
  Parent.call(this)
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

var n1 = new Child
var n2 = new Child

console.log(n1 instanceof Child,n1 instanceof Parent) // true true
console.log(n1.constructor) // Child

混合模式继承优化2把子类的原型对象上的原型对象指向父类的原型对象,在父类和子类的原型对象中间多加一层,同时处理constructor的正确指向

蜀ICP备17044229号