JS学习 之 this

现象

先上代码

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

var foo = obj.foo;
var bar = 2;

obj.foo() // 1
foo() // 2
复制代码

解释

this指向的是 函数运行时所在的环境 。对于obj.foo()来讲，foo运行在obj环境，因此this指向obj；对于foo()来讲，foo运行在全局环境，因此this指向全局环境。因此，二者的运行结果确定不同。

疑问

函数的运行环境究竟是怎么决定的？为何obj.foo()就是在obj环境执行，而一旦var foo = obj.foo，foo()就变成在全局环境执行？

试着说说原理

内存的数据结构

(首先要了解堆与栈，可参考以前写的 JS 学习 之 栈与堆 )

JavaScript 语言之因此有this的设计，跟内存里面的数据结构有关系。

var obj = { foo:  1 };
复制代码

上面的代码将一个对象赋值给变量obj。由于是引用数据类型，JavaScript 引擎会先在堆内存里面生成一个对象 { foo: 5 }，而后把这个对象的地址指针赋值给变量obj，储存在栈内存中。也就是说，变量obj只是栈内存中保存一个地址指针。要读取obj.foo，引擎先从栈内存中拿到obj保存的地址指针，而后再从该地址指针读出原始的对象，返回它的foo属性。

函数

var obj = { foo: function () {} };
复制代码

若是对象属性的值是一个函数，这时，引擎会将函数单独保存在内存中，而后再将函数的地址赋值给foo属性的value属性。

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

// 单独执行
f()

// obj 环境执行
obj.f()
复制代码

因为函数是一个单独的值，因此它能够在不一样的环境（上下文）执行。

环境变量

var f = function () {
  console.log(x);
};
复制代码

JavaScript 容许在函数体内部，引用当前环境的其余变量。

var f = function () {
  console.log(this.x);
}
复制代码

因为函数能够在不一样的运行环境执行，因此须要有一种机制，可以在函数体内部得到当前的运行环境（context）。因此，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

回到本文开头提出的问题，obj.foo()是经过obj找到foo，因此就是在obj环境执行。一旦var foo = obj.foo，变量foo就直接指向函数自己，因此foo()就变成在全局环境执行。

参考

1. JavaScript 的 this 原理