本篇内容介绍了“javascript怎么实现call、apply和bind方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅
本篇内容介绍了“javascript怎么实现call、apply和bind方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
ES3 版本
Function.prototype.myCall = function(thisArg){
if(typeof this != 'function'){
throw new Error('The caller must be a function')
}
if(thisArg === undefined || thisArg === null){
thisArg = globalThis
} else {
thisArg = Object(thisArg)
}
var args = []
for(var i = 1;i < arguments.length;i ++){
args.push('arguments[' + i + ']')
}
thisArg.fn = this
var res = eval('thisArg.fn(' + args + ')')
delete thisArg.fn
return res
}
ES6 版本
Function.prototype.myCall = function(thisArg,...args){
if(typeof this != 'function'){
throw new Error('The caller must be a function')
}
if(thisArg === undefined || thisArg === null){
thisArg = globalThis
} else {
thisArg = Object(thisArg)
}
thisArg.fn = this
const res = thisArg.fn(...args)
delete thisArg.fn
return res
}
通过 call
调用函数的时候,可以通过传给 call
的 thisArg 指定函数中的 this。而只要使得函数是通过 thisArg 调用的,就能实现这一点,这就是我们的主要目标。
实现要点
最终是通过函数去调用 myCall
的,所以 myCall
和 call
一样挂载在函数原型上。同时,也正因为是通过函数去调用 myCall
的,所以在 myCall
内部我们可以通过 this 拿到 myCall
的调用者,也就是实际执行的那个函数。
按理说,myCall
是挂载在函数原型上,当我们通过一个非函数去调用 myCall
的时候,肯定会抛出错误,那么为什么还要在 myCall
中检查调用者的类型,并自定义一个错误呢?这是因为,当一个调用者 obj = {}
是一个对象,但是继承自 Function
的时候(obj.__proto__ = Function.prototype
),它作为一个非函数实际上也是可以调用 myCall
方法的,这时候如果不进行类型检查以确保它是个函数,那么后面直接将它当作函数调用的时候,就会抛出错误了
传给 call
的 thisArg 如果是 null 或者 undefined,那么 thisArg 实际上会指向全局对象;如果 thisArg 是一个基本类型,那么可以使用 Object()
做一个装箱操作,将其转化为一个对象 —— 主要是为了确保后续可以以方法调用的方式去执行函数。那么可不可以写成 thisArg = thisArg ? Object(thisArg) : globalThis
呢?其实是不可以的,如果 thisArg 是布尔值 false,那么会导致 thisArg 最终等于 globalThis,但实际上它应该等于 Boolean {false}
。
前面说过,可以在 myCall
里通过 this 拿到实际执行的那个函数,所以 thisArg.fn = this
相当于将这个函数作为 thisArg 的一个方法,后面我们就可以通过 thisArg 对象去调用这个函数了。
thisArg.fn = this
相当于是给 thisArg 增加了一个 fn 属性,所以返回执行结果之前要 delete 这个属性。此外,为了避免覆盖 thisArg 上可能存在的同名属性 fn,这里也可以使用 const fn = Symbol('fn')
构造一个唯一属性,然后 thisArg[fn] = this
。
ES3 版本和 es6 版本主要的区别在于参数的传递以及函数的执行上:
ES6 因为引入了剩余参数,所以不管实际执行函数的时候传入了多少个参数,都可以通过 args 数组拿到这些参数,同时因为引入了展开运算符,所以可以展开 args 参数数组,把参数一个个传递给函数执行
但在 ES3 中没有剩余参数这个东西,所以在定义 myCall
的时候只接收一个 thisArg 参数,然后在函数体中通过 arguments 类数组拿到所有参数。我们需要的是 arguments 中除第一个元素(thisArg)之外的所有元素,怎么做呢?如果是 ES6,直接[...arguments].slice(1)
就可以了,但这是 ES3,于是我们只能从索引 1 开始遍历 arguments,然后 push 到一个 args 数组中了。而且还要注意的是,这里 push 进去的是字符串形式的参数,这主要是为了方便后续通过 eval 执行函数的时候,将参数一个一个传递给函数。
为什么必须通过 eval 才能执行函数呢?因为我们不知道函数实际上要接收多少个参数,况且也用不了展开运算符,所以只能构造一个可执行的字符串表达式,显式地传入函数的所有参数。
apply 的用法和 call 很类似,因此实现也很类似。需要注意的区别是,call 在接受一个 thisArg 参数之后还可以接收多个参数(即接受的是参数列表),而 apply 在接收一个 thisArg 参数之后,通常第二个参数是一个数组或者类数组对象:
fn.call(thisArg,arg1,arg2,...)
fn.apply(thisArg,[arg1,arg2,...])
如果第二个参数传的是 null 或者 undefined,那么相当于是整体只传了 thisArg 参数。
ES3 版本
Function.prototype.myApply = function(thisArg,args){
if(typeof this != 'function'){
throw new Error('the caller must be a function')
}
if(thisArg === null || thisArg === undefined){
thisArg = globalThis
} else {
thisArg = Object(thisArg)
}
if(args === null || args === undefined){
args = []
} else if(!Array.isArray(args)){
throw new Error('CreateListFromArrayLike called on non-object')
}
var _args = []
for(var i = 0;i < args.length;i ++){
_args.push('args[' + i + ']')
}
thisArg.fn = this
var res = _args.length ? eval('thisArg.fn(' + _args + ')'):thisArg.fn()
delete thisArg.fn
return res
}
ES6 版本
Function.prototype.myApply = function(thisArg,args){
if(typeof thisArg != 'function'){
throw new Error('the caller must be a function')
}
if(thisArg === null || thisArg === undefined){
thisArg = globalThis
} else {
thisArg = Object(thisArg)
}
if(args === null || args === undefined){
args = []
}
// 如果传入的不是数组,仿照 apply 抛出错误
else if(!Array.isArray(args)){
throw new Error('CreateListFromArrayLike called on non-object')
}
thisArg.fn = this
const res = thisArg.fn(...args)
delete thisArg.fn
return res
}
实现要点
基本上和 call 的实现是差不多的,只是我们需要检查第二个参数的类型。
bind
也可以像 call
和 apply
那样给函数绑定一个 this,但是有一些不同的要点需要注意:
bind
不是指定完 this 之后直接调用原函数,而是基于原函数返回一个内部完成了 this 绑定的新函数
原函数的参数可以分批次传递,第一批可以在调用 bind
的时候作为第二个参数传入,第二批可以在调用新函数的时候传入,这两批参数最终会合并在一起,一次传递给新函数去执行
新函数如果是通过 new 方式调用的,那么函数内部的 this 会指向实例,而不是当初调用 bind
的时候传入的 thisArg。换句话说,这种情况下的 bind
相当于是无效的
ES3 版本
这个版本更接近 MDN 上的 polyfill 版本。
Function.prototype.myBind = function(thisArg){
if(typeof this != 'function'){
throw new Error('the caller must be a function')
}
var fnToBind = this
var args1 = Array.prototype.slice.call(arguments,1)
var fnBound = function(){
// 如果是通过 new 调用
return fnToBind.apply(this instanceof fnBound ? this:thisArg,args1.concat(args2))
}
// 实例继承
var Fn = function(){}
Fn.prototype = this.prototype
fnBound.prototype = new Fn()
return fnBound
}
ES6 版本
Function.prototype.myBind = function(thisArg,...args1){
if(typeof this != 'function'){
throw new Error('the caller must be a function')
}
const fnToBind = this
return function fnBound(...args2){
// 如果是通过 new 调用的
if(this instanceof fnBound){
return new fnToBind(...args1,...args2)
} else {
return fnToBind.apply(thisArg,[...args1,...args2])
}
}
}
实现要点
1.bind
实现内部 this 绑定,需要借助于 apply
,这里假设我们可以直接使用 apply
方法
2.先看比较简单的 ES6 版本:
1). 参数获取:因为 ES6 可以使用剩余参数,所以很容易就可以获取执行原函数所需要的参数,而且也可以用展开运算符轻松合并数组。
2). 调用方式:前面说过,如果返回的新函数 fnBound 是通过 new 调用的,那么其内部的 this 会是 fnBound 构造函数的实例,而不是当初我们指定的 thisArg,因此 this instanceof fnBound
会返回 true,这种情况下,相当于我们指定的 thisArg 是无效的,new 返回的新函数等价于 new 原来的旧函数,即 new fnBound 等价于 new fnToBind,所以我们返回一个 new fnToBind 即可;反之,如果 fnBound 是普通调用,则通过 apply 完成 thisArg 的绑定,再返回最终结果。从这里可以看出,bind 的 this 绑定,本质上是通过 apply 完成的。
3.再来看比较麻烦一点的 ES3 版本:
1). 参数获取:现在我们用不了剩余参数了,所以只能在函数体内部通过 arguments 获取所有参数。对于 myBind
,我们实际上需要的是除开第一个传入的 thisArg 参数之外的剩余所有参数构成的数组,所以这里可以通过 Array.prototype.slice.call
借用数组的 slice 方法(arguments 是类数组,无法直接调用 slice),这里的借用有两个目的:一是除去 arguments 中的第一个参数,二是将除去第一个参数之后的 arguments 转化为数组(slice 本身的返回值就是一个数组,这也是类数组转化为数组的一种常用方法)。同样地,返回的新函数 fnBound 后面调用的时候也可能传入参数,再次借用 slice 将 arguments 转化为数组
2). 调用方式:同样,这里也要判断 fnBound 是 new 调用还是普通调用。在 ES6 版本的实现中,如果是 new 调用 fnBound,那么直接返回 new fnToBind()
,这实际上是最简单也最容易理解的方式,我们在访问实例属性的时候,天然就是按照 实例 => 实例.__proto__ = fnToBind.prototype
这样的原型链来寻找的,可以确保实例成功访问其构造函数 fnToBInd 的原型上面的属性;但在 ES3 的实现中(或者在网上部分 bind 方法的实现中),我们的做法是返回一个 fnToBind.apply(this)
,实际上相当于返回一个 undefined 的函数执行结果,根据 new 的原理,我们没有在构造函数中自定义一个返回对象,因此 new 的结果就是返回实例本身,这点是不受影响的。这个返回语句的问题在于,它的作用仅仅只是确保 fnToBind 中的 this 指向 new fnBound 之后返回的实例,而并没有确保这个实例可以访问 fnToBind 的原型上面的属性。实际上,它确实不能访问,因为它的构造函数是 fnBound 而不是 fnToBind,所以我们要想办法在 fnBound 和 fnToBind 之间建立一个原型链关系。这里有几种我们可能会使用的方法:
// 这里的 this 指的是 fnToBind
fnBound.prototype = this.prototype
这样只是拷贝了原型引用,如果修改 fnBound.prototype
,则会影响到 fnToBind.prototype
,所以不能用这种方法
// this 指的是 fnToBind
fnBound.prototype = Object.create(this.prototype)
通过 Object.create
可以创建一个 __proto__
指向 this.prototype
的实例对象,之后再让 fnBound.prototype
指向这个对象,则可以在 fnToBind 和 fnBound 之间建立原型关系。但由于 Object.create
是 ES6 的方法,所以无法在我们的 ES3 代码中使用。
// this 指的是 fnToBind
const Fn = function(){}
Fn.prototype = this.prototype
fnBound.prototype = new Fn()
这是上面代码采用的方法:通过空构造函数 Fn 在 fnToBind 和 fnBound 之间建立了一个联系。如果要通过实例去访问 fnToBind 的原型上面的属性,可以沿着如下原型链查找:
实例 => 实例.__proto__ = fnBound.prototype = new Fn() => new Fn().__proto__ = Fn.prototype = fnToBind.prototype
“javascript怎么实现call、apply和bind方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!
--结束END--
本文标题: javascript怎么实现call、apply和bind方法
本文链接: https://www.lsjlt.com/news/73058.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0