1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


23


24


25


26


27


28


29


30


31


32


33


34


35


<!DOCTYPE html>  


<html>  


    <head>  


        <meta charset="UTF-8">  


        <title></title>  


    </head>  


    <body>  


        <script>  


      


    var test1=()=>{  


        console.log(this.name,this);  


    }  


    window.name = "obj window";  


    class {  


        constructor(){  


            this.name = "class p";  


        }  


        func(){  


            var test2 = () =>{  


                console.log(this.name,this);  


            };  


            function test3(大专栏  es6this箭头函数 class="params">){  


                console.log(this);  


            }  


            test1();


            test2();//class p  


            test3();//undefined  


        }  


    }  


    var p = new P();  


    p.func();  


      


        </script>  


    </body>  


</html>

js中函数作用域属于静态作用域，就是函数作用域的嵌套关系在函数定义时确定了，废话不多说直接上例子

1


2


3


4


5


6


7


8


9


10


[javascript] view plain copy


var a='out a';  


function test(){  


    console.log(a); // out a  


}  


function outer(){  


    var a="in a";  


    test()  


};  


outer();

ok，接下来就是箭头函数的this，

以下为我的理解，如有不正之处，望指点。

箭头函数不能用于构造函数，在上面的例子中，test1箭头函数定义在最外面，当test1函数打印this对象时会根据定义时决定的作用域嵌套关系逐级向上查找，因此查找的是window对象，在test2箭头函数中，由于test2定义在类P的func函数中，test2箭头函数打印this时，会先去func方法查找，找到了，然后打印。test3中，类中的方法默认开启了严格模式 所以test3中this为undefined。 可以将箭头函数中的this类比为函数中定义的变量，使用时按照定义时决定的作用域逐级查找直到找到为止。

原文地址

es6this箭头函数的更多相关文章

  1. 区别ES3ES5和ES6this的指向问题。区分普通函数和箭头函数中this的指向问题

    ES3 ES5this的指向问题 this指的是该函数被调用的对象 var foo = function () { this.a = 'a', this.b = 'b', this.c = { a: ...

  2. ES6 箭头函数中的 this？你可能想多了（翻译）

    箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...

  3. ES6箭头函数与展开运算符

    箭头函数:省去了关键字function和return: eg: reduce=(a,b)=>a+b;//返回a+b的值 redduce=(a,b)=>{console.log(a);con ...

  4. 箭头函数和Buffer对象

    一.箭头函数 普通函数1 var add = function (a, b) { return a + b; } 普通函数2 function add (a, b) { return a + b; } ...

  5. 深入理解this机制系列第三篇——箭头函数

    × 目录 [1]痛点 [2]解决 [3]基本用法[4]回调函数[5]注意事项 前面的话 this机制与函数调用有关,而作用域则与函数定义有关.有没有什么是可以将this机制和作用域联系起来的呢?本文将 ...

  6. Es6 箭头函数

    1.单参数function cheng(a=3){    return a*a;}let cheng= (a=3)=>a*a;console.log(cheng(9));2.多参数functio ...

  7. 【javascript】箭头函数

    ES6标准新增了一种新的函数:Arraw Function(箭头函数). x => x * x 这个函数相当于 function (x){ return x * x; } 题外话:user st ...

  8. JS中generater和箭头函数

    generater跟函数很像: function* fn(x){ yield x; yield x++; return x;} 如上所示,generater用function*定义,可以用yield返 ...

  9. 箭头函数 Arrow Functions/////////////////////zzz

    箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本,这样可以避免不支持JS的浏览器误将JS代码显示为文本.你会写这样的代码: < ...

随机推荐

  1. Spring Boot Session 超时时间

    springboot session https://www.jianshu.com/p/523572937db8 springboot2以上版本设置session超时时间 https://blog. ...

  2. [原]win10拖拽贴靠功能注册表项调查记录

    win10的拖拽贴靠功能被禁用了,偶然的机会,在设置中看到了相关的设置项,如下图 直觉告诉我一定是设置注册表中的某一项,于是决定调查下具体的注册表位置.请出procmon.exe,然后关闭贴靠功能,停 ...

  3. svn http

    yum install -y httpd subversion mod_dav_svn mkdir -p /var/lib/svn cd /var/lib/svn svnadmin create de ...

  4. PAT甲级——1008 Elevator

    PATA1008 Elevator The highest building in our city has only one elevator. A request list is made up ...

  5. transcription-coupled repair|Germ|HK|TS|Mutation|四类变异

    生命组学-可遗传变异 GC content:碱基: GC content不同的植物对应的gene length,可看作上图的转置: 由GC content看出来碱基变异程度,可以找到对应碱基改变,所以 ...

  6. if necessary

  7. redis安装zmalloc.h:50:31: 致命错误：jemalloc/jemalloc.h：没有那个文件或目录

    问题: zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录 解决方案:执行命令:make MALLOC=libc make MALLOC=libc

  8. Reveal详细安装教程

    Reveal的详细安装使用 标签: Reveal 工具 调试 iOS 一.终端的操作 首先最重要的一点,要先把Reveal软件放到Application中,否则路径是错的,后面的设置也就没有作用了 打 ...

  9. cesium初探之加载三维模型

    项目需要用到二三维地图切换,本来准备研究ArcGIS js for Web 3d,但考虑到版权的问题,决定试着用cesium来做,于是花了2天时间抱着试试看的心态把cesium从环境配置到加载三维模型 ...

  10. 第19届亚太零售商大会 | 奇点云CEO行在受邀出席发表演讲

    2019年9月5日—7日,第19届亚太零售商大会在重庆举行. 亚太零售商大会作为世界三大零售盛会之一,是亚太地区零售行业最具规模.最具影响力的零售行业盛会.本次大会以“新零售·新消费·新动力·合作与共 ...