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

简介: call、apply、bind 的用法

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



目录
相关文章
|
7月前
new bind apply call instanceof 等笔记
new bind apply call instanceof 等笔记
18 0
|
1月前
call\apply\bind详解
call\apply\bind详解
12 0
|
8月前
bind、call、apply 区别
bind、call、apply 区别
51 0
|
10月前
call、apply、bind笔记
call、apply、bind笔记
46 0
|
10月前
|
JavaScript 前端开发
关于 this 指向、如何实现 new call apply bind 我所知道的
关于 this 指向、如何实现 new call apply bind 我所知道的
58 0
apply、bind和call
apply、bind和call
61 0
|
JavaScript 前端开发
一文搞定this、apply、call、bind
一文搞定this、apply、call、bind