es6箭头函数中this的问题

来源：互联网发布：给我庇护知乎编辑：程序博客网时间：2024/04/28 11:42

开门见山直接上代码

<!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 windowtest2();//class ptest3();//undefined}}var p = new P();p.func();</script></body></html>

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

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类比为函数中定义的变量，使用时按照定义时决定的作用域逐级查找直到找到为止。

0 0