這篇文章主要介紹了javascript原型和繼承的面試題示例，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、桐柏網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁(yè)面制作、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為桐柏等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
本文從以下幾個(gè)方面著手
其實(shí)我也不知道咋回答這問(wèn)題，我只知道，面試官問(wèn)這個(gè)后，就表示他要問(wèn)一堆繼承的問(wèn)題了。下面是引用周老師的一段說(shuō)辭。
"面向?qū)ο笫且环N編程思想 與面向過(guò)程是對(duì)應(yīng)的 一般的語(yǔ)言都是面向?qū)ο蟮?js本身也是基于面向?qū)ο髽?gòu)建出來(lái)的 ，例如 js本身就有很多內(nèi)置類，Promise就是，可以new Promise來(lái)創(chuàng)建一個(gè)實(shí)例，來(lái)管理異步編程 。 還有vue 也是，平時(shí)都是創(chuàng)建vue的實(shí)例啊。"
1.對(duì)象字面量
重慶分公司
重慶分公司
var o1 = {name: 'o1'}
var o2 = new Object({name: 'o2'})2.通過(guò)構(gòu)造函數(shù)
var M = function(name){
this.name = name
}
var o3 = new M('o3')3.Object.create
var o4 = Object.create(p)
記憶總是有規(guī)律的，如高中時(shí)期學(xué)的三角函數(shù)，需要背公式很多，強(qiáng)行去背全部的公式是容易混亂的。不過(guò)如果把核心的幾點(diǎn)背牢，其余的公式只需要稍加推導(dǎo)即可。關(guān)于原型鏈也是一樣，有幾點(diǎn)在最開(kāi)始就記住的話，后面就不會(huì)亂了。原型鏈中關(guān)鍵概念：構(gòu)造函數(shù)，實(shí)例， constructor，__ proto__，prototype, 首先要記住他們的關(guān)系
上面3點(diǎn)請(qǐng)先牢記，后面所總結(jié)的完整繼承和這有緊密的關(guān)聯(lián)
其實(shí) 構(gòu)造函數(shù)， 實(shí)例， constructor， __ proto__， prototype的關(guān)系已經(jīng)在上面的例子和3點(diǎn)介紹中介紹完了。不妨再回顧一下
構(gòu)造函數(shù)即普通函數(shù)，只不過(guò)前邊有 new 關(guān)鍵字
通過(guò) new加 構(gòu)造函數(shù)，生成的對(duì)象即為實(shí)例。
以上面生成o3實(shí)例為例子
o3.__proto__ === M.prototype //true o3.prototype //undefined o3.__proto__ === M.prototype //true
o3實(shí)例本身并無(wú)constructor，不過(guò)會(huì)借助原型鏈向上查找，即，
o3.constructor === M.prototype.constructor // true o3.constructor === M //true
小結(jié) 理清這幾個(gè)關(guān)鍵詞的關(guān)系后，原型鏈就明朗很多了
instanceof 的原理是什么呢？ 先來(lái)看一下使用
[] instanceof Array // true
即左邊是對(duì)象，右邊是類型，instanceof 就是要判斷右邊類型的prototype，是否在左邊實(shí)例的原型鏈上,如下例子所示
[].__proto__ === Array.prototype //true Array.prototype.__proto__ === Object.prototype //true Object.prototype__proto__ //null
那么依據(jù)這個(gè)思想來(lái)實(shí)現(xiàn)一下instanceof吧，一定會(huì)印象更加深刻
function myInstanceof2(left, right){
if(left === null || left === undefined){
return false
}
if(right.prototype === left.__proto__) {
return true
}
left = left.__proto__
return myInstanceof2(left, right)
}
console.log(myInstanceof2([], Array))new的過(guò)程發(fā)生了什么？
生成空對(duì)象
這個(gè)空對(duì)象的proto賦值為構(gòu)造函數(shù)的prototype
綁定this指向
返回這個(gè)對(duì)象
// 構(gòu)造函數(shù)
function M(name){
this.name = name
}
// 原生new
var obj = new M('123')
// 模擬實(shí)現(xiàn)
function create() {
// 生成空對(duì)象
let obj = {}
// 拿到傳進(jìn)來(lái)參數(shù)的第一項(xiàng)，并改變參數(shù)類數(shù)組
let Con = [].shift.call(arguments)
// 對(duì)空對(duì)象的原型指向賦值
obj.__proto__ = Con.prototype
// 綁定this
//（對(duì)應(yīng)下面使用來(lái)說(shuō)明：Con是參數(shù)第一項(xiàng)M，
// arguments是參數(shù)['123'],
// 就是 M方法執(zhí)行，參數(shù)是'123'，執(zhí)行這個(gè)函數(shù)的this是obj）
let result = Con.apply(obj, arguments)
return result instanceof Object ? result : obj
}
var testObj = create(M, '123')
console.log('testObj', testObj)一步一步來(lái)，從簡(jiǎn)到繁，更能直觀發(fā)現(xiàn)繼承的原理與缺點(diǎn)
構(gòu)造方法方式 核心 Parent1.call(this)
// 構(gòu)造方法方式
function Parent1(){
this.name = 'Parent1'
}
Parent1.prototype.say = function () {
alert('say')
}
function Child1(){
Parent1.call(this)
this.type = 'type'
}
var c1 = new Child1()
c1.say() //報(bào)錯(cuò)缺點(diǎn)： 只能繼承父類構(gòu)造函數(shù)內(nèi)部屬性，無(wú)法繼承父類構(gòu)造函數(shù)原型對(duì)象上屬性
思考： 為什么 call 實(shí)現(xiàn)了繼承，call本質(zhì)是什么？
只借助原型繼承 核心 Child2.prototype = new Parent2()
// 原型
function Parent2(){
this.name = 'Parent2'
this.arr = [1,2]
}
Parent2.prototype.say = function () {
alert('say')
}
function Child2(){
// Parent2.call(this)
this.type = 'type'
}
Child2.prototype = new Parent2()
var c21 = new Child2()
var c22 = new Child2()
c21.say()
c21.arr.push('9')
console.log('c21.arr : ', c21.arr)
console.log('c22.arr : ', c22.arr)缺點(diǎn)： c21.arr 與c22.arr對(duì)應(yīng)的是同一個(gè)引用
思考：為什么這么寫(xiě)是同一個(gè)引用？
把上面兩個(gè)繼承方式的優(yōu)點(diǎn)合并起來(lái)，缺點(diǎn)都拋棄掉
function Parent3(){
this.name = 'Parent3'
this.arr = [1,2]
}
Parent3.prototype.say = function () {
alert('say')
}
function Child3(){
Parent3.call(this)
this.type = 'type'
}
Child3.prototype = new Parent3()
var c31 = new Child3()
var c32 = new Child3()
c31.say()
c31.arr.push('9')
console.log('c31.arr : ', c31.arr)
console.log('c31.arr : ', c32.arr)思考： 這么寫(xiě)就沒(méi)有問(wèn)題了嗎？
答 ： 生成一個(gè)實(shí)例要執(zhí)行 Parent3.call(this) ， new Child3()，也就是Parent3執(zhí)行了兩遍。
改變上例子 的
Child3.prototype = new Parent3()
為
Child3.prototype = Parent3.prototype
缺點(diǎn) ： 很明顯，無(wú)法定義子類構(gòu)造函數(shù)原型私有的方法
組合繼承優(yōu)化3 再次改變上例子 的
Child3.prototype = Parent3.prototype
為
Child3.prototype = Object.create(Parent3.prototype)
問(wèn)題就都解決了。 因?yàn)镺bject.create的原理是：生成一個(gè)對(duì)象，這個(gè)對(duì)象的proto, 指向所傳的參數(shù)。
思考 ：是否還有疏漏？一時(shí)想不起來(lái)的話，可以看下這幾個(gè)結(jié)果
console.log(c31 instanceof Child3) // true console.log(c31 instanceof Parent3) // true console.log(c31.constructor === Child3) // false console.log(c31.constructor === Parent3) // true
所以回想起文章開(kāi)頭所說(shuō)的那幾個(gè)需要牢記的點(diǎn)，就需要重新賦值一下子類構(gòu)造函數(shù)的constructor： Child3.prototype.constructor = Child3，完整版如下
function Parent3(){
this.name = 'Parent3'
this.arr = [1,2]
}
Parent3.prototype.say = function () {
alert('say')
}
function Child3(){
Parent3.call(this)
this.type = 'type'
}
Child3.prototype = Object.create(Parent3.prototype)
Child3.prototype.constructor = Child3
var c31 = new Child3()
var c32 = new Child3()
c31.say()
c31.arr.push('9')
console.log('c31.arr : ', c31.arr)
console.log('c31.arr : ', c32.arr)
console.log('c31 instanceof Child3 : ', c31 instanceof Child3)
console.log('c31 instanceof Parent3 : ', c31 instanceof Parent3)
console.log('c31.constructor === Child3 : ', c31.constructor === Child3)
console.log('c31.constructor === Parent3 : ', c31.constructor === Parent3)5 es6的繼承
class Parent{
constructor(name) {
this.name = name
}
getName(){
return this.name
}
}
class Child{
constructor(age) {
this.age = age
}
getAge(){
return this.age
}
}es6繼承記住幾個(gè)注意事項(xiàng)吧
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享javascript原型和繼承的面試題示例內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
