JavaScript：this（二）

  本文接着上篇文章继续和大家聊聊this，如果是通过上篇文章来到了本篇文章那么应该对this有一定的理解了，肯定还带着些对this的疑惑，下面将讲述关于this的剩下内容，彻底的理解this。如果没有看过上篇文章的同学，建议先看上篇文章的内容。

  在讲this之前我们先了解一个前置知识，简单赋值，我们先来看看规范中怎么定义的：

11.13.1 Simple Assignment ( = )

The production AssignmentExpression : LeftHandSideExpression = AssignmentExpression is evaluated as follows:

1. Let lref be the result of evaluating LeftHandSideExpression.
2. Let rref be the result of evaluating AssignmentExpression.
3. Let rval be GetValue(rref).
4. Throw a SyntaxError exception if the following conditions are all true:

• Type(lref) is Reference is true
• IsStrictReference(lref) is true
• Type(GetBase(lref)) is Environment Record
• GetReferencedName(lref) is either "eval" or "arguments"

1. Call PutValue(lref, rval).
2. Return rval.

产生式AssignmentExpression : LeftHandSideExpression = AssignmentExpression按照下面的过程执行 :

1. 令lref为解释执行LeftHandSideExpression的结果
2. 令rref为解释执行AssignmentExpression的结果
3. 令rval为GetValue(rref)
4. 抛出一个SyntaxError异常，当以下条件都成立：

• Type(lref)为Reference
• IsStrictReference(lref)为true
• Type(GetBase(lref))为环境记录项
• GetReferencedName(lref)为"eval"或"arguments"

1. 调用PutValue(lref, rval)
2. 返回rval

  对于简单赋值A=B，可以这么理解：

1. 计算表达式A，得到一个引用lrefA
2. 计算表达式B，得到一个值rvalB
3. 将rvalB赋给lrefA指向的名称绑定
4. 返回结果rvalB

  上篇文章讲到了this的默认绑定和隐性绑定，默认绑定和隐性绑定中还有几个容易出错的场景，我们先来看看默认绑定：

默认绑定

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

  实例一就是默认绑定的一个很经典的场景，第一个控制台输出是2，这个大家应该都没有疑问，是隐性绑定，上篇文章已经分析过了。

  有疑惑的是第二个控制台输出为什么是1，也相信很多人也知道是1，说这就是默认绑定，函数bar在函数foo中调用，函数bar是独立调用，bar没有带有任何修饰符的函数调用，所以bar中this是指向全局对象window，所以输出是1。对，这种解释没毛病，大部分文章都是这么解释的，但是这种解释没有依据，不能很好的说服我，感觉就是在强迫我就是这么理解的，时间长了，好像是这么回事。下面从规范中解析为什么第二个输出是1，从根本上理解这种默认绑定。

  前面的文章提到函数调用的时候会创建想要的执行上下文：

executionContext: {
    variable object：vars, functions, arguments
    scope chain: variable object + all parents scopes
    thisValue: context object
}

  每个执行上下文中都有一个变量对象（Variable object），变量对象包含了函数形参、函数声明以及所有的变量声明。

  我们回到我们的实例一中来，obj.foo()调用的时候，会创建函数foo的执行上下文，函数的变量对象如下：

foo_VO = {
  bar: <reference to FunctionDeclaration 'bar'>
}

  foo函数调用有变量对象，自然也会有活动对象这个概念，活动对象前面的文章也讲过了，我们来看看ECMAScript规范是怎么说的，关于执行上下文、变量对象等概念在ECMAScript5、ECMAScript6都没有提及到，在早版本ECMAScript3.1中有讲解：

10.1.6 Activation Object

When control enters an execution context for function code, an object called the activation object is created and associated with the execution context. The activation object is initialised with a property with name arguments and attributes { DontDelete }. The initial value of this property is the arguments object described below.

  当函数调用时创建了执行上下文，活动对象创建并与执行上下文相关联。活动对象被初始化，并含有一个名为arguments属性和不能删除的属性，初始化的属性就是arguments对象。

