您的位置：首页 > 其它

es6箭头函数中this的问题

2017-04-10 00:00 585 查看
摘要: es6this箭头函数

<!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类比为函数中定义的变量，使用时按照定义时决定的作用域逐级查找直到找到为止。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  es6
相关文章推荐
新的分享
章节导航