普通函数调用时this指向全局对象或undefined;箭头函数不绑定this,继承外层作用域;对象方法中this指向调用者;构造函数中this指向新实例;call/apply/bind可显式控制this。

普通函数调用时 this 指向全局对象或 undefined
在非严格模式下,this 指向 window(浏览器)或 globalThis(Node.js);严格模式下是 undefined。这是最容易误判的起点。
- 直接写
function foo() { console.log(this); },然后调用foo(),结果取决于是否开启严格模式 - 箭头函数不绑定
this,它继承外层作用域的this值,和调用方式无关 - 避免依赖全局
this,尤其在模块化环境(如 ES Module)中,默认就是严格模式
对象方法中 this 指向调用它的那个对象
关键看「点号左边是谁」——也就是谁「拥有并调用了这个函数」。
const obj = {
name: 'Alice',
sayName() {
console.log(this.name); // 'Alice'
}
};
obj.sayName(); // this 指向 obj
-
const fn = obj.sayName; fn();此时this不再是obj,而是全局或undefined(严格模式) - 想固定绑定,可用
fn.bind(obj)、obj.sayName.bind(obj),或改用箭头函数包裹(但注意箭头函数不能作为构造函数) - Vue/React 组件方法常需手动绑定
this,否则事件回调里会丢失上下文
构造函数和 class 中 this 指向新创建的实例
用 new 调用函数时,this 被自动绑定为即将返回的新对象。
function Person(name) {
this.name = name; // this 指向 new 出来的实例
}
const p = new Person('Bob');
- class 的
constructor和普通方法内部的this也指向实例,但前提是方法被实例调用(p.method()),不是被解构后调用 - class 字段初始化中的箭头函数可安全捕获
this,比如handler = () => { console.log(this.name); } - 如果在 class 中定义普通函数方法却没绑定,传给事件监听器仍会丢失
this
call/apply/bind 显式控制 this 指向
这三个方法本质都是「临时替换函数执行时的 this」,区别只在参数传递形式。
立即学习“Java免费学习笔记(深入)”;
-
fn.call(obj, arg1, arg2):立即执行,参数逐个传 -
fn.apply(obj, [arg1, arg2]):立即执行,参数用数组传 -
const bound = fn.bind(obj, arg1):返回新函数,this和部分参数已预设 - 注意:
bind两次不会覆盖,第一次绑定的this无法被后续call改变(除非原函数是箭头函数,但它根本不受影响)