The activation object is then used as the variable object for the purposes of variable instantiation.

  为了变量实例化，活动对象被用作变量对象。

  ECMAScript3.1中解释了函数调用的时候，活动对象被用作变量对象。我们再来看看规范中进入了执行上下文，函数调用是怎么说的：

10.2.3 Function Code

• The scope chain is initialised to contain the activation object followed by the objects in the scope chain stored in the [[Scope]] property of the Function object.
• Variable instantiation is performed using the activation object as the variable object and using property attributes { DontDelete }.
• The caller provides the this value. If the this value provided by the caller is not an object (including the case where it is null), then the this value is the global object.

  我们只要先看第二点，变量实例化，活动对象被用作了变量对象。这么说创建执行上下文的时候，有变量对象， 当执行的时候，活动对象被用作变量对象。

  我们再看看函数foo执行上下文中的活动对象是啥：

foo_AO = {
  arguments: {
    length: 0
  },
  bar: <reference to FunctionExpression "bar">
}

  在创建函数执行上下文阶段，变量对象被创建，变量对象的属性不能被访问，此时的函数还没有执行，当函数来到执行阶段，变量对象被激活，变成了活动对象，并且里面的属性都能访问到，开始进行执行阶段的操作。

  所以在实例一中，函数bar()等价于foo_AO.bar()，实例一可以这么的改写：

// 实例一改写
var x = 1;
var obj = {
  x: 2,
  foo: function() {
    console.log(this.x); // 2
    function bar() {
      console.log(this.x); // 1
    }
    foo_AO.bar(); // bar()
  }
}
obj.foo();

  当函数obj.foo()被调用后，同时函数bar也会被调用，也就是foo_AO.bar()被调用，这样也就回到了我们熟悉的模式了，函数bar被foo_AO修饰了，foo_AO.bar是属性访问，foo_AO.bar会被解释执行为一个Reference：

foo_AO.bar_reference = {
  base: foo_AO,
  name: 'bar
}

  因为foo_AO.bar会被解释执行为一个Reference，foo_AO也是一个对象，所以thisValue = GetBase(foo_AO.bar_reference)，也就是foo_AO，然而在ECMAScript程序中我们是不能直接接触到活动对象，只是内部实现，那this真正的指向是指向哪里呢，我们来看看规范（3.1）中怎么说的：

10.1.6 Activation Object

The activation object is purely a specification mechanism. It is impossible for an ECMAScript program to access the activation object. It can access members of the activation object, but not the activation object itself. When the call operation is applied to a Reference value whose base object is an activation object, null is used as the this value of the call.

  活动对象纯粹是一种规范机制。ECMAScript程序是可能直接访问活动对象。它可以访问活动对象的成员，但是不能访问活动对象本身。当调用操作应用到其基（base）值是活动对象的引用（Reference）时，将null作为this的值。

  所以实例一的this指向null，最终会不会是null呢，我们再来看看下面的：

10.2.3 Function Code

The caller provides the this value. If the this value provided by the caller is not an object (including the case where it is null), then the this value is the global object.

  当this为null的是，this又会指向全局对象，也就是window。所以实例一中第二个控制台输出的this是执行window，即this.x = 1。

  讲到这里，把实例一中的第二个控制台输出的this为什么是window的真正原因讲完了，大家应该能真正的理解是什么原因了，也不需要硬记。

隐性绑定

// 实例二
function foo() {
  console.log(this.a);
}
var obj2 = {
    a: 1,
    foo: foo
};

var obj1 = {
    a: 2,
    obj2: obj2
};
obj1.obj2.foo(); // 1

  实例二也是隐性绑定的一个经典的应用场景，控制台最后输出的值是1，为什么是1，大部分文章的解释是在对象属性引用链中只有最后一层在调用位置中起作用，是this的隐性绑定，在实例二中起作用的是obj2，所以this指向的obj2，即控制台输出的是1，这也是在强行解释，并没有给出合理的解释原因。

  其实实例二考察的不仅仅是this的指向，还考察了JavaScript的运算符优先级，如果能把运算符的优先级捋清楚，这种隐性绑定是很好理解的。

  obj1.obj2.foo()执行，其执行顺序是怎么样的呢，可以参考JavaScript运算符的优先级汇总表，优先级最高的是()，优先级是20，所以obj1.obj2.foo()先执行的是函数，所以其函数调用后，产生的MemberExpression就是obj1.obj2.foo，那么这个表达式的执行顺序是怎样的？

  看到出来这就是属性访问表达式，成员表达式，链式成员访问，其优先级是19，所以obj1.obj2.foo后于()执行，并且成员访问的执行顺序是从左到右的。

  即obj1.obj2.foo是先执行obj1.obj2得到执行结果（result）后再执行结果的result.foo。这就是obj1.obj2.foo()的基本执行顺序，按照此顺序我们可以把实例二改写成：

