Where ‘this’ executes？

[dengshicheng1996]

What will each output？

let name = 'global';
const obj = {
    name:'obj',
    test:function(){
        let name = 'scope';
        console.log(this.name);
    }
}
const test = obj.test;
test(); 
obj.test(); 

[lencx]

分析

1. 确定 this 的指向 - this 的值是在执行的时候才能确认，定义的时候不能确认！ 因为 this 是执行上下文环境的一部分，而执行上下文需要在代码执行之前确定，而不是定义的时候。
2. name 是什么 - 使用 let 或 const 声明的 name，和使用 var 有什么区别。
   • let 或 const - 它们在全局（在最顶部的范围）声明时，不会在 window 下创建属性。具体原因参考这里。
   • var - 用 var 声明的变量的作用域是它当前的执行上下文，它可以是嵌套的函数，或者对于声明在任何函数外的变量来说是全局（成为 window 的属性）。
   • window 下的 name 是什么? - 窗口的名称主要用于设置超链接和表单的目标。默认为空字符串。

解题

第一次打印

// 🟢 声明 test 变量，此时函数未发生调用。
const test = obj.test;
// 🟢 函数执行执行上下文为 window, 此时 this 指向 window，即 `this.name` 就是 `window.name`。
// 🟢 问题变为 window 下的 name 是什么？
// 🟢 let 声明的变量不会将 name 绑定到 window 下，所以不可能输出 `global`。
// 🟢 而 `window.name` 恰巧是 window 自有属性，默认值为空字符串。(这个是挖坑)
// 🟢 如果换成其他属性，如 `this.aaa` 之类的，则输出 `undefined`。
// ✅ 所以输出空字符串。
test();

第二次打印

// 🟢 对于 obj.test() 来说，我们只需要记住，谁调用了函数，谁就是 this。
// 🟢 所以在这个场景下 test 函数中的 this 就是 obj 对象。
// ✅ 所以输出 “obj”。
obj.test(); 

---

参考资料

• this
• var
• window.name