10分钟内学会JavaScript中“this”这个关键字！

在学习JavaScript时，您可能会怀疑以下两种编码方式，这可能会产生不同的结果。

var obj = {
 foo: function () {}
};
var foo = obj.foo;
// coding 1
obj.foo()
// coding 2
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指向全球环境。因此，结果是不一样的。

这种解释是正确的，但教科书经常不告诉你为什么会发生这种情况？换句话说，它没有告诉您如何确定函数的运行环境？例如，为什么obj.foo()在obj环境，而曾经var foo = obj.foo, foo()会在全局环境中执行吗？

只有在理解了原则之后，你才能充分理解this.

2.存储器的数据结构

JavaScript之所以有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属性描述对象的属性。

3.功能

结构非常清楚，问题是属性的值可能是一个函数。

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

现在，引擎将函数分别保存在内存中，然后将函数的地址分配给value的属性foo.

{
 foo: {
 [[value]]: the address of the function
 ...
 }
}

因为函数是一个单独的值，所以可以在不同的上下文中执行它。

var f = function () {};
var obj = { f: f };
// execute separately
f()
// execute in obj context
obj.f()

4.上下文变量

JavaScript允许您引用函数主体内当前上下文的其他变量。

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

在上面的代码中，变量x将在函数的正文中使用。变量由正在运行的上下文提供。

由于函数可以在不同的运行时上下文中执行，因此需要一种机制来获取函数主体中的当前上下文。因此，this出现，并且它被设计为指向函数体内函数当前运行的上下文。

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

在上述代码中，this.x在函数体中指向x当前正在运行的上下文。

var f = function () {
 console.log(this.x);
}
var x = 1;
var obj = {
 f: f,
 x: 2,
};
// execute separately
f() // 1
// execute in obj context
obj.f() // 2

在上面的代码中，函数f在全局上下文中执行，并且this.x指向x在全球范围内。

在obj背景，this.x指点obj.x.

现在让我们试着回答开始时提出的问题。obj.foo()发现foo贯通obj，因此它将在obj背景。一次var foo = obj.foo，变量foo直接指向函数本身，因此foo()在全局上下文中执行。