JS下的面向对象

JavaScript,前端 2018-07-03

借助构造函数

// 父类
function Parent () {
  this.name = 'parent'
}

// 子类
function Child () {
  Parent.call(this)
  this.age = '20'
}

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20

借助原型链

// 父类
function Parent () {
  this.name = 'parent'
}

// 父类原型上的方法
Parent.prototype.say = function () {
  console.log('say hello')
}

// 子类
function Child () {
  this.age = '20'
}

// 修改 Child 的原型
Child.prototype = new Parent()

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20
console.log(obj.say) // 打印出 say 函数

组合形式 1

// 父类
function Parent () {
  this.name = 'parent'
}

// 父类原型上的方法
Parent.prototype.say = function () {
  console.log('say hello')
}

// 子类
function Child () {
  Parent.call(this)
  this.age = '20'
}

// 修改 Child 的原型
Child.prototype = Parent.prototype

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20
console.log(obj.say) // 打印出 say 函数
console.log(obj.constructor) // Parent,我们希望的是 Child

组合形式 2

// 父类
function Parent () {
  this.name = 'parent'
}

// 父类原型上的方法
Parent.prototype.say = function () {
  console.log('say hello')
}

// 子类
function Child () {
  Parent.call(this)
  this.age = '20'
}

// 修改 Child 的原型
Child.prototype = Object.create(Parent.prototype)
// 修正 constructor 指向
Child.prototype.constructor = Child

var obj = new Child()
console.log(obj.name, obj.age) // parent, 20
console.log(obj.say) // 打印出 say 函数
console.log(obj.constructor) // Child


本文由 阿涛 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论