图文结合深入理解JS中的this值

Js 中奇妙的this值

在 JS 中最常见的莫过于函数了，在函数(方法)中 this 的出现频率特别高，那么 this 到底是什么呢，今天就和大家一起学习总结一下 JS 中的 this。

1. 初探this

this 在 JS 中是一个关键字，不是变量也不是属性名， JS 中不允许给this赋值。

它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。

this 指向的是函数运行时所在的环境，也就是说函数在哪个环境中运行，this 的值就指向哪个环境。
先看下面这段代码的输出结果：

function f() {
   
	console.log(this.x);
}
var obj = {
    
	f: f,
	x: 1
};
var x = 2;

f(); // 2
obj.f(); // 1

有点奇怪，obj.f 和 f 明明指向的是同一个函数为什么执行结果是不同的呢？

原因就在于这两个函数运行时所在的环境是不同的。

可以结合下面的两张图来理解
图一描述了上面这段代码的作用域链
图二描述了运行 obj.f() 时的部分执行过程

图一

图二

如图二所示，执行obj.f() 时，obj 对象需要先找到 f 属性，然后通过 f 属性中的 value 值获取到 f 函数的地址，通过这个地址再获取到 f 函数实际的代码开始运行，因此此时 f 函数运行时所在的环境是 obj 环境。因为 obj环境下 x 的值是 1 ，所以最终输出的值为 1。

执行 f() 时，实际上是从全局对象 window 中找到 f 函数，然后再执行。此时 f 函数运行时所在的环境是全局环境，因为全局环境下的 x 的值为 2 ，因此最终输出的值为 2。

下面是另外一个值得注意的地方：

this 值没有作用域的限制，嵌套函数不会从它的包含函数中继承 this，很多人误以为调用嵌套函数时 this 值会指向它的外层函数的变量对象，其实并不是这样的。
如果想访问这个外层函数的 this 值，需要将 this 值保存在一个变量里，通常使用 self 来保存this。

再看下面这段代码：

let foo = function(