call、apply和 bind的简单使用方法

Harriet666 发布于2019-08-20 17:48 / 575人阅读

摘要：也就是说，区别就是，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用方法而则会立即执行函数。

- call、apply:
在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。

JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

call可以传递一个thisArgs参数和一个参数列表，thisArgs 指定了函数在运行期的调用者，也就是函数中的 this 对象，而参数列表会被传入调用函数中。thisArgs 的取值有以下4种情况：
（1）不传，或者传null,undefined，函数中的 this 指向 window 对象
（2）传递另一个函数的函数名，函数中的 this 指向这个函数的引用
（3）传递字符串、数值或布尔类型等基础类型，函数中的 this 指向其对应的包装对象，如 String、Number、Boolean
（4）传递一个对象，函数中的 this 指向这个对象

</>复制代码 
function a() {
    console.log(this); //输出函数a中的this对象
}
function b() {} //定义函数b
var obj = {
    name: "hehe"
}; //定义对象obj
a.call(); //window
a.call(null); //window
a.call(undefined); //window
a.call(1); //Number
a.call(""); //String
a.call(true); //Boolean
a.call(b); // function b(){}
a.call(obj); //Object

这是call 的核心功能，它允许你在一个对象上调用该对象没有定义的方法，并且这个方法可以访问该对象中的属性。

</>复制代码 
function animals() {}
animals.prototype = {
    type: "dog",
    say: function() {
         console.log("I am a " + this.type);
    }
}
var dog = new animals();
dog.say();    //I am a dog
var cat = {type:"cat"};
dog.say.call(cat); //I am a cat

因此，可以看出 call 和 apply 是为了动态改变 this 而出现的，当一个 object 没有某个方法（本栗子中cat没有say方法），但是其他的有（本栗子中dog有say方法），我们可以借助call或apply用其它对象的方法来操作。

apply、call 的区别:

对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。

</>复制代码 
对象.函数名.call(thisArgs, arg1, arg2);
对象.函数名.apply(thisArgs, [arg1, arg2])

其中 this 是你想指定的上下文，他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

- bind:
bind是ES5 新增的一个方法，它的传参和call类似，但又和 call/apply 有着显著的不同，即调用 call 或 apply 都会自动执行对应的函数，而 bind 不会执行对应的函数，只是返回了对函数的引用。

MDN的解释是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

</>复制代码 
var obj = {
    id : 1,
    eventBind: function(){
         var _this = this;
         $(".btn").on("click",function(event) {
              alert(this.id); //undefined
              alert(_this.id);  //1
        });
     }
}
obj.eventBind();//没有这句话，click事件不执行

由于 Javascript 特有的机制，上下文环境在 eventBind:function(){ } 过渡到 $(".btn").on("click",function(event) { }) 发生了改变，上述使用变量保存 this 这些方式都是有用的，也没有什么问题。当然使用 bind() 可以更加优雅的解决这个问题：

</>复制代码 
var obj = {
    id : 1,
    eventBind: function(){
         $(".btn").on("click",function(event) {
                  alert(this.id); //1
        }.bind(this));
    }
}
obj.eventBind();//没有这句话，click事件不执行

- call、apply和bind的区别：

</>复制代码 
var obj = {
    x: 88,
};
var foo = {
    getX: function() {
        return this.x;
    }
}
console.log(foo.getX.bind(obj)()); //88
console.log(foo.getX.call(obj)); //88
console.log(foo.getX.apply(obj)); //88

三个输出的都是88，但是注意使用 bind() 方法后面多了对括号。

也就是说，区别就是，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法；而 apply/call 则会立即执行函数。

云服务器 GPU云服务器 JS中bind、call和apply的作 js中的call和apply apply与call的区别 apply()方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83879.html

JS中的call、apply、bind方法详解

摘要：不能应用下的等方法。首先我们可以通过给目标函数指定作用域来简单实现方法保存，即调用方法的目标函数考虑到函数柯里化的情况，我们可以构建一个更加健壮的这次的方法可以绑定对象，也支持在绑定的时候传参。原因是，在中，多次是无效的。 bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 评论0 收藏0
JS基础篇--call、apply、bind方法详解

摘要：首先我们可以通过给目标函数指定作用域来简单实现方法保存，即调用方法的目标函数考虑到函数柯里化的情况，我们可以构建一个更加健壮的这次的方法可以绑定对象，也支持在绑定的时候传参。原因是，在中，多次是无效的。而则会立即执行函数。 bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 评论0 收藏0
理解 JavaScript call()/apply()/bind()

摘要：理解文章中已经比较全面的分析了在中的指向问题，用一句话来总结就是的指向一定是在执行时决定的，指向被调用函数的对象。与和直接执行原函数不同的是，返回的是一个新函数。这个新函数包裹了原函数，并且绑定了的指向为传入的。理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题，用一句话来总结就是：this 的指向一定是在执行时决定的，...

duan199226 2019-08-23 14:27 评论0 收藏0
比较call( ) apply( ) bind( )

摘要：简单比较一下与和的第一个实参是要调用函数的母对象，它是调用上下文，在函数体内通过来获得对它的引用。而则会立即执行函数。简单比较一下call() apply() bind() 《JavaScript: The Definitive Guide》 call()与apply() call()和apply()的第一个实参是要调用函数的母对象，它是调用上下文，在函数体内通过this来获得对它的...

cheng10 2019-08-20 15:20 评论0 收藏0