理解JavaScript中this关键字：一份详细教程-js教程-PHP中文网

理解JavaScript中this关键字：一份详细教程

碧海醫心

发布： 2025-11-15 18:28:15

原创

914人浏览过

理解javascript中this关键字：一份详细教程

本文旨在深入解析JavaScript中`this`关键字的运作机制，通过具体的代码示例，阐明`this`的指向规则以及如何在不同场景下正确使用它。我们将重点讨论函数调用方式对`this`的影响，并提供修改后的代码示例，以便读者能够更好地理解`this`在对象方法中的应用。

this关键字的上下文依赖性

在JavaScript中，this关键字的含义取决于它被调用的上下文。简单来说，this的值在运行时动态确定，并且与函数的调用方式密切相关。理解this的关键在于识别函数是如何被调用的。

示例分析与问题解析

原始代码存在的问题在于，this在createObj函数中指向的是全局对象（在浏览器中通常是window对象，在Node.js中是global对象），而不是新创建的对象。这是因为createObj函数本身是在全局上下文中被调用的。

function createObj() {
  // create an object and return from function
  return {
    name: "User Name",
    reference: this,
  };
}
// newly created object assigned to a user variable
var user = createObj();

console.info(user.reference.name); // 可能会输出空或者其他全局对象上的name属性

登录后复制

由于user.reference实际上指向了全局对象，因此user.reference.name尝试访问全局对象的name属性，这通常未定义，所以控制台可能不会输出期望的"User Name"。

立即学习“Java免费学习笔记（深入）”；

解决方案：使用对象方法

要让this指向新创建的对象，可以将reference属性改为一个函数，并在该函数内部使用this。这样，当调用该函数时，this就会指向调用它的对象。

一键抠图

在线一键抠图换背景

查看详情

function createObj() {
  return {
    name: "User Name",
    getReference: function() {
      return this;
    }
  };
}

var user = createObj();

console.log(user.getReference().name); // 输出 "User Name"

登录后复制

在这个修改后的版本中，getReference是一个函数，当通过user.getReference()调用时，this指向user对象。因此，user.getReference().name能够正确访问到user对象的name属性。

箭头函数与this

箭头函数与普通函数在this的绑定上有所不同。箭头函数不会创建自己的this，它会捕获其所在上下文的this值。如果将上面的getReference改为箭头函数：

function createObj() {
  return {
    name: "User Name",
    getReference: () => {
      return this;
    }
  };
}

var user = createObj();

console.log(user.getReference().name); // 输出结果取决于createObj函数被调用的上下文

登录后复制

在这种情况下，getReference箭头函数中的this会指向createObj函数被调用时的this，也就是全局对象。因此，结果可能与原始代码相同，无法正确访问到user对象的name属性。因此，在对象方法中需要使用this时，应当避免使用箭头函数。