JavaScript箭头函数特点(ES6) (转)

时间：2023-01-04阅读：39来源：柠檬博客作者：柠檬博客

====================================================================================================================================

匿名函数最经典的总结：就是谁调用匿名函数，匿名函数中的this就指向谁；匿名函数是有执行上下文，只是执行上下文是执行的时候传递过来，箭头函数中的执行上下文是父级的执行上下文，匿名函数可以作为箭头函数的父级（详见例3）例1.匿名函数

 var name='window';
    var obj = {
        name:'obj',
        nameprintf:function(){
            console.log(this.name)
        }
    }
    var obj1 = {
        name:'obj1'
    }
    obj.nameprintf();//'obj'
    var w = obj.nameprintf;
    w();//'window'，这时候相当于Window.w(),this自然指向的是Window
    obj.nameprintf.call(obj1) //obj1,匿名函数的中的this已经被绑定到了obj1

例2.箭头函数它会直接绑定到它父级的执行上下文里的this。 var name='window'; var obj = { name:'obj', nameprintf:()=>{ console.log(this.name) } } obj.nameprintf();//window,因为此时父级是obj，obj的上下文是window例3.两者相结合 var obj={ num:4, fn:function(){ console.log(this); //匿名函数的this，应该是谁调用指向谁 (() => { console.log(this);//箭头函数的this，应该是父级的执行上下文，这里父级是fn，上下文就是调用fn函数的那个对象，和上面的this指向是一样的 })(); } } obj.fn(); //指向的都是obj var w = obj.fn; w(); //指向的Window var obj1 = {name:'obj1', fn:obj.fn} obj1.fn(); //指向的obj1 obj.fn.call(obj1); //也是指向obj1总结：匿名函数的this是执行时的上下文，箭头函数是定义时的父级执行上下文。如有不对的地方请指出，不喜勿喷，谢谢。--------------------- 作者：Dailoge 来源：CSDN 原文：https://blog.csdn.net/dailoge/article/details/82910404 版权声明：本文为博主原创文章，转载请附上博文链接！

===============================================================================================================

js 匿名函数和箭头函数的this(转)

基础：把函数调用的语法糖去了解清楚。另外不讨论let关键字情况下，js作用域只有两种：函数作用域、全局作用域。this也就只有该两种作用域，没有块级作用域。如var obj={a:this};，这个this不在函数域中，因此它是全局域的，代表window对象。

匿名函数

匿名函数的this指向window。

但严格来说并不一定，说到底还是要看具体代码如何写：

function m(method){
    var a={};
    a.m=method;
    method();//window
    a.m();//对象a
}
m( function(){console.log(this)} );

虽然我们用了匿名函数function(){console.log(this)}，但对函数m(method)来说，它的参数method指向了该匿名函数，因此从该函数的角度来说并不是匿名函数，仍然服从链接文章的逻辑。但绝大多数情况下，我们均可认为匿名函数的this就是window，很少有上面代码那种操作。

箭头函数

链接文章的精髓在于说明：函数内的this，就是调用函数的那个对象。即便是上面的匿名函数也不例外，只要去看具体实现就能明确知道某处匿名函数的this指向。

唯一例外的是箭头函数，因为它不受call函数的影响，因此也不受语法糖的影响。如下：

var m = ()=>{console.log(this)};
var a={};
m();//打印结果为window
m.call(a);//打印结果为window

实际上，箭头函数内的this，就是箭头函数被定义时所在作用域的this。如下例子：

var m = () => { console.log(this) };//定义了一个箭头函数为m
var obj = {
    a: m,
    b: function () {
        m();
    },
    c: function () {
        var m2 = () => { console.log(this) };//每个对象都会新建这个箭头函数
        m2();
    }
}
obj.a();//打印结果：window
obj.b();//打印结果：window
obj.c();//打印结果：obj

var obj2={};
obj2.c=obj.c;
obj2.c();//打印结果：obj2

下面分析四次打印： 1.箭头函数定义时所在作用域为全局域，因此箭头函数内的this就是全局域的this，也就是window。且箭头函数不受call的影响，即语法糖使其还原为obj.a.call(obj)也是无效的，this不会变。因此打印结果为window。 2.虽然是在b函数中调用的，但是m函数并不在这里被定义。后续分析基本同1，打印结果为window 3.c函数中重新定义出一个箭头函数m2，而函数m2所在作用域为c函数作用域，所以c函数内的this是什么，箭头函数内的this就是什么。显然此时c函数内的this是obj，因此最终打印结果为obj 4.同3，此时函数c内的this是obj2，因此打印结果为obj2

总结

1.普通或匿名函数内的this，就是调用函数的那个对象，且绝大多数匿名函数均被实现为this指向window。 2.箭头函数内的this，就是箭头函数被定义时所在作用域的this 3.js的this只会在函数作用域或全局作用域，不要与块级作用域混淆

作者：codeflame链接：https://www.jianshu.com/p/0bcdcb4400c8来源：简书简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

上一篇:JavaScript for 、for...of 、for...in 等 iteration 效率测试下一篇:Javascript和jquery事件--鼠标右键事件，contextmenu

39人参与， 0条评论登录后显示评论回复

注册

JavaScript箭头函数特点(ES6) (转)

友情链接