Skip to content

1. 全局上下文中的 this

在全局上下文中,this 指向全局对象(浏览器环境中为 window 对象)。

javascript
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

javascript
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)