es6箭头函数中this的问题

最新推荐文章于 2024-04-03 22:06:54 发布

weixin_34130389

最新推荐文章于 2024-04-03 22:06:54 发布

阅读量57

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2949632/blog/876417

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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 P{  
        constructor(){  
            this.name = "class p";  
        }  
        func(){  
            var test2 = () =>{  
                console.log(this.name,this);  
            };  
            function test3(){  
                console.log(this);  
            }  
            test1();//obj window  
            test2();//class p  
            test3();//undefined  
        }  
    }  
    var p = new P();  
    p.func();  
      
        </script>  
    </body>  
</html>

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

[javascript] view plain copy
var a='out a';  
function test(){  
    console.log(a); // out a  
}  
function outer(){  
    var a="in a";  
    test()  
};  
outer();

就是说函数test在定义时作用域的嵌套关系就已经决定了。

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

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

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

转载于:https://my.oschina.net/u/2949632/blog/876417