从ECMAScript规范解读this

作者: 九又四分之三o | 来源:发表于2018-03-26 19:36 被阅读0次

之前都是根据函数的使用情况来理解this,分为四种情况：

1、作为对象方法调用
2、作为普通函数调用
3、构造器调用
4、Function.prototype.call或Function.prototype.apply调用
但是今天看到了一篇文章，是追根溯源的从 ECMASciript 规范讲解 this 的指向，读完感觉收获很大，赶紧记录下来。

了解规范

英文版：http://es5.github.io/#x15.1
中文版：http://yanhaijing.com/es5/#115

1、Types

Types are further subclassified into ECMAScript language types and specification types.

An ECMAScript language type corresponds to values that are directly manipulated by an ECMAScript programmer using the ECMAScript language. The ECMAScript language types are Undefined, Null, Boolean, String, Number, and Object.

A specification type corresponds to meta-values that are used within algorithms to describe the semantics of ECMAScript language constructs and ECMAScript language types. The specification types are Reference, List, Completion, Property Descriptor, Property Identifier, Lexical Environment, and Environment Record.

翻译过来就是：

类型又再分为ECMAScript语言类型和规范类型。

ECMAScript语言类型是开发者使用ECMAScript直接操作的类型。ECMAScript语言类型是Undefined,Null，Boolean，String， Number，和Object。

规范类型相当于meta-values，用来用算法来描述ECMAScript 语言结构和语言类型的。规范类型是：Reference，List，Completion，Property Descriptor，Property Identifier, Lexical Environment, and Environment Record。

我们需要知道在 ECMAScript 规范中还有一种只存在于规范中的类型，它们的作用是用来描述语言底层行为逻辑。

2、Reference

8.7 章 The Reference Specification Type：

The Reference type is used to explain the behaviour of such operators as delete, typeof, and the assignment operators.

Reference 类型是用来解释删除，typeof和赋值操作等行为的。
Reference由三部分组成：

base value
referenced name
strict reference
简单理解，base value 就是属性所在的对象或者就是 EnvironmentRecord，它的值只可能是 undefined, an Object, a Boolean, a String, a Number, or an environment record 其中的一种。

base value 就是属性所在的对象或者就是 EnvironmentRecord，它的值只可能是 undefined, an Object, a Boolean, a String, a Number, or an environment record 其中的一种。
举两个栗子：

var foo = 1;

// 对应的Reference是：
var fooReference = {
    base: EnvironmentRecord,
    name: 'foo',
    strict: false
};

var foo = {
    bar: function () {
        return this;
    }
};
 
foo.bar(); // foo

// bar对应的Reference是：
var BarReference = {
    base: foo,
    propertyName: 'bar',
    strict: false
};

规范中还提供了获取 Reference 组成部分的方法，比如 GetBase 和 IsPropertyReference。
GetBase，返回 reference 的 base value。
IsPropertyReference，如果 base value 是一个对象，就返回true。

GetValue

除此之外，紧接着在 8.7.1 章规范中就讲了一个用于从 Reference 类型获取对应值的方法： GetValue。
简单模拟 GetValue 的使用：

var foo = 1;

var fooReference = {
    base: EnvironmentRecord,
    name: 'foo',
    strict: false
};
GetValue(fooReference) // 1;

GetValue 返回对象属性真正的值，但是要注意：

调用 GetValue，返回的将是具体的值，而不再是一个 Reference。

如何确定this值

关于 Reference 讲了那么多，为什么要讲 Reference 呢？到底 Reference 跟本文的主题 this 有哪些关联呢？如果你能耐心看完之前的内容，以下开始进入高能阶段。
看规范 11.2.3 Function Calls：
这里讲了当函数调用的时候，如何确定 this 的取值。
只看第一步、第六步、第七步：

Let ref be the result of evaluating MemberExpression.

6.If Type(ref) is Reference, then

 a.If IsPropertyReference(ref) is true, then
        i.Let thisValue be GetBase(ref).
 b.Else, the base of ref is an Environment Record
        i.Let thisValue be the result of calling the ImplicitThisValue concrete method of GetBase(ref).

Else, Type(ref) is not Reference.
a. Let thisValue be undefined.

翻译一下就是：
1、将MemberExpression的结果赋值给ref
2、判断ref是不是一个Reference类型
3、如果ref是Reference，并且IsPropertyReference(ref)是true，那么this的值为GetBase(ref)
4、如果ref是Reference,并且base value值是Enviroment Recored，那么this值为ImplicitThisValue(ref)
5、如果ref不是reference,那么this的值为undefined

具体分析

1、将MemberExpression的结果赋值给ref

什么是MemberExpression？
看规范 11.2 Left-Hand-Side Expressions：

PrimaryExpression
FunctionExpression
MemberExpression [ Expression ]
MemberExpression . IdentifierName
new MemberExpression Arguments
举个栗子：

function foo() {
   console.log(this)
}
foo(); // MemberExpression 是 foo
function foo() {
   return function() {
       console.log(this)
   }
}
foo()(); // MemberExpression 是 foo()
var foo = {
   bar: function () {
       return this;
   }
}
foo.bar(); // MemberExpression 是 foo.bar

所以简单理解 MemberExpression 其实就是()左边的部分。

2、判断ref是不是一个Reference类型

