call, apply 和 bind 方法
我们知道,每个函数在调用的时候会产生一个执行上下文环境,而这个执行上下文环境中包含了诸如 this 等等信息。即当我们调用函数的时候,内部的 this 已经明确地隐式绑定到了某一个对象上。如果我们希望更换 this 的指向,我们该如何更改?
call/apply/bind 这三个函数能够满足我们的需要。
一个示例:
var common = 'common';
var name = 'global';
var obj = {
name: 'obj'
} function fn(params) {
console.log(params + ' ' + this.name);
} fn(common) // common global
fn.call(obj, common) // common obj
我们可以看到,通过 call(),函数内部的 this指向了 obj 对象。
call/apply
// 素材函数
var func = function(arg1, arg2) { };
具体如下:
func.call(yourObj, arg1, arg2);
func.apply(yourObj, [arg1, arg2]);
所以我们可以看出,apply 和 call 在功能上完全一致,仅仅是传参方式不一致,这样的好处是在传参个数不一定时,可以使用 apply。比如:
// 定义一个 log 方法,让它可以代理 console.log 方法 function log(){
console.log.apply(console, arguments);
};
log(1); //1
log(1,2); //1 2
当然,在使用 call/apply 的时候,语句是立即执行的。
bind
func.bind(yourObj,xxx,xxx) 执行之后会返回一个新函数,是 func 函数的副本,不同的是新函数内部 this 永远指向 yourObj,当然这意味着在调用 bind 完成绑定之后,需要手动执行一下这个新函数。
其它用法/功能大致与 call 一致,不过在参数传递上有些许不一致:
function fn(a, b, c) {
console.log(a, b, c);
}
var newFn = fn.bind(null, 'Dot'); fn('A', 'B', 'C'); // A B C
newFn('A', 'B', 'C'); // Dot A B
newFn('B', 'C'); // Dot B C
可以看到,我们在 bind() 的时候传入了一个参数,新方法的实参都是在 bind 中参数的基础上在往后排。
2019-05-16 更新 ==============================================
手动实现 call / apply / bind
call 的实现:
Function.prototype.myCall = function(context = window) { // context, 上下文环境,其实就是传进来的作用域(对象)
// 1. this 的指向
// 我们是通过 fun.call(...) 这种形式调用 call 函数,即点调用,故 call 内部的 this 将指向 fun 这个目标函数;
// 2. context.fn
// 因为 context 就是我们传进来的作用域对象,而 context.fn 其实就是在 context 上添加一个 fn 属性;
// 3. 故这句话完成的任务是:
// 在 context 对象上添加一个函数,这个函数就是我们的目标函数
context.fn = this;
let args = [...arguments].slice(1);
let result = context.fn(...args);
// 删除 context 手动添加的目标函数,必须
delete context.fn;
return result;
}
apply 的实现:
这个的实现和 myCall 没啥其他区别,多了参数处理这一步。
Function.prototype.myApply = function(context = window) {
context.fn = this
let args = arguments[1]
let result = args ? context.fn(...args) : context.fn();
delete context.fn
return result
}
bind 的实现:
这里面需要注意的是 bind() 返回值是一个函数,并且这个函数的内部 this 指向永久改变。另外,因为返回值是函数,故这个函数可以被当成构造函数,如果是构造函数的话, this 应该指向构造出来的实例。
Function.prototype.myBind = function(context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
let _this = this
let args = [...arguments].slice(1)
return function F() {
// 判断是否被当做构造函数使用
if (this instanceof F) {
return _this.apply(this, args.concat([...arguments]))
}
return _this.apply(context, args.concat([...arguments]))
}
}
call, apply 和 bind 方法的更多相关文章
- Javascript中call,apply,bind方法的详解与总结
在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...
- JS中的call、apply、bind方法
JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]] ...
- 理解JS中的call、apply、bind方法(*****************************************************************)
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
- 重写apply, call, bind方法
重写apply, call, bind方法 //原生JavaScript封装apply方法,第四版 Function.prototype.applyFour = function(context) { ...
- 简单模拟实现javascript中的call、apply、bind方法
目录 引子 隐式丢失 硬绑定 实现及原理分析 总体实现(纯净版/没有注释) 写在最后 引子 读完<你不知道的JavaScript--上卷>中关于this的介绍和深入的章节后,对于this的 ...
- javascript中函数的call,apply及bind方法
call 方法调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项.将被用作当前对象的对象. ...
- js中的call()、apply()和bind()方法的区别
call(thisObj,param1,param2....)方法:调用一个对象的方法,用另外的对象去替换当前对象. 下面给出一个例子: function add(a,b){ return a+b; ...
- JS中的call、apply、bind方法详解
bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...
- 继承:call、apply、bind方法
javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. call,apply,bind这 ...
- JavaScript中的call、apply、bind方法的区别
在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这 ...
随机推荐
- IO 和 NIO 的思考
输入输出是操作系统不可或缺的一部分,大致分为两类:面向磁盘和面向网络.在 Java 中有3种 I/O 类型:BIO.NIO 和 AIO,分别是同步阻塞.同步非阻塞和异步非阻塞 I/O,这里着重描述 B ...
- 并发系列(6)之 ThreadPoolExecutor 详解
本文将主要介绍我们平时最常用的线程池 ThreadPoolExecutor ,有可能你平时没有直接使用这个类,而是使用 Executors 的工厂方法创建线程池,虽然这样很简单,但是很可能因为这个线程 ...
- 简述ADO.NET的连接层
前面曾提到过ADO.NET的连接层允许通过数据提供程序的连接.命令.数据读取器对象与数据库进行交互.当想连接数据库并且使用一个数据读取器对象来读取数据时.需要实现下面的几个步骤 * 创建.配置.打开连 ...
- Python实例----------每日一贴
def function_tips(): '''功能:每天输出一条励志文字 ''' import datetime # 导入日期时间类 # 定义一个列表 mot = ["今天星期一:\n人生 ...
- Java异常实战——OutOfMemoryError
在Java虚拟机规范描述中,除了程序计数器外,虚拟机内存的其他几个运行区域都有发生 OOM 异常的可能.在这里,用代码验证各个运行时区域存储的内容并讨论该如何进行处理 Java堆溢出 Java 堆用于 ...
- PostGIS计算矢量切片(二)--按值渲染
方案背景 今年三月份写了一篇postgis计算矢量切片,参考了网上资料给出了一份很粗糙的相关方案(文章写的更粗糙).当时的方案中只能针对gis形状进行渲染,而不能用属性渲染.针对这个情况,本文 ...
- 关于javascript异步
1.简单的理解 JavaScript是单线程的!总所周知,正常代码是从上而下,一条一条顺序执行的.就好比下楼梯,第一条代码先获得内存或者先执行操作.当遇到漫长的处理操作时(比如读取庞大的文件时,执行大 ...
- USB_ModeSwitch for Android 7
USB_ModeSwitch官网: USB_ModeSwitch - Handling Mode-Switching USB Devices on Linux USB_ModeSwitch for A ...
- (办公)springboot配置表单验证@Valid
项目用到了springboot,本来很高兴,但是项目里什么东西都没有,验证,全局异常这些都需要自己区配置.最近springboot用的还是蛮多的,我还是做事情,把经验发表一下. SpringBoot提 ...
- Android探究之View的绘制流程
Android中Activity是作为应用程序的载体存在,代表着一个完整的用户界面,提供了一个窗口来绘制各种视图,当Activity启动时,我们会通过setContentView方法来设置一个内容视图 ...