// 改写实例二
function foo() {
  console.log(this.a);
}
var obj2 = {
    a: 1,
    foo: foo
};

var obj1 = {
    a: 2,
    obj2: obj2
};
var result = obj1.obj2;
result.foo(); // 1

  我们需要先知道result的值，result = obj1.obj2很明显，这就是一个简单赋值，上面有介绍简单赋值。

  一开始，声明了变量obj1和变量obj2，并都做了简单赋值，后面又声明了变量result也做了简单赋值，都按照上面的简单赋值的定义，赋值后最终内容如下：

obj1.obj2 = {
  a: 1,
  foo: function() {
    console.log(this.a);
  }
}
result = {
  a: 1,
  foo: function() {
    console.log(this.a);
  }
}

  也就是说对于result = obj1.obj2，result的值是一个对象。

  然后我们再来看看result.foo()的执行，也就是等价于：

result = {
  a: 1,
  foo: function() {
    console.log(this.a);
  }
}
reslut.foo();

  这种方式也就是我们上篇文章分析过的方式，result.foo执行解释结果是一个Reference，其数据结构是：

reference_result_foo = {
	base: result,
	name: "foo"
}

  这里的this的最终指向就是result，就不再具体分析了，参考上篇文章的内容，this.a等价于result.a，控制台输出的也就是1。

  我们再回到实例二中，

// 实例二
function foo() {
  console.log(this.a);
}
var obj2 = {
    a: 1,
    foo: foo
};

var obj1 = {
    a: 2,
    obj2: obj2
};
obj1.obj2.foo(); // 1

  这里的this指向也就是obj2，控制台输出的也就是1了。

隐式丢失

  还有一个很常见的场景：

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

  这里控制台输出是1，大部分解释是this绑定隐式丢失，然后指向了全局，所以是1。这种解释也有点牵强。

  其实还是可以从简单赋值的角度来解释，bar的值是obj.foo的值，是obj.foo的真正的值，是通过GetValue()方法得到的值，不是引用，这里也就是函数foo，并不是对象obj的方法foo。如果这个能理解的话，这里很好解释了，执行函数bar其实就是执行函数foo，this指向也就是全局对象window，this.a也就是window.a，输出的值也就是1了。具体的原因就不展开解释了，都已经写到这里了，应该很容易理解了。这也就是所谓的隐式丢失。

显式绑定

  在函数原型上定义了三个方法允许手动设置函数调用的this值：apply()、call()和bind()，这个三个方法作用是一致的，强行修改函数调用的this值。我们下面来看看这三个方法：

apply()

15.3.4.3 Function.prototype.apply (thisArg, argArray)

When the apply method is called on an object func with arguments thisArg and argArray, the following steps are taken:

1. If IsCallable(func) is false, then throw a TypeError exception.
2. If argArray is null or undefined, then

a. Return the result of calling the [[Call]] internal method of func, providing thisArg as the this value and an empty list of arguments.

1. ...

1. Return the result of calling the [[Call]] internal method of func, providing thisArg as the this value and argList as the list of arguments.

NOTE The thisArg value is passed without modification as the this value. This is a change from Edition 3, where a undefined or null thisArg is replaced with the global object and ToObject is applied to all other values and that result is passed as the this value.

  我只把apply()调用的部分步骤列出来了，只需要看第二步和第三步就可以了。

  当以thisArg和argArray为参数在一个func对象上调用apply方法，采用如下步骤：

