深入理解 JavaScript 中 this 的指向原理与判断方法

如何准确判断 JavaScript 中 this 的指向？

• ①当函数在全局环境中被调用时，this 指向全局对象 window。
• ②当函数作为对象的方法被调用时，this 指向该方法所属的对象。
• ③当函数作为构造函数被调用（使用 new 关键字）时，this 指向新创建的对象实例。
• ④可以通过 apply、call 或 bind 方法显式地改变 this 的指向。
• ⑤箭头函数中的 this 绑定于其定义时所处的上下文，且不可被修改；箭头函数的 this 指向取决于外层作用域中离它最近的第一个非箭头函数的 this。

如何深入理解 this 的运行原理？

要彻底理解 JavaScript 中的 this，需要掌握以下两种基本的调用方式。

var obj = {
  foo: function () {}
};
 
var foo = obj.foo;
 
// 写法一
obj.foo()
 
// 写法二
foo()

这两种写法分别代表函数直接调用和作为对象方法调用。虽然 obj.foo 和 foo 在引用上指向同一个函数，但它们的执行结果可能截然不同。请参考以下代码示例：

var obj = {
  foo: function () { console.log(this.bar) },
  bar: 1
};
 
var foo = obj.foo;
var bar = 2;
 
obj.foo() // 1
foo() // 2

为什么运行结果会出现差异？原因在于函数体内部使用了 this 关键字。许多教材和资料指出，this 指的是函数运行时所在的环境。对于 obj.foo() 而言，foo 是在 obj 的环境中运行，因此 this 指向 obj；而对于独立的 foo() 调用，foo 是在全局环境中运行，因此 this 指向全局环境。这就是两者运行结果不同的根本原因。

那么，究竟该如何判断 this 的指向？或者说，this 具体运行在哪个环境里？

var obj = { foo: 5 };

上述代码将一个对象赋值给了变量 obj。JavaScript 引擎会先在内存中生成对象 {foo: 5}，然后将该对象的内存地址赋值给变量 obj。

obj 本质上是一个存储地址的变量。读取 obj.foo 时，引擎会先从 obj 中获取内存地址，再根据该地址读取原始对象，从而返回 foo 属性。

foo 属性是如何在内存中保存的？

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

foo 属性的值被保存在属性描述对象的 value 属性中。

如果该属性的值是一个函数，情况会有何不同？

var obj = { foo: function () {} };

此时，JavaScript 引擎会将函数单独保存在内存中，然后将该函数的内存地址赋值给 foo 属性的 value 属性。

{
  foo: {
    [[value]]: 函数的地址
    ...
  }
}

正因为函数是独立存储在内存中的，所以它可以在不同的环境（上下文）中执行。

var f = function () {};
var obj = { f: f };
 
// 单独执行
f()
 
// obj 环境执行
obj.f()

JavaScript 允许在函数体内部引用当前环境中的其他变量。

var f = function () {
  console.log(x);
};

在这个函数中，我们使用了其他变量 x。

请看下面的代码示例：

var f = function () {
  console.log(this.x);
}
 
var x = 1;
var obj = {
  f: f,
  x: 2,
};
 
// 单独执行
f() // 1
 
// obj 环境执行
obj.f() // 2

可以看到函数的运行结果不同。当函数 f 在全局环境中执行时，它的 this.x 指向全局环境中的 x。

而在 obj 环境中执行的 obj.f，其 this 显然位于 obj 环境内，因此 this 指向 obj 环境下的 obj.x。

因此，文章开头提到的 obj.foo() 是通过 obj 找到 foo，即在 obj 环境中执行。而一旦执行 var foo = obj.foo，变量 foo 就直接指向函数本身，此时调用 foo() 是在全局环境中执行。

function foo() {
    console.log(this.name);
}
 
function Foo(fn) {
    fn();
}
 
var obj = {
    name: 'zl',
    foo,
}
 
var name = "Heternally";
Foo(obj.foo);

那么上述代码的执行结果具体是什么呢？

到此为止，关于 JavaScript this 的原理及指向详解的文章就介绍到这里。更多相关 JavaScript this 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！