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
绑定行为以及作用域的处理。
原因分析
- 箭头函数中的
this
绑定:- 箭头函数不会创建自己的
this
,它继承了定义时的上下文中的this
。因此,箭头函数中的this
是由其外部作用域决定的。 - 在你的代码中,箭头函数是在对象字面量
{}
的上下文中定义的,所以它继承了定义时的全局this
(或模块的this
,取决于代码的执行环境)。
- 箭头函数不会创建自己的
- 全局作用域中的
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 指向
- 全局作用域中, this 指向全局对象.
- 在函数之中, this 的指向取决于函数的调用方式
- 如果函数作为对象的方法被调用, this 指向调用该方法的对象.
- 如果函数使用 call / bind/ apply 进行调用,this 指向作为参数传递的对象.
- 如果函数使用 new 关键字调用, this 指向新创建的实例对象.
- 如果函数被直接调用,则 this 指向全局对象(严格模式下为 undefined)