1. 如果IsCallable(func)是false, 则抛出一个TypeError异常
2. 如果argArray是null或undefined, 则

• 返回提供thisArg作为this值并以空参数列表调用 func的[[Call]]内部方法的结果

1. 提供thisArg作为this值并以argList作为参数列表，调用func的[[Call]]内部方法，返回结果

  规范把apply方法的调用写的明明白白的，传了两个参数，一是thisArg，最终会把thisArg作为this值，二是argArray，是一个数组，作为参数列表，最后调用func的[[Call]]内部方法，返回结果。我们来看看下面的实例：

// 实例四
function foo(param){
  console.log(this.a); // 10
  console.log(param); // 1
}
var obj = {
  a : 10
};
foo.apply(obj, [1]);

  实例四中函数foo调用后this强行被指向了obj。

  需要注意的是，thisArg是undefined或null时它会被替换成全局对象，所有其他值会被应用ToObject 并将结果作为this值。参考实例五：

// 实例五
function foo(param){
  console.log(this.a); // 2
  console.log(param); // 1
}
var obj = {
  a : 10
};
var a = 2;
foo.apply(null, [1]);

call()

15.3.4.4 Function.prototype.call(thisArg[ , arg1 [ , arg2, … ]])

When the call method is called on an object func with argument thisArg and optional arguments arg1, arg2 etc, the following steps are taken:

1. If IsCallable(func) is false, then throw a TypeError exception.
2. t argList be an empty List.
3. If this method was called with more than one argument then in left to right order starting with arg1 append each argument as the last element of argList
4. Return the result of calling the [[Call]] internal method of func, providing thisArg as the this value and argList as the list of arguments.

NOTE The thisArg value is passed without modification as the this value. This is a change from Edition 3, where a undefined or null thisArg is replaced with the global object and ToObject is applied to all other values and that result is passed as the this value.

  当以thisArg和可选的arg1，arg2等等作为参数在一个func对象上调用call方法，采用如下步骤：

1. 如果IsCallable(func)是false, 则抛出一个TypeError异常
2. 令argList为一个空列表
3. 如果调用这个方法的参数多余一个，则从arg1开始以从左到右的顺序将每个参数插入为argList的最后一个元素
4. 提供thisArg作为this值并以argList作为参数列表，调用func的[[Call]]内部方法，返回结果

  同样规范把call方法的调用写的明明白白的，可以接收多个参数，第一个参数是thisArg，最终会作为this值，从第二个参数开始所有的参数都是func的参数列表，调用func的[[Call]]内部方法，返回结果。我们来看看下面的实例：

// 实例六
function foo(param){
  console.log(this.a); // 10
  console.log(param); // 1
}
var obj = {
  a : 10
};
foo.call(obj, 1);

  实例六中函数foo调用后this强行被指向了obj。

  需要注意的是，thisArg是undefined或null时它会被替换成全局对象，所有其他值会被应用ToObject并将结果作为this值。

bind()

15.3.4.5 Function.prototype.bind (thisArg [, arg1 [, arg2, …]])

The bind method takes one or more arguments, thisArg and (optionally) arg1, arg2, etc, and returns a new function object by performing the following steps:

1. Let Target be the this value.
2. If IsCallable(Target) is false, throw a TypeError exception.
3. Let A be a new (possibly empty) internal list of all of the argument values provided after thisArg (arg1, arg2 etc), in order.
4. Let F be a new native ECMAScript object
5. ...
6. Return F

  只把bind()执行的部分步骤列出来了，只要看上面几个步骤就可以了。

  bind方法需要一个或更多参数，thisArg和（可选的）arg1, arg2, 等等，执行如下步骤返回一个新函数对象：

1. 令Target为this值
2. 如果IsCallable(Target)是false, 抛出一个TypeError异常
3. 令A为一个（可能为空的）新内部列表，它包含按顺序的thisArg 后面的所有参数（arg1, arg2等等）
4. 令F为一个新原生ECMAScript对象
5. ...
6. 返回F

  同样规范也把bind方法的调用写的明明白白的，bind最终返回的是一个新的函数对象，这个和上面的apply方法和call方法的调用不一样。

  将值绑定到了函数的this上，并将绑定好的函数返回，所以bind只是一个函数，不会立刻执行。我们来看看下面的实例：

