【每日一题】(28题)面试官:原型链与构造函数结合方法继承与原型式继承的区别？2020.12.23 立的 flag，每日

关注「松宝写代码」，精选好文，每日一题

作者：saucxs ｜ songEagle

2020，实「鼠」不易

2021，「牛」转乾坤

风劲潮涌当扬帆，任重道远须奋蹄！

一、前言

2020.12.23 立的 flag，每日一题，题目类型不限制，涉及到JavaScript，Node，Vue，React，浏览器，http，算法等领域。

本文是：【每日一题】(28题)面试官:原型链与构造函数结合方法继承与原型式继承的区别？

每日一题

二、继承的目的

继承的目的：将父级【Super】的属性变成自己的属性，且实例之间不会互相影响；共用父级原型【Super.prototype】中的方法。

原型链与构造函数结合方法继承
原型式继承

三、原型链与构造函数结合方法继承

1、原型链与构造函数结合方法继承

1）原型链的方式直接实现继承

function Super () {
  this.type = 'super'
  this.colors = ['red', 'blue', 'black']
}
function Child (name) {
  this.type = 'child'
  this.name = name
}
Child.prototype = new Super()
Child.prototype.constructor = Child
var child1 = new Child('cat')
var child2 = new Child('dog')

// 问题一：引用类型值的原型属性会被所有实例共享，所以当其中一个修改时，其他实例也会接收到变化
child2.colors.push('pink')
console.log(child1.colors) // [ 'red', 'blue', 'black', 'pink' ]
console.log(child2.colors) // [ 'red', 'blue', 'black', 'pink' ]

// 问题二：没法向父级构造函数【Super】传递参数

2）构造函数的方式实现继承

使用call或者apply的方式获取到父级元素的属性和方法。

function Super () {
  this.type = 'super'
  this.colors = ['red', 'blue', 'black']
}
function Child (name) {
  Super.call(this)
  this.type = 'child'
  this.name = name
}
var child = new Child('cat')

// 优势一：call或者apply的方式，可以传递参数，可以解决原型链中无法传递参数的问题
// 问题一：只能在父级构造函数中定义方法，所以函数无法复用
// 问题二：不能继承原型中的方法

3）使用原型链与构造函数相结合的方式实现继承

function Super () {
  this.type = 'super'
  this.colors = ['red', 'blue', 'black']
}
function Child (name) {
  Super.call(this)
  this.type = 'child'
  this.name = name
}
Child.prototype = new Super()
Child.prototype.constructor = Child
var child1 = new Child('cat')
var child2 = new Child('dog')

child2.colors.push('pink')
console.log(child1.colors) // [ 'red', 'blue', 'black' ]
console.log(child2.colors) // [ 'red', 'blue', 'black', 'pink' ]

2、原型式继承Object.create()

ES6中，Class使用extends关键字继承的原理

通过Object.create()可以继承到Super.prototype的方法，在使用call或者apply获取到Super的属性

function Super () {
  this.type = 'super'
  this.colors = ['red', 'blue', 'black']
}
function Child (name) {
  Super.call(this)
  this.type = 'child'
  this.name = 'name'
}
Child.prototype = Object.create(Super.prototype)
Child.prototype.constructor = Child
var child = new Child('cat')

注意： 其中

Child.prototype = Object.create(Super.prototype)```

可以使用以下方法代替：

Object.setPrototypeOf(Child.prototype, Super.prototype)
Child.prototype.__proto__ = Super.prototype

Object.create() 接收两个参数：新对象原型的对象；[可选]新对象定义额外属性的对象

当只传递一个参数时，Object.create()相当于做了以下事情：

function object (o) {
  function F () {}
  F.prototype = o
  return new F()
}

第二个参数为【新对象定义额外属性的对象】，对象中的每一个属性都是通过自己的描述符定义的，与Object.defineProperties()的第二个参数格式相同。且以这种方式指定的属性会覆盖原型对象上的原始属性。

如：

var person = {
  name: 'test',
  age: 20
}

var newPerson = Object.create(person, {
  name: {
    value: 'newName'
  }
})

往期「每日一题」

6、算法

7、Node

第 23 道【每日一题】(23题)面试官问：详细描述事件循环Event Loop？

8、Http

第 1 道「一道面试题是如何引发深层次的灵魂拷问？」

谢谢支持

1、文章喜欢的话可以「分享，点赞，在看」三连哦。

2、作者昵称：saucxs，songEagle，松宝写代码。「松宝写代码」公众号作者，每日一题，实验室等。一个爱好折腾，致力于全栈，正在努力成长的字节跳动工程师，星辰大海，未来可期。内推字节跳动各个部门各个岗位。

3、关注「松宝写代码」，是获取开发知识体系构建，精选文章，项目实战，实验室，每日一道面试题，进阶学习，思考职业发展，涉及到JavaScript，Node，Vue，React，浏览器，http，算法，端相关，小程序等领域，希望可以帮助到你，我们一起成长～

【每日一题】(28题)面试官:原型链与构造函数结合方法继承与原型式继承的区别？

一、前言

二、继承的目的

三、原型链与构造函数结合方法继承

1、原型链与构造函数结合方法继承

2、原型式继承Object.create()

往期「每日一题」

1、JavaScript && ES6

2、浏览器

3、Vue

4、React

5、HTML5

6、算法

7、Node

8、Http

谢谢支持