要说call,apply和bind函数,算是js中最为常见、又极为好用的三个函数了,那么,假若api没有提供者三个函数,又如何手写出来呢?下面一一剖析之。
call函数
用法:
foo.call(context, arg1, arg2, ...)
说明:
call是属于Function类的方法,确切的说,应该是Function.prototype下面的方法。
当我们声明一个函数,其实也就是声明了一个Function类的实例,只有实例的function才能使用call。
ok,我们可以这么定义我们自己的call方法:
Function.prototype.mycall = function(context){
console.log(context) //上下文:{ name: 'jack' }
console.log(this) //当前函数:[Function: foo]
}
var obj = {name:'jack'}
function foo(){
//Funciton类的实例
}
foo.mycall(obj)
也就是说,我们需要将foo函数,用context对象来执行。当然了,context可以传null(如果是null的话,默认就是指向window了)。
换成通俗的写法就是:
context.foo(arg1,arg2,...)
思路:
有点绕,不过如此一来,call函数的实现思路也就有了:
1、可以在context对象下面新增一个临时键
2、用新增的临时键保存当前的this(也就是foo)
3、用context对象执行foo方法,将执行的结果暂存
4、删掉context新增的临时键
5、返回执行的结果。
代码:
Function.prototype.mycall = function(context){
console.log(context) //{ name: 'jack' }
console.log(this) //[Function: foo]
context = context || window //如果context是null,那就指向window
context.fn = this //新增临时键,也就是:context = {name:'jack',fn:foo}
let args = [...arguments].slice(1) // 截取除第一个之外的参数
let res = context.fn(...args) // 将数组散列化展开,作为形参传入,然后执行,暂存结果
delete context.fn //删除临时键
return res //返回结果
}
//测试
var obj = {name:'jack'}
function foo(){
//Funciton类的实例
console.log(this.name)
}
foo.mycall(obj)
apply函数
搞明白了call的原理,apply就十分简单了,二者唯一不同的是传入的参数形态不同。call的传入的是参数散列,而apply传入的是一个数组。
我们直接上代码:
Function.prototype.myapply = function(context){
console.log(context) //{ name: 'jack' }
console.log(this) //[Function: foo]
context = context || window //如果context是null,那就指向window
context.fn = this //新增临时键,也就是:context = {name:'jack',fn:foo}
let res = null
if(arguments[1]){
res = context.fn(...arguments[1])
}else {
res = context.fn()
}
delete context.fn //删除临时键
return res //返回结果
}
//测试
var obj = {name:'jack'}
function foo(){
//Funciton类的实例
console.log(this.name)
}
foo.myapply(obj)
bind函数
bind跟call不一样的地方在于,bind是延迟执行的,它其实是一个柯里化函数。
不懂柯里化的同学请参阅://www.greatytc.com/p/f4773054844e
思路:
1、暂存当前this(也就是foo)
2、新增一个内函数F。
3、在F中用context执行foo,并返回结果。
代码:
Function.prototype.mybind = function(context){
let that = this //保存this,也就是foo
let args = [...arguments].slice(1)
//柯里化
return function F(){
return that.apply(context,args.concat(...arguments))//拼合两部分的参数,这里图省事直接用了apply~~
}
}
//测试:
var obj = {name:'jack'}
function foo(){
//Funciton类的实例
console.log(this.name)
}
var test = foo.mybind(obj)
test()