// 实例七
function foo(param){
  console.log(this.a); // 10
  console.log(param); // 1
}
var obj = {
  a : 10
};
var foo = foo.bind(obj, 1);
foo();

  实例七中函数foo调用后this强行被指向了obj。

  上面就是关于显示绑定的所有内容，主要是通过函数原型上的apply、call和bind三个方法实现的，面试中对这三个方法也是经常会问到，这三个方法原生实现怎么写，可以参考规范中对这三个方法的执行步骤，在这里暂时不展开了，后期考虑。

new绑定

  我们先看个实例：

// 实例八
function Foo() {
  this.x = 10;
}
var foo = new Foo();
console.log(foo.x); // 10

  对于输出是10，原因大家都知道，我们来看看new具体做来什么，使得Foo函数中的this指向了foo：

11.2.2 The new Operator

The production NewExpression : new NewExpression is evaluated as follows:

1. Let ref be the result of evaluating NewExpression.
2. Let constructor be GetValue(ref).
3. If Type(constructor) is not Object, throw a TypeError exception
4. If constructor does not implement the [[Construct]] internal method, throw a TypeError exception
5. Return the result of calling the [[Construct]] internal method on constructor, providing no arguments (that is, an empty list of arguments)

  产生式NewExpression : new NewExpression按照下面的过程执行：

1. 令ref为解释执行NewExpression的结果
2. 令constructor为GetValue(ref)
3. 如果Type(constructor) 不是Object，抛出一个TypeError异常
4. 如果constructor没有实现[[Construct]]内置方法 ，抛出一个TypeError异常
5. 返回调用constructor的[[Construct]]内置方法的结果 , 传入按无参数传入参数列表 ( 就是一个空的参数列表 )

  按照规范中的定义，就实例八而言，ref最终解释结果是一个引用（reference），constructor为GetValue(ref)，也就是函数Foo：

constructor = function Foo() {
  this.x = 10;
}

  最后是返回调用constructor的[[Construct]] 内置方法的结果。我们再来看看[[Construct]]内置方法是怎么执行的：

13.2.2 [[Construct]]

When the [[Construct]] internal method for a Function object F is called with a possibly empty list of arguments, the following steps are taken:

1. Let obj be a newly created native ECMAScript object
2. Set all the internal methods of obj as specified in 8.12
3. Set the [[Class]] internal property of obj to "Object"
4. Set the [[Extensible]] internal property of obj to true
5. Let proto be the value of calling the [[Get]] internal property of F with argument "prototype"
6. If Type(proto) is Object, set the [[Prototype]] internal property of obj to proto.
7. Type(proto) is not Object, set the [[Prototype]] internal property of obj to the standard built-in Object prototype object as described in 15.2.4
8. Let result be the result of calling the [[Call]] internal property of F, providing obj as the this value and providing the argument list passed into [[Construct]] as args
9. If Type(result) is Object then return result
10. Return obj

  当以一个可能的空的参数列表调用函数对象F的[[Construct]] 内部方法，采用以下步骤

1. 令obj为新创建的ECMAScript原生对象
2. 依照8.12设定obj的所有内部方法
3. 设定obj的[[Class]]内部方法为"Object"
4. 设定obj的[[Extensible]]内部方法为true
5. 令proto为以参数"prototype"调用F的[[Get]]内部属性的值
6. 如果Type(proto)是Object，设定obj的[[Prototype]]内部属性为proto
7. 如果Type(proto)不是Object，设定obj的[[Prototype]]内部属性为15.2.4描述的标准内置的Object的prototype对象
8. 以obj为this值，调用[[Construct]]的参数列表为args，调用F的 [[Call]]内部属性，令result为调用结果
9. 如果Type(result)是Object，则返回result
10. 返回obj

  函数对象F的[[Construct]]做了this指向的绑定，内部创建了一个新的对象obj，新对象内置原型属性指向了F的原型对象prototype，最后新创建的对象obj为this的值，并调用F的[[Call]]内部属性，最后返回obj。上面的实现步骤可以简单的理解为下面程序：

