概念

apply call 和bind 允许为不同的对象分配和调用属于一个对象的函数/方法。同时它们可以改变函数内 this 的指向。

区别

  • apply 和 call 接收的参数形式不同

  • apply 和 call 都是直接调用函数并得到函数执行结果,而 bind 会返回待执行函数,需要再次调用

用法演示

我们先创建一个对象 parent

const parent = {
name: 'parent',
sayPerson (age, addr) {
return {
name: this.name,
age,
addr
}
}
}

显然它具有 name 属性,及方法 sayPerson,我们现在可以通过 parent.sayPerson() 来输出该对象信息。

const person = parent.sayPerson(60, 'shenzhen');
// {name: "parent", age: 60, addr: "shenzhen"}

现在我们再创建一个对象 son

const son = {
name: 'son'
}

我们现在也想得到 son 的信息,但是 son 对象没有 sayPerson 函数怎么办?借助已有的 parent 对象和 call 方法,我们可以这样写

const person = parent.sayPerson.call(son, 26, 'shenzhen');
// {name: "son", age: 26, addr: "shenzhen"}

可以看出,通过调用 call 函数,我们为 son 对象分配了 sayPerson 方法并进行调用。实现了一个对象可以调用不属于它自己的方法,并且函数内的 this 指向该对象。apply 方法的用法其实一样,只是传参有些区别

const person = parent.sayPerson.call(son, [26, 'shenzhen']);
// {name: "son", age: 26, addr: "shenzhen"}

bind 函数则不直接调用函数,而是返回待调用函数

const sayPersonFn = parent.sayPerson.bind(son, 26, 'shenzhen');

const person = sayPersonFn();
// {name: "son", age: 26, addr: "shenzhen"}

以上就是三者的使用方法和区别,下面我们来看看它们是如何实现的

实现

call的实现

实现原理就是为对象 obj 添加需要调用的方法,接着调用该方法(此时 this 指向 obj),调用过后再删除该方法

简单版

Object.prototype.callFn = function (...args) {
// 第一个参数为目标对象
const context = args[0]; args.shift(); // 为对象赋值需要调用的方法
context.fn = this; // 调用该方法
context.fn(...args); // 删除方法
delete context.fn;
}

加上返回值

Object.prototype.callFn = function (...args) {
// 第一个参数为目标对象
const context = args[0]; args.shift(); // 为对象赋值需要调用的方法
context.fn = this; // 调用该方法
const result = context.fn(...args); // 删除方法
delete context.fn; return result;
}

在测试中发现,我们调用 call,如果第一个参数是 null 或者 undefined,那么 call 将以全局 window 来调用方法,此时 this 也指向 window。如果第一个参数不是对象类型,则以空对象 {} 来调用方法。

Object.prototype.callFn = function (...args) {
// 第一个参数为目标对象
let context = args[0]; // undefined 和 null 指向 window
if (context === null || context === undefined) {
context = window;
} // 不是对象类型则创建空对象
if (typeof context !== 'object') {
context = {};
} args.shift(); // 为对象赋值需要调用的方法
context.fn = this; // 调用该方法
const result = context.fn(...args); // 删除方法
delete context.fn; return result;
}

至此,我们实现了一个完整的 call 方法。

apply的实现

既然和 call 只存在传参的区别,那我们只需要简单修改下已实现的 call 方法即可。

Object.prototype.applyFn = function (...args) {
let context = args[0]; if (context === null || context === undefined) {
context = window;
} if (typeof context !== 'object') {
context = {};
} args.shift(); context.fn = this; // 和 call 存在差异的地方
const result = context.fn(...args[0]); delete context.fn; return result;
}

bind的实现

在实现了 apply 和 call 的前提下,bind 的实现也比较简单。

Object.prototype.bindFn = function (...args) {
// 实际就是多包了层待执行函数
return () => {
return this.applyFn(args[0], (args || []).slice(1));
}
}

