JS面向对象-继承篇(一)

93 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情

通过原型链实现继承

首先创建一个父类:公共属性与方法

function Boy() {
  this.name = "我妻善逸"
  this.friends = []
}

Boy.prototype.eating = function() {
  console.log(this.name + " eating~")
}

image.png

创建一个子类:特殊属性和方法

function Life() {
  this.job = "鬼杀队剑士"
}

创建一个a对象,并且讲life的原型指向a对象

var a = new Boy()
Life.prototype = a

image.png

var boy1 = new life()

console.log(boy1.name)//我妻善逸
boy1.eating()//我妻善逸 eating~

image.png 现在我们完成了通过原型链的方式实现继承

原型链方式实现的继承存在的弊端

第一个弊端

当我们直接打印创建的出的boy1对象时会出现一些问题

console.log(boy1)//Boy {job:鬼杀队剑士}

boy1从父类继承的属性是看不到的

第二个弊端

如果现在创建两个对象

var boy1 = new life()
var boy2 = new life()

在boy1 对象中friends上面添加数据

boy1.friends.push("嘴平伊之助")
console.log(boy1.friends)//[ '嘴平伊之助' ]
console.log(boy2.friends)//[ '嘴平伊之助' ]

获取从父类继承来的引用值,修改引用值,会导致互相影响

第三个弊端

在前面实现类的过程中没有传递参数(无法个性化传递参数)

如何能解决上述的三个弊端,我们采取一种新的技术constructor stealing(借用构造函数)

通过借用构造函数实现继承

首先创建一个父类:公共属性与方法

function Boy(name,age,friends) {
  this.name = name
  this.age = age
  this.friends = friends
}

Boy.prototype.eating = function() {
  console.log(this.name + " eating~")
}

image.png 创建一个子类:特殊属性和方法

function Life(name, age, friends, job) {
  Boy.call(this, name, age, friends)
  this.job = job
}
var a = new Boy()
Life.prototype = a
var stu = new Life ("我妻善逸", 16,["嘴平伊之助"],"鬼杀队剑士")

Call方法: 调用对象的方法,用另一个对象替换当前对象

image.png

通过借用构造函数实现继承方式存在的弊端

1.Boy函数至少被调用两次; 2.life的原型对象上面会多一些没有必要的属性;