JavaScript this 指向原理详解：默认规则与调用对象关系

JavaScript this 指向概述

回顾初学 JavaScript 的经历，this 指向问题曾让许多人感到困扰，甚至有人将其与闭包、原型链并称为 JS 中的三大难点。若想在 JavaScript 开发中游刃有余，掌握 this 指向是必经之路。相对而言，this 指向的逻辑最为直观，也是入门时应优先攻克的基础概念。

this 默认指向规则

掌握 this 指向的核心口诀是：函数由哪个对象调用，this 就默认指向该对象（注意 this 必须指向一个对象）。这里强调“默认”是因为可以通过箭头函数、call、apply 或 bind 等方法主动改变 this 的指向。本节仅聚焦于 this 的默认指向行为，暂不涉及手动绑定的情况。

全局作用域中的 this

在全局作用域内，以及在全局作用域中定义的普通函数内部，this 默认指向全局对象 window。

严格模式下的 this

在严格模式（'use strict'）下，全局作用域中定义的函数内部，this 默认指向 undefined。这是 JavaScript 严格模式对全局函数 this 指向的明确规定。

// 非严格模式下
console.log(this); // Window
function doSomething(){
  console.log(this); // Window
}
doSomething(); // 这里可以看成window.doSomething()，所以函数里的this指向全局对象window
// 严格模式下
'use strict';
console.log(this); // Window
function doInStrict(){
  console.log(this); // undefined
}
doInStrict();

对象方法中的 this

当函数作为对象的方法被调用时，this 指向该对象本身。

var a = 1;
var obj = {
  a: 2,
  fn: function(){
    console.log(this); // {a: 2, fn: ƒ}
    console.log(this.a); // 2
  }
};
obj.fn();

观察上述代码的执行结果，可以看到 this 指向了调用该函数的对象 obj。如果将对象中的方法赋值给全局变量 fn1，并通过该变量执行函数，结果会有何不同？

var a = 1;
var obj = {
  a: 2,
  fn: function(){
    console.log(this); // Winidow
    console.log(this.a); // 1
  }
};
var fn1 = obj.fn;
fn1(); // 可以看成window.fn1();

从示例可以看出，虽然 fn1 与 obj.fn 引用的是同一个函数实体，但由于调用方式不同（一个是对象方法调用，一个是全局变量调用），导致函数内部 this 的指向发生了改变。

复杂调用场景分析

接下来分析一个更复杂的嵌套调用场景：

var a = 0;
function fn(){
	consoloe.log(this.a);
}
var obj1 = {
	a: 1,
	fn: function(){
		console.log(this.a);
	}
};
var obj2 = {
	a: 2,
	fn: function(){
		fn();
		obj1.fn();
		console.log(this.a);
	}
}
obj2.fn();

该代码的执行结果依次打印 0、1、2。当 obj2 调用 fn 函数时，首先执行的是内部的 fn()。由于 fn 是在全局作用域中定义的，此处的调用等价于 window.fn()，因此函数内部的 this 指向全局对象 window，this.a 获取的是全局变量 a 的值（即 0）。

接着执行 obj1.fn()。该调用从 obj1 中查找并执行 fn 函数。由于是 obj1 调用了该函数，此时函数内部的 this 指向 obj1 自身。因此，this.a 读取的是对象 obj1 中 a 的属性值（即 1）。

最后打印的是当前函数内部的 this.a。由于该函数是由 obj2 调用的，根据默认指向规则，this 自然指向 obj2。因此，this.a 的结果为 2。

通过上述示例可以得出一个关键结论：函数内部 this 的指向取决于调用函数的对象，而与函数定义的位置无关。

内置函数回调中的 this

在 Window 内置函数的回调函数中，this 通常指向 Window 对象。例如 setInterval、setTimeout 等内置方法的回调函数中，this 默认指向 window 对象。

var name = 'window';
var obj = {
  name: 'obj',
  func: function(){
    setTimeout(function () {
      console.log(this.name) // window
    },1000)
  }
}

obj.func()

在实际开发中，经常需要改变 this 的指向以适应不同场景。关于如何手动更改 this 指向（如使用 call、apply、bind 等），将在后续文章中详细展开，此处不再赘述。

以上内容涵盖了 JavaScript this 指向的基本原理与常见场景，希望对理解函数执行上下文有所帮助。