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



目录
相关文章
new bind apply call instanceof 等笔记
new bind apply call instanceof 等笔记
39 0
|
1月前
|
JavaScript 前端开发 开发者
call、bind、apply区别
【10月更文挑战第26天】`call`、`bind` 和 `apply` 方法在改变函数 `this` 指向和参数传递方面各有特点,开发者可以根据具体的需求和使用场景选择合适的方法来实现更灵活和高效的JavaScript编程。
30 1
|
2月前
|
前端开发 JavaScript
比较一下apply/call/bind ?
本文首发于微信公众号“前端徐徐”,详细介绍了 JavaScript 中 `apply`、`call` 和 `bind` 方法的概念、使用场景及手动实现。主要内容包括: - **apply**:使用数组作为参数调用函数,并指定 `this`。 - **call**:直接传递参数调用函数,并指定 `this`。 - **bind**:返回一个绑定了 `this` 和部分参数的新函数。 文章还对比了这三个方法的区别,并提供了手动实现的代码示例。
23 2
|
4月前
|
JavaScript 前端开发 测试技术
手写call , apply , bind 方法的实现
本文通过实例讲解了JavaScript中`call`、`apply`及`bind`方法的用途与实现。以`call`为例,展示了如何改变函数内的`this`指向,并立即执行该函数。通过在`Function.prototype`上定义`myCall`,利用`Symbol`确保新增属性的唯一性,从而避免命名冲突。接着介绍了如何处理不定数量的参数传递,最终实现了自定义的`myCall`方法。随后简述了`apply`与`call`的区别,并展示了其实现方式,主要在于参数传递形式的不同。最后,通过`bind`方法创建了一个返回新函数的例子,该新函数具有固定的`this`上下文,同时支持分批参数传递。
38 2
手写call , apply , bind 方法的实现
|
7月前
call\apply\bind详解
call\apply\bind详解
37 0
bind、call、apply 区别
bind、call、apply 区别
82 0
call、apply、bind笔记
call、apply、bind笔记
65 0
apply、bind和call
apply、bind和call
93 0

热门文章

最新文章