至于以 bind 方法返回的函数作为构造函数来创建对象会存在的问题请参考JavaScript深入之bind的模拟实现

总结

call apply bind 在工作中实际上是比较常见的函数,特别是在一些框架或库的源码中,但是经常有人会混淆它们的用法。希望大家通过此篇文章可以彻底弄清它们的作用与区别,并且知道其实现原理,知其然知其所以然。

参考


欢迎到前端学习打卡群一起学习~516913974

apply call bind的用法与实现的更多相关文章

  1. js中call、apply、bind的用法

    原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...

  2. call、apply、bind的用法

    数组追加 //用apply拼接 var arr1=[12,'name:foo',2048]; var arr2=['Joe','Hello']; Array.prototype.push.apply( ...

  3. javascript中call()、apply()、bind()的用法理解

    一.bind的用法 第一个:obj.showInfo('arg','arg_18');中传的2个参数通过showInfo方法改变的是obj下中的name和age 第二个:obj.showInfo.bi ...

  4. JS中的call()、apply() 以及 bind()方法用法总结

    JS中的call()方法和apply()方法用法总结  : 讲解: 调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. function add(c,d){ return thi ...

  5. javascript中call()、apply()、bind()的用法终于理解

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows( ...

  6. call,apply,bind的用法与区别

    1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...

  7. (转)javascript中call()、apply()、bind()的用法

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows( ...

  8. <JavaScript> call()、apply()、bind() 的用法

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例 1 obj.objAge; obj.myFun() // 小张年龄 undefined   例 2 shows() ...

  9. call、apply、bind 的用法

    例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows() //盲僧 比较一下这两者this 的差别,第一个打印里面的this 指向obj,第 ...

  10. JS中call()、apply()、bind()的用法

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows( ...

随机推荐

  1. stand up meeting 1/12/2016

    part 组员                工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云  UI测试和调整:页面跳转调整    3 查漏补缺,扫除UI b ...

  2. B - Fadi and LCM CodeForces - 1285C 质因子

    题目大意很简单,给你一个整数X,让你求a和b,使得max(a,b)尽可能的小,然后打印a,b 题解:想到了质因子分解,也考虑到了暴力,但是觉得暴力的话会TLE,所以打算用贪心做,然后就一直Wa.... ...

  3. spark 集群优化

    只有满怀自信的人,能在任何地方都怀有自信,沉浸在生活中,并认识自己的意志. 前言 最近公司有一个生产的小集群,专门用于运行spark作业.但是偶尔会因为nn或dn压力过大而导致作业checkpoint ...

  4. pysparnn 模块使用,相似句子召回

    import pysparnn.cluster_index as ci from sklearn.feature_extraction.text import TfidfVectorizer data ...

  5. python信息收集(四)

        在前三篇中,我们介绍了使用python脚本发现二层.三层的主机设备,接下来我们介绍使用python发现第四层主机.     在TCP/IP协议中,第四层为传输层,主要使用的通信协议为TCP协议 ...

  6. HTTP 前世今生

    HTTP 协议在我们身边随处可见,只要上网就离不开它.不论是用浏览器还是 App,不论是看新闻.短视频还是听音乐.玩游戏,后面总会有 HTTP 在默默为你服务. Http 协议是怎么来的?最开始是什么 ...

  7. vector和数组

    对于之前没有接触过vector的初学者来说,经常会把vector和数组弄混,因为二者在用的时候比较像,下面就详细的来介绍一下vector和数组的区别. (1) 首先,vector类似于数组,有一段连续 ...

  8. 有关HTTP协议

    有关HTTP协议:https://www.cnblogs.com/an-wen/p/11180076.html

  9. Zabbix3.4安装部署

    Zabbix3.4安装部署 一.系统环境 cat /etc/redhat-release  CentOS Linux release 7.3.1611 (Core)  关闭防火墙及selinux sy ...

  10. eclipse自动补全导致变量会跟上String后缀的问题解决

    https://blog.csdn.net/feinifi/article/details/103665860