apply call bind的用法与实现
概念
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的用法与实现的更多相关文章
- js中call、apply、bind的用法
原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...
- call、apply、bind的用法
数组追加 //用apply拼接 var arr1=[12,'name:foo',2048]; var arr2=['Joe','Hello']; Array.prototype.push.apply( ...
- javascript中call()、apply()、bind()的用法理解
一.bind的用法 第一个:obj.showInfo('arg','arg_18');中传的2个参数通过showInfo方法改变的是obj下中的name和age 第二个:obj.showInfo.bi ...
- JS中的call()、apply() 以及 bind()方法用法总结
JS中的call()方法和apply()方法用法总结 : 讲解: 调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. function add(c,d){ return thi ...
- javascript中call()、apply()、bind()的用法终于理解
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows( ...
- call,apply,bind的用法与区别
1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...
- (转)javascript中call()、apply()、bind()的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows( ...
- <JavaScript> call()、apply()、bind() 的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例 1 obj.objAge; obj.myFun() // 小张年龄 undefined 例 2 shows() ...
- call、apply、bind 的用法
例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows() //盲僧 比较一下这两者this 的差别,第一个打印里面的this 指向obj,第 ...
- JS中call()、apply()、bind()的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows( ...
随机推荐
- 详解 Paths类 与 Files类
在本篇博文中,本人主要讲解NIO 的两个核心点 -- 缓冲区(Buffer) 和 通道 (Channel)之一的 缓冲区(Buffer), 有关NIO流的其他知识点请观看本人博文<详解 NIO流 ...
- 常见的Web源码泄漏漏洞及其利用
Web源码泄露的漏洞: git源码泄露 svn源码泄露 hg源码泄漏 网站备份压缩文件 WEB-INF/web.xml 泄露 DS_Store 文件泄露 SWP 文件泄露 CVS泄露 Bzr泄露 Gi ...
- 【题解】P3959 宝藏 - 状压dp / dfs剪枝
P3959 宝藏 题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 n 个深埋在地下的宝藏屋, 也给出了这 n 个宝藏屋之间可供开发的m 条道路和它们的长度. 小明决心亲自前往挖掘所有宝 ...
- MySQL学习之正则表达式篇
正则表达式(REGEXP) 1.简介 正则表达式是用来匹配列值的特殊字符集合,许多领域都有涉及, MySQL使用的正则表达式仅为其一个小小的子集. 2.基本字符匹配 2.1筛选包含特定字符串的信息 / ...
- SpringCloud(三)学习笔记之Ribbon
spring Cloud Ribbon 是一个客户端的负载均衡器,它提供对大量的HTTP和TCP客户端的访问控制. 客户端负载均衡即是当浏览器向后台发出请求的时候,客户端会向 Eureka Serve ...
- SeleniumHQ
下载地址:http://www.seleniumhq.org/download/
- spring-boot-lll-starter自动化框架介绍
1. spring-boot-lll-starter自动化框架介绍 1.1. 前言 舔着脸来介绍一波我刚写的自动化框架,spring-boot-lll-starter框架是经由我企业实战总结的一套,适 ...
- 安卓微信浏览器中window.location.href失效的问题
最近接手一微信项目,测试功能时,发现跳转在android手机上不动了.iso系统可以正常跳转的.解决方法: window.location.href = url + '?v=' + (new Date ...
- git取消跟踪(unversion)
有时候我们会git add了一些不想跟踪的文件,通过下面的命令可以在没提交前从index里删掉跟踪记录(保留本地文件) git rm –cached 文件名
- Linux系统管理第三次作业 账号管理 权限及归属管理
1.创建/guanli 目录,在/guanli下创建zonghe 和 jishu 两个目录(一条命令) [root@localhost ~]# mkdir /guanli [root@localhos ...