JS中this关键字的指向问题该如何理解

JavaScript中的this关键字是一个动态绑定的概念，它的指向并不是在函数定义时确定的，而是在函数调用时根据调用上下文动态决定的，不同的调用方式会让this指向完全不同的对象，这也是很多开发者觉得this难以掌握的核心原因。

this指向的核心判断逻辑

判断this指向可以遵循一个基础原则：先找到函数的调用位置，再根据调用方式匹配对应的绑定规则，优先级从高到低依次是new绑定、显式绑定、隐式绑定、默认绑定。

1. 默认绑定

当函数独立调用，没有任何上下文对象修饰时，会触发默认绑定，此时在非严格模式下this指向全局对象，严格模式下this指向undefined。

// 非严格模式
function defaultBindTest() {
  console.log(this);
}
defaultBindTest(); // 输出 window（浏览器环境）

// 严格模式
'use strict';
function strictDefaultTest() {
  console.log(this);
}
strictDefaultTest(); // 输出 undefined

2. 隐式绑定

当函数作为某个对象的方法被调用时，会触发隐式绑定，此时this指向调用该函数的对象。需要注意的是，隐式绑定存在丢失的情况，比如将函数赋值给变量后再调用，就会回到默认绑定规则。

const obj = {
  name: 'testObj',
  getName: function() {
    console.log(this.name);
  }
};
obj.getName(); // 输出 testObj，this指向obj

// 隐式绑定丢失场景
const getNameFn = obj.getName;
getNameFn(); // 输出空字符串，非严格模式下this指向window，window没有name属性

3. 显式绑定

我们可以通过call、apply、bind三个方法手动指定函数调用时this的指向，这就是显式绑定。其中call和apply会立即执行函数，区别是传参方式不同，bind会返回一个绑定了this的新函数，不会立即执行。

function showInfo(age) {
  console.log(this.name + '的年龄是' + age);
}
const person = { name: '张三' };

// call调用，参数逐个传入
showInfo.call(person, 20); // 输出 张三的年龄是20

// apply调用，参数以数组形式传入
showInfo.apply(person, [25]); // 输出 张三的年龄是25

// bind返回新函数，后续调用时this固定为绑定的对象
const boundFn = showInfo.bind(person, 30);
boundFn(); // 输出 张三的年龄是30

4. new绑定

当使用new关键字调用构造函数时，会触发new绑定，此时this指向新创建的实例对象。new调用过程中会完成四个步骤：创建空对象、将空对象的原型指向构造函数的prototype、将构造函数的this绑定到这个空对象、如果函数没有返回其他对象，则返回这个新对象。

function Person(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  };
}
const p1 = new Person('李四');
p1.sayName(); // 输出 李四，this指向实例p1

箭头函数的this指向

箭头函数没有自己的this，它的this继承自外层作用域的this，并且在定义时就确定了，后续不会因为调用方式的改变而变化，这也是箭头函数和普通函数最核心的区别。

const obj2 = {
  name: 'obj2',
  normalFn: function() {
    console.log(this.name);
    // 箭头函数的this继承normalFn的this，也就是obj2
    const arrowFn = () => {
      console.log(this.name);
    };
    arrowFn();
  }
};
obj2.normalFn(); 
// 第一行输出 obj2
// 第二行输出 obj2

// 箭头函数无法通过call、apply、bind修改this指向
const arrowTest = () => {
  console.log(this);
};
arrowTest.call({ name: 'test' }); // 输出 window，this没有被改变

常见误区与解决方法

开发中经常会遇到回调函数里this指向不符合预期的问题，比如定时器回调、事件监听回调里的this默认指向window，这时候可以用bind绑定期望的this，或者使用箭头函数解决。

const user = {
  name: '王五',
  age: 28,
  // 错误写法：定时器回调的this默认指向window
  wrongUpdate: function() {
    setTimeout(function() {
      console.log(this.age); // 输出 undefined
    }, 1000);
  },
  // 正确写法1：用bind绑定this
  rightUpdate1: function() {
    setTimeout(function() {
      console.log(this.age); // 输出 28
    }.bind(this), 1000);
  },
  // 正确写法2：用箭头函数，继承外层this
  rightUpdate2: function() {
    setTimeout(() => {
      console.log(this.age); // 输出 28
    }, 1000);
  }
};
user.wrongUpdate();
user.rightUpdate1();
user.rightUpdate2();

注意：如果多个绑定规则同时适用，优先级高的规则会生效，比如同时用了new和显式绑定，new绑定的优先级更高，this会指向新实例。

thisJavaScript函数调用上下文绑定规则修改时间：2026-06-24 07:18:32