call和apply
call和apply都是改变this指向并执行的。
call用法
<script> 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>
let Pet = { words : '...', speak : function (say) { console.log(say + ''+ this.words) } } Pet.speak('Speak'); // 结果:Speak... let Dog = { words:'Wang' } //将this的指向改变成了Dog Pet.speak.call(Dog, 'Speak'); //结果: SpeakWang ```
apply用法
<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了。
fn.call(obj, ...arr) // 基于es6的展开运算符也可以实现把数组中的每一项依次传递给参数
总结
call和apply都是funcition原型上的方法,
每一个函数作为funciton的实例,都可以调用这两个方法,
而这两个方法执行的目的都是改变函数中this的指向的,
唯一的区别是call是一个一个传,apply是以数组的方式
在传3个值以上的时候,传call比apply好一些,所以后期开发的时候,如果追求极致的话,可以使用call多一点。
bind
bind也是用来改变this指向的
与call和apply不同的是,bind不让函数执行,只是预先处理改变函数中this指向的
bind用法
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