JS 中 call、apply、bind的用法

JavaScript 中 call()、apply()、bind() 的用法

this的指代

let name = '小王',age = 18
let obj = {
    
    
    name:'小张',
    objAge:this.age,
    myFun:function(){
    
    
        console.log(this.name+'年龄'+this.age)
    }
}

obj.objAge;  // 17
obj.myFun()  // 小张年龄 undefined

1、call()、apply()、bind() 都是用来重定义 this 这个对象的

let name = '小王',age = 18
let obj = {
    
    
    name:'小张',
    objAge:this.age,
    myFun:function(){
    
    
        console.log(this.name+'年龄'+this.age)
    }
}

let obj2 = {
    
    
    name:'小李',
    age:20
}

obj.myFun.call(db)；　　　　//小李年龄20 
obj.myFun.apply(db);　　　 //小李年龄20 
obj.myFun.bind(db)();　　　//小李年龄20 

bind多了一个()说明bind返回的是一个新的函数，需要调用才会执行

2、对比call，bind，apply传参

let name = '小王',age = 18
let obj = {
    
    
    name:'小张',
    objAge:this.age,
    myFun:function(num,str){
    
    
        console.log(this.name+'年龄'+this.age+',他有'+num+'个'+str)
    }
}

let obj2 = {
    
    
    name:'小李',
    age:20
}

obj.myFun.call(obj2, 5, '橘子');　　　　   // 小李年龄20,他有5个橘子 
obj.myFun.apply(obj2, 5, '橘子');　　　   // 报错！！
obj.myFun.apply(obj2, [5, '橘子']);　　　 // 小李年龄20,他有5个橘子 
obj.myFun.bind(obj2, 5, '橘子')();　　　  // 小李年龄20,他有5个橘子
obj.myFun.bind(obj2, [5, '橘子'])();　　  // 小李年龄20,他有5,橘子个undefined

call、bind、apply第一个参数都是指向this

• call的参数是直接放进去，后面的所有参数都用逗号分隔
• apply只能接收两个参数，第一个为指定的this，第二个为方法的参数(为一个数组)
• bind是返回一个新函数，传参同call一样

3、使用——记录一个“借函数”的方法：

arguments为一个类数组，没有数组的join()等方法，可以通过call、bind、apply进行借用数组的join函数

function $parseVars2Str() {
    
    
  return Array.prototype.join.call(arguments,'-')
}

console.log($parseVars2Str(1,2,3,4,'asd'))	//1-2-3-4-asd