前言
稍微翻了一下call,apply, bind 的各种论坛上的文章, 发现讲的都太浅了,大部分都只讲了个用法, 对于实现的原理却都没有提,因此,在这里,我写下这篇文章, 希望能让大家认识到原理所在。
众所周知, 这三个函数都是改变执行上下文的 , 那么我们来捋一捋,这些函数内部到底做了什么。
call
Function是函数对象的构造方法,call,apply,bind 都是函数原型上的方法 作为实例 他自身也有这三个方法
圈中的为原型方法, 方块的为实例方法,另外length属性就是argument的长度,我们通常调用一个函数
function a(){ console.log(this,'a')};
function b(b){console.log(b)}
a.call(b,'我是B的参数')
执行a, 并把context指向b, 这里大家都没有疑问, 那么问题来了
function a(){ console.log(this,'a')};
function b(){console.log(this,'b')}
a.call.call.call(b,'b') // 这个结果是什么呢?
答案是
傻眼了吧 ? 怎么执行了B 并且this指向了这个 b字符串
我们来分析一下 call是原型上的方法 那么a.call 他本身也是一个函数 所以a.call.call.call 不就是a.call.call的原型上的call方法么?
所以不就是执行call.call 并改变 call.call的上下文
我们来撸一遍call的源码,
第一个参数是上下文, 当我们call(null),this指向了window 当我们传入字符串 会把字符串包装成对象
a.call 执行 this是指向a的(谁调用this 指向谁) 然后又执行了a方法,所以内部是
Function.prototype.call = function(context){
context = context ? Object(context):window
this() // 因为调用的都是函数 所以this是一个函数 也就是a
}
那这样并未改变this指向啊,咋办? 上句话不是说((谁调用this 指向谁)),所以我们要在内部改变掉this,做如下修改
Function.prototype.call = function(context){
context = context ? Object(context):window
context.fn = this
context.fn() // 通过调用context.fn 来改变调用者 实现fn的this指向context 即改变a内部的this
}
那么参数怎么传呢,我们首先要拿到call的里的参数
Function.prototype.call = function(context,...args){
context = context ? Object(context):window
context.fn = this
let r = context.fn(...args) // 通过调用context.fn 来改变调用者 实现fn的this指向context 即改变a内部的this
delete context.fn //删除属性
return r // 返回执行的结果
}
现在我们回头分析一下a.call.call.call(b,'b')
a.call.call是个函数,它调用call方法 执行它 我们进入函数里面看看
首先把context 也就是b转为字符串对象 它的属性上赋予fn 也就是a.call.call ,然后执行context.fn(...args), 也就是a.call.call('b') 接着删除fn 返回执行结果 宏观来看 是a.call.call这个函数去执行并传入('b') a.call.call 也就是Function.prototype.call 所以就是call('b') 所以啊, 结果才是this是指向string的b 并且参数是undefined
Function.prototype.call = function(context,...args){
context = context ? Object(context):window
context.fn = this //a.call.call('b')
var r = context.fn(...args) // 通过调用context.fn 来改变调用者 实现fn的this指向context 即改变a内部的this
delete context.fn
return r
}
function a(){ console.log(this,'a')};
function b(args){console.log('我是this:' + this,'我是b的参数args:' + args)}
a.call.call.call(b,'我到底是参数呢还是this')
结论!
一个函数call2次或者2次以上 执行的永远是b(b需要是一个函数), 并且call的第二个参数成为当前context
apply
apply 就是参数不同 直接上代码
Function.prototype.apply = function(context,...args){
context = context ? Object(context):window
context.fn = this;
var r;
if(args.length){
r = context.fn(...args)
delete context.fn
}else{
r = context.fn()
}
return r
}
function a(args){ console.log(this,args)};
function b(){console.log('我是this:' + this)}
a.apply(b,[1,2,3,4])
bind 明天写 累了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。