const obj = {
a: function() { console.log(this) },
b: {
c: () => {console.log(this)}
}
}
obj.a() //没有使用箭头函数打出的是obj
obj.b.c() //打出的是window对象!!
MDN描述箭头函数是“箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。"。这里既然obj.b.c()
打出的是window对象,这里该如何理解呢?
从作用域来看的话,这里是形成了哪几个作用域呢?之前理解的是一个花括号就会产生作用域,这样看来并不是....
还是作用域相关知识没学明白
更新:刚查了一下块级作用域,看到有说,块级作用域有四种方法形成,分别是with、try/catch、let、const。也就是说并不是我理解的那种一个花括号形成一个块级作用域。所以这里实际上只是嵌套了几个对象,并不是嵌套了几个作用域的意思?
###差不多,普通的对象是不会创建块级作用域的,所以这里只有一个全局作用域
###简单的一句话总结
常规函数 this
的最终指向的是那个调用它的对象
举一些例子:
// 例1
function t1(){
console.log(this);
}
t1(); // Window
// 其实等同于window.t1()
// 例2
var t2 = {
name:'t2',
fn:function(){
console.log(this);
}
}
t2.fn(); // {name: "t2", fn: ?}
// 例3
var t3 = {
a:1
b:{
fn:function(){
console.log(this.a)
}
}
}
t3.b.fn() // undefined
// t3.b中并没有属性a
而箭头函数体内的 this
对象,都指向外层
所有的箭头函数都没有自己的this
function t4() {
setTimeout(() => {
console.log(this);
},100);
}
// 其实等同于
function t4() {
let _this = this
setTimeout(() => {
console.log(_this);
},100);
}
t4() // window
如果外层没有继续向上找到有为止
function foo() {
return () => {
return () => {
return () => {
console.log(this);
};
};
};
}
foo() // 还是window