bind, call, apply的类似点及区别

相同点

• call,apply,bind均可以改变函数运行时this的指向问题

<script>
 
var value = "王1";
 
var obj = {
 
value: "开2",
 
friend: {
 
value: "贵3",
 
sayHi: function () {
 
console.log(this.value);
 
}
 
}
 
};
 
obj.friend.sayHi();//打印贵3
 
obj.sayHi = obj.friend.sayHi;
 
//谁调用this就属于谁
 
obj.sayHi();//打印开2
 
//window
 
var sayHi = obj.friend.sayHi;
 
sayHi();//打印王1
 
console.dir(sayHi);//dir查看结构
 
//call()参数1是你要修改的this
 
var obj2 = { value: "星星" };
 
sayHi.call(obj2);
 
sayHi.apply(obj2);
 
function sayHello(a, b) {
 
console.log(this, "jom", a, b)
 
}
 
sayHello(10, 20);
 
//call:从参数2开始，就是对应原函数的参数
 
sayHello.call(obj2, 96, 72);
 
//apply:参数2是个数组，数组位置对应原函数参数
 
sayHello.apply(obj2, [66, 888]);
 
 
 
//数组元素对应的形参，借助apply
 
var numbers = [9, 1, 20, 30, 100]
 
var min = Math.min.apply(Math, numbers);
 
console.log(min);
 
//es6的解构赋值
 
var min = Math.min(...numbers);
 
console.log(min);
 
//bind函数
 
//bind 方法不会当即执行，而是返回一个改变了上下文 this 后的函数
 
var fn = sayHello.bind(obj, 111, 222);
 
fn();
 
setTimeout(function () {
 
console.log(this);//window
 
}.bind(obj2), 2000);
 
</script>

复制代码

区别

• bind方法不会当即执行，返回了一个改变上下文函数的this后的函数。便于稍后调用；apply,call则是当即执行。

补充

• 在es6箭头函数下，call和apply将失效，对于箭头函数来讲。
• 箭头函数里的this,是定义时所在的对象。
• 箭头函数不能用做构造函数，也就是说不能使用 new 命令。
• 箭头函数不可使用 arguments 对象。