這三個api都是改變this的指向問題， 在前端開發過程中，會經常使用到這三個api,那么需要我們非常清楚，這三個之間的區別，話不多說，代碼實現

call,apply的區別

這兩個 api 非常相似，只是在傳遞參數上的細微區別

let person1 = {

name:"張三",

age:19,

say(...arg){

console.log(`姓名是：${this.name},年齡是：${this.age},參數：${arg}`)

}

}

let person2 = {

name:"李四",

age:23

}

person1.say.call(person2,1,2,3,4) // 姓名是：李四,年齡是：23,參數：1,2,3,4

person1.say.apply(person2,[1,2,3,4]) // 姓名是：李四,年齡是：23,參數：1,2,3,4

常見的面試題

1、如何將偽數組裝換成真數組

在 js 里面會有很多偽數組的概念，偽數組和真數組的有什么區別

+ 偽數組具 length 屬性，但是，不具備數組的方法，偽數組長度不可變

+ 常見的偽數組有哪些，querySelectorAll，getElementByclassName,getElementsByTagName,arguments的集合,都是偽數組

let person1 = {

name:"張三",

age:19,

say(){

console.log(`姓名是：${this.name},年齡是：${this.age}`)

console.log(arguments)

arguments.push(8)

console.log(arguments)

}

let person2 = {

name:"李四",

age:23

}

person1.say.call(person2,1,2,3,4)

2、怎么無侵入無序數組求最大值

這一道面試題也是在考驗call，apply的用法，無侵入，就是不對數組的進操作，但是拿到最大值

let arr = [1,4,6,88,34,7,9,23,95]

// 方法有兩個

let res1 = Math.max.apply(null,arr) // 95

let res1 = Math.max.call(null,...arr) // 95

bind與 call,apply的區別

bind 的區別就是在改變 this 的指向的時候，并不會調用這個方法

let person1 = {

name:"張三",

age:19,

say(...arg){

console.log(`姓名是：${this.name},年齡是：${this.age},參數：${arg}`)

}

let person2 = {

name:"李四",

age:23

}

person1.say.bind(person2,1,2,3,4) // 沒有任何打印

person1.say.bind(person2,1,2,3,4)() // 姓名是：李四,年齡是：23,參數：1,2,3,4

bind,call,apply的手動封裝

本人的封裝可能不夠嚴謹，不會對傳遞的類型參數進行嚴密的判斷，只針對核心代碼的實現

// bind ,call ,apply 的封裝

Function.prototype.myCall = function(obj,...args){

obj = obj || window

const key = Symbol()

obj[key] = this

obj[key](...args)

delete obj[key]

}

Function.prototype.myApply = function(){

let obj = arguments[0] || window

const args = arguments[1]

const key = Symbol()

obj[key] = this

let result;

if(args){

if(Array.isArray(args)){

result = obj[key](...args)

}else if(arguments.length === 2){

result = obj[key](args)

}else{

console.error('MyApply傳遞多個參數的時候，第二個參數必須是數組')

}

}else{

result = obj[key]()

}

}

Function.prototype.myBind = function(obj,...args){

let self = this

return function(){

let newArgs = args.concat(...arguments)

self.myCall(obj,newArgs)

}

}

總結

以上是生活随笔為你收集整理的linux band0 手动重启,band,call,apply的区别以及手动封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。