call和apply都是改变this指向并执行的
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
代码示例
window.color = 'red';
document.color = 'yellow';
let s1 = {color: 'blue' };
function changeColor(){
console.log(this.color);
}
changeColor.call(); //red (默认传递参数)
changeColor.call(window); //red
changeColor.call(document); //yellow
changeColor.call(this); //red
changeColor.call(s1); //blue
<script>
window.number = 'one';
document.number = 'two';
let s1 = {number: 'three' };
function changeColor(){
console.log(this.number);
}
changeColor.apply(); //one (默认传参)
changeColor.apply(window); //one
changeColor.apply(document); //two
changeColor.apply(this); //one
changeColor.apply(s1); //three
</script>
那这个call和apply有区别吗?
区别就是call()接收若干个参数的列表,apply()接收一个包含多个参数的数组
那bind?
bind也是用来改变this指向的
与call和apply不同的是,bind不让函数执行,只是预先处理改变函数中this指向的
window.a = 1;
let module = {
a : 2,
getA:function() {
return this.a;
}
};
module.getA();//2
let getA1 = module.getA;
// getA在外部调用,此时的this指向了全局对象
getA1();//1
// 再把getA1方法绑定到module环境上
var getA2 = getA1.bind(module);
getA2(); //2
bind() 最简单的用法是创建一个函数,不论怎么调用,这个函数都有同样的 this 值。