阅读 57
call、apply、bind 的用法分别是什么?

call、apply、bind 的用法分别是什么?

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 值。

文章分类
前端
文章标签