关键就在于看规范是如何处理各种 MemberExpression，返回的结果是不是一个Reference类型。
还举一个例子：

var value = 1;
var foo = {
  value: 2,
  bar: function () {
    return this.value;
  }
}
//示例1
console.log(foo.bar());
//示例2
console.log((foo.bar)());
//示例3
console.log((foo.bar = foo.bar)());
//示例4
console.log((false || foo.bar)());
//示例5
console.log((foo.bar, foo.bar)());

foo.bar()
在示例1中，MemberExpression 计算的结果是 foo.bar，那么 foo.bar 是不是一个 Reference 呢？查看规范 11.2.1 Property Accessors，这里展示了一个计算的过程，什么都不管了，就看最后一步：

Return a value of type Reference whose base value is baseValue and whose referenced name is propertyNameString, and whose strict mode flag is strict.

我们知道foo.bar的Reference值为：

var Reference = {
  base: foo,
  name: 'bar',
  strict: false
}

借下来按照2.1的判断流程走。

2.1 如果 ref 是 Reference，并且 IsPropertyReference(ref) 是 true, 那么 this 的值为 GetBase(ref)
该值是reference类型，那么 IsPropertyReference(ref) 是多少呢？
根据前面的只是，如果base value是一个对象，结果返回true。base value为foo，是一个对象，所以IsPropertyReference(ref)结果为true。
这个时候我们就可以确定this的值了： this = GetBase(ref)；
GetBase可以获得base value值，这个例子中是foo,所以this的值就是foo，示例1的结果就是2！

(foo.bar)()
看示例2：console.log((foo.bar)())；
foo.bar被()包住，查看规范11.1.6The Grouping Operator
直接查看结果部分：

Return the result of evaluating Expression. This may be of type Reference.
NOTE This algorithm does not apply GetValue to the result of evaluating Expression.

翻译：

返回执行Expression的结果，它可能是Reference类型。
这一算法并不会作用GetValue于执行Expression的结果。

实际上 () 并没有对 MemberExpression 进行计算，所以其实跟示例 1 的结果是一样的。

(foo.bar = foo.bar)()
看示例3，有赋值操作符，查看规范 11.13.1 Simple Assignment ( = ):
计算的第三步：

3.Let rval be GetValue(rref).

因为使用了 GetValue，所以返回的值不是 Reference 类型。按照之前的判断逻辑：

2.3 如果 ref 不是Reference，那么 this 的值为 undefined

this 为 undefined，非严格模式下，this 的值为 undefined 的时候，其值会被隐式转换为全局对象。

(false || foo.bar)()
看示例4，逻辑与算法，查看规范 11.11 Binary Logical Operators：

2.Let lval be GetValue(lref).

因为使用了 GetValue，所以返回的不是 Reference 类型，this 为 undefined

(foo.bar, foo.bar)()
看示例5，逗号操作符，查看规范11.14 Comma Operator ( , )
计算第二步：

2.Call GetValue(lref).

因为使用了 GetValue，所以返回的不是 Reference 类型，this 为 undefined

结果揭晓

所以结果就是

var value = 1;

var foo = {
  value: 2,
  bar: function () {
    return this.value;
  }
}

//示例1
console.log(foo.bar()); // 2
//示例2
console.log((foo.bar)()); // 2
//示例3
console.log((foo.bar = foo.bar)()); // 1
//示例4
console.log((false || foo.bar)()); // 1
//示例5
console.log((foo.bar, foo.bar)()); // 1

注意：以上是在非严格模式下的结果，严格模式下因为 this 返回 undefined，所以示例 3 会报错。

最简单的情况

function foo() {
    console.log(this)
}

foo();

MemberExpression 是 foo，解析标识符，查看规范 10.3.1 Identifier Resolution，会返回一个 Reference 类型的值：
var fooReference = {
base: EnvironmentRecord,
name: 'foo',
strict: false
};
接下来进行判断：

2.1 如果 ref 是 Reference，并且 IsPropertyReference(ref) 是 true, 那么 this 的值为 GetBase(ref)

因为 base value 是 EnvironmentRecord，并不是一个 Object 类型，还记得前面讲过的 base value 的取值可能吗？只可能是 undefined, an Object, a Boolean, a String, a Number, 和 an environment record 中的一种。
IsPropertyReference(ref) 的结果为 false，进入下个判断：

2.2 如果 ref 是 Reference，并且 base value 值是 Environment Record, 那么this的值为 ImplicitThisValue(ref)

base value 正是 Environment Record，所以会调用 ImplicitThisValue(ref)
查看规范 10.2.1.1.6，ImplicitThisValue 方法的介绍：该函数始终返回 undefined。
所以最后 this 的值就是 undefined。

at last

尽管我们可以简单的理解 this 为调用函数的对象，如果是这样的话，如何解释下面这个例子呢？

var value = 1;

var foo = {
  value: 2,
  bar: function () {
    return this.value;
  }
}
console.log((false || foo.bar)()); // 1

此外，又如何确定调用函数的对象是谁呢？

从ECMAScript规范解读this

了解规范

1、Types

2、Reference

GetValue

如何确定this值

具体分析

1、将MemberExpression的结果赋值给ref

2、判断ref是不是一个Reference类型

结果揭晓

最简单的情况

at last

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读