关于javascript中的bind、call、apply等函数的用法

lordharrd 发布于2019-08-22 10:53 / 728人阅读

摘要：其实它们都很简单，但是在处理一些与相关的函数的时候，用来改变函数中的指向，却是必不可少的工具，所以必须掌握好它们的用法。

关于javascript中的bind、call、apply等函数的用法

我GitHub上的菜鸟仓库地址：点击跳转查看其他相关文章

文章在我的博客上的地址：点击跳转

前面的文章已经说到this的指向了，那么这篇文章就要说一说和this相关的三个函数的用法：bind( )、call( )和apply( )。

其实它们都很简单，但是在处理一些与this相关的函数的时候，用来改变函数中this的指向，却是必不可少的工具，所以必须掌握好它们的用法。

好了，三管齐下，一起比较地举例子说一下：

//先来一个对象big吧
var big = {
    name:"BaBa",
    saying:function (age){
        console.log(this.name,"age:",age);
    }
};

//再来一个small对象
var small= {
    name:"ErZi"
};

//如果想调用big的saying方法来说出‘Erzi’:
//使用bind方法
big.saying.bind(small)(20);//打印结果为ErZi age: 20
//使用call方法
big.saying.call(small,20);//打印结果为ErZi age: 20
//使用apply方法
big.saying.apply(small,[20]);//打印结果为ErZi age: 20

所以，其实三种方法都可以达到同一个结果，至于区别就很显而易见了。

bind只是单纯将一个函数里的this的指向明确指定为small了，如果要执行函数，就要在后面加括号调用了。

call就是直接执行一个自己指定this指向的函数，参数是一个一个传递。

apply和call的区别就是，参数是放进一个数组中传递。

实际上，很多时候我们在一个函数中，想用到其他的函数，但是其他函数的this指向就不明确，所以就会在自己的函数里面通过这三个方法来调用函数，例如：

//先来一个对象big吧
var big = {
    name:"BaBa",
    age:50,
    saying:function (){
        console.log(this.name,"age:",this.age);
    }
};

//再来一个SayingAge的构造函数
function SayingAge(name,age){
    this.name = name;
    this.age = age;
    this.saying = big.saying.bind(this);
}

//实例化一个对象genius
var genius = new SayingAge("tiancai",18);
//调用genius的saying方法
genius.saying();//打印结果为tiancai age: 18

构造函数SayingAge就是将big的saying方法拿过来，并将saying函数里面的this指向改为自己的this指向（指向实例化的对象）。

如果想不单单是bind了一个函数的this指向，还想执行它，举个call的例子（apply只是将参数放进数组）：

//先来一个对象big吧
var big = {
    name:"BaBa",
    age:50,
    saying:function (sex){
        console.log(this.name,"age:",this.age,"sex:",sex);
    }
};
//再来一个small对象
var small = {
    name:"ErZi",
    age:18
};
//借用big的saying方法看看small的saying是什么
big.saying.call(small,"male");//打印结果为ErZi age: 18 sex: male

当然了，这个方法并没有给small添加了saying方法，只不过调用了big的saying方法，并将里面的this指向small而已。

相信大家对这三个方法的应用都很轻松掌握了。

云服务器 GPU云服务器 JS中bind、call和apply的作 js中的call和apply javascript_bind用法 apply与call的区别

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

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

javascript关于this 以及this的显示设置(apply、call、bind)

摘要：如果连续呢结果会是什么结果还是第一个原因是，在中，多次是无效的。更深层次的原因，的实现，相当于使用函数在内部包了一个，第二次相当于再包住第一次故第二次以后的是无法生效的。 this 1.其实js中的this没那么难理解，当找不到this时记住一句话：谁调我，我就指谁！new 谁指谁 function text1(){ console.log(this); //指wind...

LiveVideoStack 2019-08-21 11:20 评论0 收藏0
javascript 基础之 call, apply, bind

摘要：系统，扎实的语言基础是一个优秀的前端工程师必须具备的。第一个参数为调用函数时的指向，随后的参数则作为函数的参数并调用，也就是。和的区别只有一个，就是它只有两个参数，而且第二个参数为调用函数时的参数构成的数组。系统，扎实的 javascript 语言基础是一个优秀的前端工程师必须具备的。在看了一些关于 call，apply，bind 的文章后，我还是打算写下这篇总结，原因其实有好几个。...

xeblog 2019-08-23 18:23 评论0 收藏0
call、apply、bind的用法小结

摘要：新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的是原来的对象。如果不做特殊处理的话，一般会丢失原来的对象。 call、apply、bind是JavaScript中Function函数自带的方法，主要用于改变this的指向区别： call（） 1.语法： fun.call(this, arg1,arg2) 2.this取值的几点说明：（1）处于非严格模式下，...

woshicixide 2019-08-26 11:36 评论0 收藏0
JavaScript函数的call，apply和bind

摘要：它们有明确的和成员函数的定义，只有的实例才能调用这个的成员函数。用和调用函数里用和来指定函数调用的，即指针的指向。同样，对于一个后的函数使用或者，也无法改变它的执行，原理和上面是一样的。函数里的this指针要理解call，apply和bind，那得先知道JavaScript里的this指针。JavaScript里任何函数的执行都有一个上下文（context），也就是JavaScri...

alighters 2019-08-22 14:48 评论0 收藏0
JS中的call、apply、bind方法详解

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

zombieda 2019-08-23 15:27 评论0 收藏0