var foo = new Foo() = {
  var obj = {};
  obj.__proto__ = Foo.prototype;
  var result = Foo.call(obj);
  return typeof result === 'Object' ? result : obj;
}

  上面也就是面试经常问到的手动实现new原理，可以做为参考。所以当执行var foo = new Foo()时，this就指向新的对象，最后把执行结果返回给了foo，foo真实的值也就是对象。

  也就是说函数Foo中this指向的是foo，所以控制台输出的值是foo.x，也就是10了。

箭头函数

  箭头函数是ECMAScript6提出来的，在这里不对箭头函数做详细的介绍，只说明箭头函数关于this的情况。

  在ECMAScript6中有这么一句话：

8.1.1.3Function Environment Records

A function Environment Record is a declarative Environment Record that is used to represent the top-level scope of a function and, if the function is not an ArrowFunction, provides a this binding.

  函数环境记录是声明式环境记录，用于表示函数的顶级范围。如果函数不是箭头函数，那么会提供this绑定。也就是说在箭头函数中不存在this绑定这个说法。

[[thisBindingStatus]]

If the value is "lexical", this is an ArrowFunction and does not have a local this value.

  当值是lexical时，表示是箭头函数并且没有自己的this值绑定

9.2.4FunctionInitialize (F, kind, ParameterList, Body, Scope)

1. If kind is Arrow, set the [[ThisMode]] internal slot of F to lexical.   当箭头函数初始化时，[[ThisMode]]设置为lexical

[[ThisMode]]

lexical means that this refers to the this value of a lexically enclosing function.

  当[[ThisMode]]值是lexical时，表示this值是当前封闭函数lexical scope。

9.2.1.2OrdinaryCallBindThis ( F, calleeContext, thisArgument )

1. If thisMode is lexical, return NormalCompletion(undefined)
2. Return envRec.BindThisValue(thisValue)

  在函数执行前绑定this的时候，传入的thisArgument会被直接忽略。

  再来看一段话：

14.2.16 Runtime Semantics: Evaluation

An ArrowFunction does not define local bindings for arguments, super, this, or new.target. Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment. Typically this will be the Function Environment of an immediately enclosing function.

  箭头函数不会为arguments、super、this或者new.target定义本地绑定。对于箭头函数中的arguments、super、this或者new.target的任何引用都必须解析为lexically封闭环境中绑定。通常这将是一个立即封闭的函数的函数环境。

  总之，箭头函数初始化，在lexical环境中，没有自身的this绑定，箭头函数也没法修改this，函数内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

  我们来看看下面的实例：

// 实例九
function foo() {
  setTimeout(() => {
    console.log(this.a); // 2
  }, 100);
}
var a = 1;
foo.call({ a: 2 });

  实例九中控制台输出的是2，不是1，如果定时器里面的函数是普通函数的话，那么this的指向会是window，输出的值1。在这里输出的是2。

  再来看看一个实例，有点意思：

// 实例十
var obj= {
  that: this,
  bar: function() {
    return () => {
      console.log(this); 
    }
  },
  baz: () => {
    console.log(this); 
  },
  bam: function() {
    console.log(this);
  }
}
console.log(obj.that);  // window
obj.bar()(); // obj
obj.baz(); // window
obj.bam(); // obj

  看到实例九，应该有人会对结果感到奇怪，这个可以思考下。

1. obj的当前作用域是window，obj.that === window
2. 如果不用function（function有自己的函数作用域）将其包裹起来，this会指向window，如上面的baz函数
3. 用function包裹的目的就是将箭头函数绑定到当前的对象上。函数的作用域是当前这个对象，然后箭头函数会自动指向函数所在作用域的this，即obj。

  把箭头函数的相关定义理解清楚，就不会存在疑惑了。

  到这里已经把关于this的内容几乎全部梳理完了。

结语

  文章如有不正确的地方欢迎各位大佬指正，也希望有幸看到文章的同学也有收获，一起成长！

-------------------------------本文首发于个人公众号----------------------------

最后，欢迎大家关注我的公众号，一起学习交流。