這三個(gè)api都是改變this的指向問(wèn)題， 在前端開(kāi)發(fā)過(guò)程中，會(huì)經(jīng)常使用到這三個(gè)api,那么需要我們非常清楚，這三個(gè)之間的區(qū)別，話不多說(shuō)，代碼實(shí)現(xiàn)

call,apply的區(qū)別

這兩個(gè) api 非常相似，只是在傳遞參數(shù)上的細(xì)微區(qū)別

let person1 = {

name:"張三",

age:19,

say(...arg){

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

}

}

let person2 = {

name:"李四",

age:23

}

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

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

常見(jiàn)的面試題

1、如何將偽數(shù)組裝換成真數(shù)組

在 js 里面會(huì)有很多偽數(shù)組的概念，偽數(shù)組和真數(shù)組的有什么區(qū)別

+ 偽數(shù)組具 length 屬性，但是，不具備數(shù)組的方法，偽數(shù)組長(zhǎng)度不可變

+ 常見(jiàn)的偽數(shù)組有哪些，querySelectorAll，getElementByclassName,getElementsByTagName,arguments的集合,都是偽數(shù)組

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、怎么無(wú)侵入無(wú)序數(shù)組求最大值

這一道面試題也是在考驗(yàn)call，apply的用法，無(wú)侵入，就是不對(duì)數(shù)組的進(jìn)操作，但是拿到最大值

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

// 方法有兩個(gè)

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

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

bind與 call,apply的區(qū)別

bind 的區(qū)別就是在改變 this 的指向的時(shí)候，并不會(huì)調(diào)用這個(gè)方法

let person1 = {

name:"張三",

age:19,

say(...arg){

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

}

let person2 = {

name:"李四",

age:23

}

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

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

bind,call,apply的手動(dòng)封裝

本人的封裝可能不夠嚴(yán)謹(jǐn)，不會(huì)對(duì)傳遞的類型參數(shù)進(jìn)行嚴(yán)密的判斷，只針對(duì)核心代碼的實(shí)現(xiàn)

// 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傳遞多個(gè)參數(shù)的時(shí)候，第二個(gè)參數(shù)必須是數(shù)組')

}

}else{

result = obj[key]()

}

}

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

let self = this

return function(){

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

self.myCall(obj,newArgs)

}

}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。