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. linux 中的.so和.a文件

    Linux下的.so是基于Linux下的动态链接,其功能和作用类似与windows下.dll文件. 下面是关于.so的介绍: 一.引言 通常情况下,对函数库的链接是放在编译时期(compile tim ...

  2. 架构之道(3) - 令後端的吐血和喊FUCK的次数锐减

    「那个产品经理不会技术,整天在需求,真操他妈的.」 这是很多产品经理遇到的一句话,如果你把顾客阶段完成了,回到自己的团队,遇到个技术大牛这麽说,那就表示,自己作为产品经理的功力还不够. 等我慢现解释, ...

  3. Python——Pandas 时间序列数据处理

    介绍 Pandas 是非常著名的开源数据处理库,我们可以通过它完成对数据集进行快速读取.转换.过滤.分析等一系列操作.同样,Pandas 已经被证明为是非常强大的用于处理时间序列数据的工具.本节将介绍 ...

  4. python之web自动化测试框架

    梳理下搭建web自动化框架的流程: 创建目录: cases:存放测试用例,unittest框架要求用例名必须以test开头,所以命名test_case.py test_case.py代码如下:继承un ...

  5. 26）PHP，数据库表格中项的数据类型

    类型展示: tinyint-----1个字节 smallint----2个字节 mediumint--3个字节 int------4个字节 bigint---8个字节 字符串类型 最基本最重要的2个: ...

  6. spring boot GlobalExceptionHandler @RestControllerAdvice @ExceptionHandler

    package me.zhengjie.common.exception.handler; import lombok.extern.slf4j.Slf4j; import me.zhengjie.c ...

  7. Nginx的下载与安装

    .创建文件输入网页中需要复制的 cat >/etc/yum.repos.d/nginx.repo<<EOF [nginx-stable] name=nginx stable repo ...

  8. 微软不将《帝国时代》终极版上架Steam的原因到底是什么？

    毋庸置疑的是,<帝国时代>绝对是一款经典游戏.作为一款RTS名作,在过去的20年时间中<帝国时代>销量超过2000万部.数以千万计的玩家都沉溺于这款游戏中,<帝国时代&g ...

  9. 虚拟环境（virtualenv）

    为什么需要虚拟环境: 到目前位置,我们所有的第三方包安装都是直接通过pip install xx的方式进行安装的,这样安装会将那个包安装到你的系统级的Python环境中.但是这样有一个问题,就是如果你 ...

  10. Mybatis的generator自动生成代码

    mybatis-generator有三种用法:命令行.ide插件.maven插件.本次使用maven生成 环境:IDEA,mysql8,maven (1):新建项目,本次以SpringBoot项目为例 ...