如果觉得还有点用, 请您给我一个赞! 您的赞是我坚持下去的动力
- var myobj={
- count:1,
- getCount:function(){
- console.log(this);//myobj
- },
- getCountArrow:()=>{
- console.log(this);//Windows
- },
- getCountArrow2:function(){
- let fn=()=>{ console.log(this) };
- return fn();//myobj
- },
- }
- myobj.getCount() myobj
- myobj.getCountArrow() Windows
- myobj.getCountArrow2() myobj
原理
普通函数: 在执行的时候才绑定 this, 就像下面的步骤
myobj.getCount() ==> myobj.getCount.call(myobj);
所以 getCount 内 this===myobj
箭头函数: 在定义的时候就确定 this, 它的 this 指向在定义的时候继承自外层第一个普通函数的 this.
getCountArrow 在定义的时候往外层寻找函数, myobj 不是函数, 再外层只有 Windows 所以 this 指向 Windows.
getCountArrow2 内的箭头函数, 在定义的时候往外层寻找函数
函数是 getCountArrow2, 所以 this 指向 getCountArrow2 所指向的 this
而调用 myobj.getCountArrow2() ==> myobj.getCountArrow2.call(myobj)
所以 getCountArrow2 里的 this 是 myobj, 所以箭头函数内的 this 也是 myobj
结合上面的原理以下输出的是
- var fn=myobj.getCount;
- fn() ==> Windows.fn() ==> fn.call(Windows) Windows
- var fn=myobj.getCountArrow2;
fn() ==> Windows.fn() ==> fn.call(Windows) ==> getCountArrow2 内部的 this === Windows ==> 箭头函数 this===Windows Windows
如果觉得还有点用, 请您给我一个赞! 您的赞是我坚持下去的动力
来源: http://www.jianshu.com/p/7a78784af4c9