1 call、apply、bind 用法及对比
1.1 Function.prototype
三者都是Function
原型上的方法,所有函数都能调用它们
Function.prototype.call
Function.prototype.apply
Function.prototype.bind
1.2 语法
fn
代表一个函数
fn.call(thisArg, arg1, arg2, ...) // 接收参数列表
fn.apply(thisArg, argsArray) // apply 接收数组参数
fn.bind(thisArg, arg1, arg2, ...) // 接收参数列表
1.3 参数说明
thisArg
:在 fn 运行时使用的 this 值
arg1,arg2,...
:参数列表,传给 fn 使用的
argsArray
:数组或类数组对象(比如Arguments对象),传给 fn 使用的
1.4 返回值
call
、apply
:同 fn 执行后的返回值
bind
:返回一个原函数的拷贝,并拥有指定的 this
值和初始参数。并且返回的函数可以传参。
const f = fn.bind(obj, arg1, arg2, ...)
f(a, b, c, ...)
// 调用 f 相当于调用 fn.call(obj, ...args)
// args是调用bind传入的参数加上调用f传入的参数列表
// 即arg1,arg2...a,b,c...
1.5 作用
三个方法的作用相同:改变函数运行时的this
值,可以实现函数的重用
1.6 用法举例
function fn(a, b) {
console.log(this.myName);
}
const obj = {
myName: '蜜瓜'
}
fn(1, 2)
// 输出:undefined
// 因为此时this指向全局对象,全局对象上没有myName属性
fn.call(obj, 1, 2)
fn.apply(obj, [1, 2])
// 输出:蜜瓜
// 此时this指向obj,所以可以读取到myName属性
const fn1 = fn.bind(obj, 1, 2)
fn1()
// 输出:蜜瓜
// 此时this指向obj,所以可以读取到myName属性
1.7 三个方法的对比
方法 | 功能 | 参数 | 是否立即执行 |
---|---|---|---|
apply |
改变函数运行时的this 值 |
数组 | 是 |
call |
改变函数运行时的this 值 |
参数列表 | 是 |
bind |
改变函数运行时的this 值 |
参数列表 | 否。返回一个函数 |
-
apply
和call
会立即获得执行结果,而bind
会返回一个已经指定this
和参数的函数,需要手动调用此函数才会获得执行结果 -
apply
和call
唯一的区别就是参数形式不同 - 只有
apply
的参数是数组,记忆方法:apply
和数组array
都是a
开头
2 实现call、apply、bind
2.1 实现call
2.1.1 易混淆的变量指向
现在我们来实现call
方法,命名为myCall
我们把它挂载到Function
的原型上,让所有函数能调用这个方法
// 我们用剩余参数来接收参数列表
Function.prototype.myCall = function (thisArg, ...args) {
console.log(this)
console.log(thisArg)
}
首先要明白的是这个函数中this
、thisArg
分别指向什么
看看我们是怎么调用的:
fn.myCall(obj, arg1, arg2, ...)
所以,myCall
中的this
指向fn
,thisArg
指向obj
(目标对象)
我们的目的是让fn
运行时的this
(注意这个this
是fn
中的)指向thisArg
即目标对象
换句话说就是让fn
成为obj
这个对象的方法来运行(核心思路)
2.1.2 简易版call
我们根据上述核心思路可以写出一个简单版本的myCall
Function.prototype.myCall = function (thisArg, ...args) {
// 给thisArg新增一个方法
thisArg.f = this; // this就是fn
// 运行这个方法,传入剩余参数
let result = thisArg.f(...args);
// 因为call方法的返回值同fn
return result;
};
call
方法的基本功能就完成了,但是显然存在问题:
- 倘若有多个函数同时调用这个方法,并且目标对象相同,则存在目标对象的
f
属性被覆盖的可能
fn1.myCall(obj)
fn2.myCall(obj)
- 目标对象上会永远存在这个属性
f
解决方案:
-
ES6
引入了一种新的原始数据类型Symbol
,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。 -
delete
操作符用于删除对象的某个属性
2.1.3 优化明显问题后的call
优化后的myCall
:
Function.prototype.myCall = function (thisArg, ...args) {
// 生成唯一属性名,解决覆盖的问题
const prop = Symbol()
// 注意这里不能用.
thisArg[prop] = this;
// 运行这个方法,传入剩余参数,同样不能用.
let result = thisArg[prop](...args);
// 运行完删除属性
delete thisArg[prop]
// 因为call方法的返回值同fn
return result;
};
至此myCall
方法的功能就相对完整了,但是还有一些细节需要补充
2.1.4 补充细节后的call
如果我们传入的thisArg
(目标对象)是undefined
或者null
,我们就将其替换为指向全局对象(MDN文档就是这么描述的)
// 完整代码
Function.prototype.myCall = function (thisArg, ...args) {
// 替换为全局对象:global或window
thisArg = thisArg || global
const prop = Symbol();
thisArg[prop] = this;
let result = thisArg[prop](...args);
delete thisArg[prop];
return result;
};
2.2 实现apply
apply
和call
实现思路一样,只是传参形式不同
// 把剩余参数改成接收一个数组
Function.prototype.myApply = function (thisArg, args) {
thisArg = thisArg || global
// 判断是否接收参数,若未接收参数,替换为[]
args = args || []
const prop = Symbol();
thisArg[prop] = this;
// 用...运算符展开传入
let result = thisArg[prop](...args);
delete thisArg[prop];
return result;
};
2.3 实现bind
2.3.1 简易版bind
实现思路:bind
会创建一个新的绑定函数,它包装了原函数对象,调用绑定函数会执行被包装的函数
前面已经实现了call
和apply
,我们可以选用其中一个来绑定this
,然后再封装一层函数,就能得到一个简易版的方法:
Function.prototype.myBind = function(thisArg, ...args) {
// this指向的是fn
const self = this
// 返回绑定函数
return function() {
// 包装了原函数对象
return self.apply(thisArg, args)
}
}
2.3.2 注意点
-
注意
apply
的参数形式是数组,所以我们传入的是args
而非...args
-
为什么要在
return
前定义self
来保存this
?因为我们需要利用闭包将
this
(即fn)保存起来,使得myBind
方法返回的函数在运行时的this
值能够正确地指向fn
具体解释如下:
// 如果不定义self
Function.prototype.myBind = function(thisArg, ...args) {
return function() {
return this.apply(thisArg, args)
}
}
const f = fn.myBind(obj) // 返回一个函数
// 为了看得清楚,写成下面这种形式
// 其中thisArg、args保存在内存中,这是因为形成了闭包
const f = function() {
return this.apply(thisArg, args)
}
// 现在我们调用f
// 会发现其this指向全局对象(window/global)
// 而非我们期望的fn
f()
2.3.3 让bind返回的函数(绑定函数)可以传参
前面说了bind
返回的参数可以传参(见1.4
),现在来对myBind
进行改进:
Function.prototype.myBind = function(thisArg, ...args) {
const self = this
// 返回绑定函数,用剩余参数接收参数
return function(...innerArgs) {
// 合并两次传入的参数
const finalArgs = [...args, ...innerArgs]
return self.apply(thisArg, finalArgs)
}
}
2.3.4 “new + 绑定函数”存在什么问题
MDN:绑定函数也可以使用
new
运算符构造,它会表现为目标函数已经被构建完毕了似的。提供的this
值会被忽略,但前置参数仍会提供给模拟函数。
这是MDN文档中的描述,意思是绑定函数可以作为构造函数来创建实例,并且先前作为bind
方法的第一个参数传入的目标对象thisArg
失效,但是先前提供的参数依然有效。
先来看我们的myBind
绑定函数的内部:
// 绑定函数f
function(...innerArgs) {
...
// 为了看得清楚,这里直接将self写成了fn
return fn.apply(thisArg, finalArgs)
}
用new
来创建f
的实例:
const o = new f()
我们都知道(如果不知道看这篇: 前端面试手写代码——模拟实现new运算符),new的过程中会执行构造函数的代码,即此处绑定函数f
中的代码会被执行。
包括fn.apply(thisArg, finalArgs)
这句代码,并且其中的thisArg
仍然有效,这就不符合原生bind
方法的描述了
2.3.5 绑定函数中怎么区分是否使用了new
如何解决:用new
创建绑定函数的实例时,让先前传入的thisArg
失效
事实上对于绑定函数f
来说,执行时的this
值并不确定。
-
如果我们直接执行
f
,那么绑定函数中的this
指向全局对象。 -
如果我们用
new
来创建f
的实例,那么f
中的this
指向新创建的实例。(这点如果不清楚看这篇: 前端面试手写代码——模拟实现new运算符)
Function.prototype.myBind = function(thisArg, ...args) {
const self = this
return function(...innerArgs) {
console.log(this) // 注意此处的this并不确定
const finalArgs = [...args, ...innerArgs]
return self.apply(thisArg, finalArgs)
}
}
// 绑定函数
const f = fn.myBind(obj)
// 如果我们直接执行f,那么绑定函数中的this指向全局对象
f()
// 如果我们用new来创建f的实例,那么f中的this指向新创建的实例
const o = new f()
基于上述两种情况,我们可以修改myBind
返回的绑定函数,在函数内对this
值进行判断,从而区分是否使用了new
运算符
对myBind
进行如下更改:
Function.prototype.myBind = function(thisArg, ...args) {
const self = this
const bound = function(...innerArgs) {
const finalArgs = [...args, ...innerArgs]
const isNew = this instanceof bound // 以此来判断是否使用了new
if (isNew) {
}
// 未使用new就跟原来一样返回
return self.apply(thisArg, finalArgs)
}
return bound
}
2.3.6 补充完绑定函数内部操作
现在我们需要知道如果是new
构造实例的情况应该进行哪些操作。
看看使用原生bind
方法是什么结果:
const fn = function(a, b) {
this.a = a
this.b = b
}
const targetObj = {
name: '蜜瓜'
}
// 绑定函数
const bound = fn.bind(targetObj, 1)
const o = new bound(2)
console.log(o); // fn { a: 1, b: 2 }
console.log(o.constructor); // [Function: fn]
console.log(o.__proto__ === fn.prototype); // true
可以看到,new bound()
返回的是以fn
为构造函数创建的实例。
根据这点可以补充完if (new) {}
中的代码:
Function.prototype.myBind = function(thisArg, ...args) {
const self = this
const bound = function(...innerArgs) {
const finalArgs = [...args, ...innerArgs]
const isNew = this instanceof bound // 以此来判断是否使用了new
if (isNew) {
// 直接创建fn的实例
return new self(...finalArgs)
}
// 未使用new就跟原来一样返回
return self.apply(thisArg, finalArgs)
}
return bound
}
const bound = fn.myBind(targetObj, 1)
const o = new bound(2)
这样,const o = new bound(2)
相当于const o = new self(...finalArgs)
,因为构造函数如果显式返回一个对象,就会直接覆盖new
过程中创建的对象(不知道的话可以看看这篇: 前端面试手写代码——模拟实现new运算符)
2.3.7 完整代码
Function.prototype.myBind = function(thisArg, ...args) {
const self = this
const bound = function(...innerArgs) {
const finalArgs = [...args, ...innerArgs]
const isNew = this instanceof bound
if (isNew) {
return new self(...finalArgs)
}
return self.apply(thisArg, finalArgs)
}
return bound
}
事实上,这段代码仍存在和原生bind
出入的地方,但是这里只是表达实现bind
的一个整体思路,不必苛求完全一致
3 补充
-
apply
、call
方法还有一些细节我们没有实现:如果这个函数(fn)处于非严格模式下,则指定为null
或undefined
时会自动替换为指向全局对象,原始值会被包装(比如1
会被包装类Number
包装成对象)。 -
bind
方法也是函数柯里化的一个应用,不熟悉柯里化的可以看看这篇内容:前端面试手写代码——JS函数柯里化
公众号【前端嘛】