【每日一題】(28題)面試官:原型鏈與構(gòu)造函數(shù)結(jié)合方法繼承與原型式繼承的區(qū)別？
關(guān)注「松寶寫代碼」，精選好文，每日一題
作者：saucxs ｜ songEagle
2020，實(shí)「鼠」不易
2021，「?！罐D(zhuǎn)乾坤
風(fēng)勁潮涌當(dāng)揚(yáng)帆，任重道遠(yuǎn)須奮蹄！
一、前言
2020.12.23 立的 flag，每日一題，題目類型不限制，涉及到JavaScript，Node，Vue，React，瀏覽器，http，算法等領(lǐng)域。
本文是：【每日一題】(28題)面試官:原型鏈與構(gòu)造函數(shù)結(jié)合方法繼承與原型式繼承的區(qū)別？
[圖片上傳失敗...(image-de320e-1611071694218)]
二、繼承的目的
繼承的目的：將父級(jí)【Super】的屬性變成自己的屬性，且實(shí)例之間不會(huì)互相影響；共用父級(jí)原型【Super.prototype】中的方法。
三、原型鏈與構(gòu)造函數(shù)結(jié)合方法繼承
<a name="prototype">1、原型鏈與構(gòu)造函數(shù)結(jié)合方法繼承</a>
1）原型鏈的方式直接實(shí)現(xiàn)繼承
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')
// 問題一：引用類型值的原型屬性會(huì)被所有實(shí)例共享，所以當(dāng)其中一個(gè)修改時(shí)，其他實(shí)例也會(huì)接收到變化
child2.colors.push('pink')
console.log(child1.colors) // [ 'red', 'blue', 'black', 'pink' ]
console.log(child2.colors) // [ 'red', 'blue', 'black', 'pink' ]
// 問題二：沒法向父級(jí)構(gòu)造函數(shù)【Super】傳遞參數(shù)
2）構(gòu)造函數(shù)的方式實(shí)現(xiàn)繼承
使用call或者apply的方式獲取到父級(jí)元素的屬性和方法。
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')
// 優(yōu)勢(shì)一：call或者apply的方式，可以傳遞參數(shù)，可以解決原型鏈中無法傳遞參數(shù)的問題
// 問題一：只能在父級(jí)構(gòu)造函數(shù)中定義方法，所以函數(shù)無法復(fù)用
// 問題二：不能繼承原型中的方法
3）使用原型鏈與構(gòu)造函數(shù)相結(jié)合的方式實(shí)現(xiàn)繼承
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' ]
<a name="create">2、原型式繼承Object.create()</a>
ES6中，Class使用extends關(guān)鍵字繼承的原理
通過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()
接收兩個(gè)參數(shù)：新對(duì)象原型的對(duì)象；[可選]新對(duì)象定義額外屬性的對(duì)象
當(dāng)只傳遞一個(gè)參數(shù)時(shí)，Object.create()相當(dāng)于做了以下事情：
function object (o) {
function F () {}
F.prototype = o
return new F()
}
第二個(gè)參數(shù)為【新對(duì)象定義額外屬性的對(duì)象】，對(duì)象中的每一個(gè)屬性都是通過自己的描述符定義的，與Object.defineProperties()的第二個(gè)參數(shù)格式相同。且以這種方式指定的屬性會(huì)覆蓋原型對(duì)象上的原始屬性。
如：
var person = {
name: 'test',
age: 20
}
var newPerson = Object.create(person, {
name: {
value: 'newName'
}
})
謝謝支持
1、文章喜歡的話可以「分享，點(diǎn)贊，在看」三連哦。
2、作者昵稱：saucxs，songEagle，松寶寫代碼?！杆蓪殞懘a」公眾號(hào)作者，每日一題，實(shí)驗(yàn)室等。一個(gè)愛好折騰，致力于全棧，正在努力成長(zhǎng)的字節(jié)跳動(dòng)工程師，星辰大海，未來可期。內(nèi)推字節(jié)跳動(dòng)各個(gè)部門各個(gè)崗位。
3、長(zhǎng)按下面圖片，關(guān)注「松寶寫代碼」，是獲取開發(fā)知識(shí)體系構(gòu)建，精選文章，項(xiàng)目實(shí)戰(zhàn)，實(shí)驗(yàn)室，每日一道面試題，進(jìn)階學(xué)習(xí)，思考職業(yè)發(fā)展，涉及到JavaScript，Node，Vue，React，瀏覽器，http等領(lǐng)域，希望可以幫助到你，我們一起成長(zhǎng)～
[圖片上傳失敗...(image-a631fa-1611071694218)]
字節(jié)內(nèi)推福利
- 回復(fù)「校招」獲取內(nèi)推碼
- 回復(fù)「社招」獲取內(nèi)推
- 回復(fù)「實(shí)習(xí)生」獲取內(nèi)推
后續(xù)會(huì)有更多福利
學(xué)習(xí)資料福利
回復(fù)「算法」獲取算法學(xué)習(xí)資料
往期「每日一題」
1、JavaScript && ES6
第 15 題：【每日一題】面試官問：JS類型判斷有哪幾種方法？
第 3 道「「每日一題」面試官問你對(duì) Promise 的理解？可能是需要你能手動(dòng)實(shí)現(xiàn)各個(gè)特性」
