第20道JS原理題助你面試一臂之力(必看)本文針對(duì)目前常見(jiàn)的面試題，僅提供了相應(yīng)的核心原理及思路，部分邊界細(xì)節(jié)未處理。后續(xù)會(huì)持續(xù)更新，希望對(duì)你有所幫助。

1.實(shí)現(xiàn)一個(gè)call函數(shù)

//思路：將要改變this指向的方法掛到目標(biāo)this上執(zhí)行并返回

Ftotype.mycall=function(context){

if(typeofthis!=='function'){

thrownewTypeError('notfunciton')

context=context||window

context.fn=this

letarg=[...arguments].slice(1)

letresult=context.fn(...arg)

deletecontext.fn

returnresult

2.實(shí)現(xiàn)一個(gè)apply函數(shù)

//思路：將要改變this指向的方法掛到目標(biāo)this上執(zhí)行并返回

Ftotype.myapply=function(context){

if(typeofthis!=='function'){

thrownewTypeError('notfunciton')

context=context||window

context.fn=this

letresult

if(arguments[1]){

result=context.fn(...arguments[1])

}else{

result=context.fn()

deletecontext.fn

returnresult

3.實(shí)現(xiàn)一個(gè)bind函數(shù)

//思路：類似call，但返回的是函數(shù)

Ftotype.mybind=function(context){

if(typeofthis!=='function'){

thrownewTypeError('Error')

let_this=this

letarg=[...arguments].slice(1)

returnfunctionF(){

//處理函數(shù)使用new的情況

if(thisinstanceofF){

returnnew_this(...arg,...arguments)

}else{

return_this.apply(context,arg.concat(...arguments))

4.instanceof的原理

//思路：右邊變量的原型存在于左邊變量的原型鏈上

functioninstanceOf(left,right){

letleftValue=left.__proto__

letrightValue=totype

while(true){

if(leftValue===null){

returnfalse

if(leftValue===rightValue){

returntrue

leftValue=leftValue.__proto__

5.Object.create的基本實(shí)現(xiàn)原理

//思路：將傳入的對(duì)象作為原型

functioncreate(obj){

functionF(){}

F.prototype=obj

returnnewF()

6.new本質(zhì)

functionmyNew(fun){

returnfunction(){

//創(chuàng)建一個(gè)新對(duì)象且將其隱式原型指向構(gòu)造函數(shù)原型

letobj={

__proto__:totype

//執(zhí)行構(gòu)造函數(shù)

fun.call(obj,...arguments)

//返回該對(duì)象

returnobj

functionperson(name,age){

=name

this.age=age

letobj=myNew(person)('chen',18)//{name:"chen",age:18}

7.實(shí)現(xiàn)一個(gè)基本的Promise

//未添加異步處理等其他邊界情況

//①自動(dòng)執(zhí)行函數(shù)，②三個(gè)狀態(tài)，③then

classPromise{

constructor(fn){

//三個(gè)狀態(tài)

this.state='pending'

this.value=undefined

this.reason=undefined

letresolve=value={

if(this.state==='pending'){

this.state='fulfilled'

this.value=value

letreject=value={

if(this.state==='pending'){

this.state='rejected'

this.reason=value

//自動(dòng)執(zhí)行函數(shù)

try{

fn(resolve,reject)

}catch(e){

reject(e)

//then

then(onFulfilled,onRejected){

switch(this.state){

case'fulfilled':

onFulfilled()

break

case'rejected':

onRejected()

break

default:

8.實(shí)現(xiàn)淺拷貝

//1....實(shí)現(xiàn)

letcopy1={...{x:1}}

//2.Object.assign實(shí)現(xiàn)

letcopy2=Object.assign({},{x:1})

9.實(shí)現(xiàn)一個(gè)基本的深拷貝

//1.JOSN.stringify()/JSON.parse()

letobj={a:1,b:{x:3}}

JSON.parse(JSON.stringify(obj))

//2.遞歸拷貝

functiondeepClone(obj){

letcopy=objinstanceofArray[]:{}

for(letiinobj){

if(obj.hasOwnProperty(i)){

copy[i]=typeofobj[i]==='object'deepClone(obj[i]):obj[i]

returncopy

10.使用setTimeout模擬setInterval

//可避免setInterval因執(zhí)行時(shí)間導(dǎo)致的間隔執(zhí)行時(shí)間不一致

setTimeout(function(){

//dosomething

setTimeout(arguments.callee,500)

},500)

11.js實(shí)現(xiàn)一個(gè)繼承方法

//借用構(gòu)造函數(shù)繼承實(shí)例屬性

functionChild(){

Parent.call(this)

//寄生繼承原型屬性

(function(){

letSuper=function(){}

Stotype=Ptotype

Ctotype=newSuper()

12.實(shí)現(xiàn)一個(gè)基本的EventBus

//組件通信，一個(gè)觸發(fā)與監(jiān)聽(tīng)的過(guò)程

classEventEmitter{

constructor(){

//存儲(chǔ)事件

this.events=this.events||newMap()

//監(jiān)聽(tīng)事件

addListener(type,fn){

if(!this.events.get(type)){

this.events.set(type,fn)

//觸發(fā)事件

emit(type){

lethandle=this.events.get(type)

handle.apply(this,[...arguments].slice(1))

//測(cè)試

letemitter=newEventEmitter()

//監(jiān)聽(tīng)事件

emitter.addListener('ages',age={

console.log(age)

//觸發(fā)事件

emitter.emit('ages',18)//18

13.實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定

letobj={}

letinput=document.getElementById('input')

letspan=document.getElementById('span')

//數(shù)據(jù)劫持

Object.defineProperty(obj,'text',{

configurable:true,

enumerable:true,

get(){

console.log('獲取數(shù)據(jù)了')

returnobj['text']

set(newVal){

console.log('數(shù)據(jù)更新了')

input.value=newVal

span.innerHTML=newVal

//輸入監(jiān)聽(tīng)

input.addEventListener('keyup',function(e){

obj.text=e.target.value

完整實(shí)現(xiàn)可前往之前寫(xiě)的：這應(yīng)該是最詳細(xì)的響應(yīng)式系統(tǒng)講解了

14.實(shí)現(xiàn)一個(gè)簡(jiǎn)單路由

//hash路由

classRoute{

constructor(){

//路由存儲(chǔ)對(duì)象

this.routes={}

//當(dāng)前hash

this.currentHash=''

//綁定this，避免監(jiān)聽(tīng)時(shí)this指向改變

this.freshRoute=this.freshRoute.bind(this)

//監(jiān)聽(tīng)

window.addEventListener('load',this.freshRoute,false)

window.addEventListener('hashchange',this.freshRoute,false)

//存儲(chǔ)

storeRoute(path,cb){

this.routes[path]=cb||function(){}

//更新

freshRoute(){

this.currentHash=location.hash.slice(1)||'/'

this.routes[this.currentHash]()

15.實(shí)現(xiàn)懶加載

liimgsrc="./imgs/default.png"data="./imgs/1.png"alt=""/li

liimgsrc="./imgs/default.png"data="./imgs/2.png"alt=""/li

liimgsrc="./imgs/default.png"data="./imgs/3.png"alt=""/li

liimgsrc="./imgs/default.png"data="./imgs/4.png"alt=""/li

liimgsrc="./imgs/default.png"data="./imgs/5.png"alt=""/li

liimgsrc="./imgs/default.png"data="./imgs/6.png"alt=""