this的指向由函数调用方式决定:1. 全局环境中指向全局对象(非严格模式)或undefined(严格模式函数中);2. 作为对象方法调用时指向该对象;3. 构造函数中指向新创建的实例;4. call、apply、bind可显式绑定this;5. 箭头函数无自身this,继承外层作用域;6. 事件处理函数中通常指向触发事件的DOM元素。

在JavaScript中,this关键字的指向是许多开发者容易混淆的核心概念。它不是在函数定义时决定的,而是在函数运行时根据调用上下文动态确定的。理解this的指向,关键在于分析函数是如何被调用的。
1. 全局环境中的this
在全局执行环境中(浏览器中),无论是否在严格模式下,this都指向全局对象。
• 非严格模式:this指向window(浏览器)或global(Node.js)• 严格模式:"use strict"下,在全局函数中this仍为undefined,但全局环境中this仍是全局对象
例如:
console.log(this === window); // true(浏览器中)
function fn() {
console.log(this === window);
}
fn(); // true(非严格模式)
2. 函数作为对象方法调用
当函数作为某个对象的方法被调用时,this指向该对象。
立即学习“Java免费学习笔记(深入)”;
• this绑定到调用该方法的对象• 即使方法是在外部定义,只要通过对象.方法()调用,this仍指向该对象
示例:
const obj = {
name: 'Alice',
greet() {
console.log(this.name);
}
};
obj.greet(); // 输出 'Alice',this指向obj
3. 构造函数中的this
使用new操作符调用函数时,this指向新创建的实例对象。
• 构造函数内部的this代表即将生成的实例• 若构造函数返回一个非原始类型对象,则this指向该返回对象
例子:
function Person(name) {
this.name = name;
}
const p = new Person('Bob');
console.log(p.name); // 'Bob',this指向新创建的p实例
4. 显式绑定:call、apply、bind
可以通过call、apply或bind方法显式指定this的值。
• call和apply立即执行函数,并将第一个参数作为this的值• bind返回一个新函数,其this被永久绑定到指定对象
代码演示:
function showInfo() {
console.log(this.name);
}
const user = { name: 'Charlie' };
showInfo.call(user); // 'Charlie'
const boundFn = showInfo.bind(user);
boundFn(); // 'Charlie'
5. 箭头函数中的this
箭头函数没有自己的this,它的this继承自外层作用域(词法作用域)。
• 无法通过call、apply、bind改变箭头函数的this• 常用于回调函数中保持this指向外层对象
示例:
const obj = {
name: 'Diana',
delayGreet: function() {
setTimeout(() => {
console.log(this.name); // 'Diana',this来自delayGreet的this
}, 1000);
}
};
obj.delayGreet();
6. 事件处理中的this
DOM事件处理函数中,this通常指向触发事件的DOM元素。
• addEventListener绑定的函数,this为事件目标元素• 若使用箭头函数,则this取决于外层作用域
比如:
button.addEventListener('click', function() {
console.log(this === button); // true
});
基本上就这些。掌握this的关键是看函数如何被调用,而不是在哪里定义。不同调用方式决定了this的不同指向,理解这一点就能应对大多数场景。不复杂但容易忽略细节,多练习常见模式会更熟练。











