1. 全局上下文中的 this

在全局上下文中，this 指向全局对象（浏览器环境中为 window 对象）。

console.log(this); // 输出：Window

2. 方法中的 this

在对象方法中，this 指向调用该方法的对象。

javascript

let cat = {
    name: "miao",
    sayName() {
        console.log("我是" + this.name);
    }
};
cat.sayName(); // 输出：我是miao

3. 全局函数中的 this

在全局函数中，this 仍然指向全局对象。

javascript

function fun() {
    console.log(this);
}
window.fun(); // 输出：Window

4. DOM 事件处理器中的 this

在事件处理器中，this 指向触发事件的 DOM 元素。

javascript

const btn = document.querySelector("button");
btn.onclick = function() {
    console.log(this); // 输出：触发事件的按钮元素
};

5. 构造函数中的 this

在构造函数中，this 指向新创建的对象。new 关键字会创建一个新对象，并将 this 绑定到这个新对象上。

javascript

function F() {
    console.log("我是构造函数");
    this.name = "小猫";
}

let f = new F();
console.log(f); // 输出：F { name: '小猫' }

6. 箭头函数中的 this

箭头函数中的 this 是在函数定义时由外层作用域决定的，而不是在调用时绑定。

javascript

let obj = {
    name: "miao",
    sayName: () => {
        console.log(this.name); // 箭头函数中的 this 指向外层作用域的 this
    }
};
obj.sayName(); // 输出：undefined (因为在全局作用域中 this.name 未定义)

在 JavaScript 中，this 的指向在箭头函数中与普通函数有所不同。你遇到的代码中的输出是 undefined，这是因为箭头函数的 this 绑定行为以及作用域的处理。

原因分析

1. 箭头函数中的 this 绑定：
   • 箭头函数不会创建自己的 this，它继承了定义时的上下文中的 this。因此，箭头函数中的 this 是由其外部作用域决定的。
   • 在你的代码中，箭头函数是在对象字面量 {} 的上下文中定义的，所以它继承了定义时的全局 this（或模块的 this，取决于代码的执行环境）。
2. 全局作用域中的 this：
   • 如果代码运行在浏览器环境中，箭头函数的 this 实际上指向 window 对象。由于 window 对象没有 name 属性，this.name 的值是 undefined。

详细解释

• obj.sayName 是一个箭头函数。箭头函数在定义时的 this 是全局对象 window，而不是 obj 对象。
• 因此，当 sayName 被调用时，this.name 实际上是 window.name，而 window 对象上并没有定义 name 属性，所以输出 undefined。

解决方案

如果你希望在箭头函数中访问 obj 的属性，你可以使用传统的函数表达式，或者通过 obj 对象传递 this：

let obj = {
    name: "miao",
    sayName: function() {
        setTimeout(() => {
            console.log(this.name); // 在箭头函数中，this 指向定义它的对象，这里是 obj
        }, 500);
    }
};
obj.sayName(); // 输出：miao

this 指向

1. 全局作用域中, this 指向全局对象.
2. 在函数之中, this 的指向取决于函数的调用方式
   1. 如果函数作为对象的方法被调用， this 指向调用该方法的对象.
   2. 如果函数使用 call / bind/ apply 进行调用,this 指向作为参数传递的对象.
   3. 如果函数使用 new 关键字调用, this 指向新创建的实例对象.
   4. 如果函数被直接调用，则 this 指向全局对象(严格模式下为 undefined)