JavaScript原理----从 ECMAScript 规范解读 this
一、准备
ECMAScript 的类型分为语言类型和规范类型。
语言类型：开发者直接使用 ECMAScript 可以操作，就是常说的Undefined, Null, Boolean, String, Number, 和 Object。
规范类型：相当于 meta-values，用来用算法描述 ECMAScript 语言结构和 ECMAScript 语言类型的，包括：Reference, List, Completion, Property Descriptor, Property Identifier, Lexical Environment, 和 Environment Record。
今日重点： Reference 类型，它与 this 的指向有着密切的关联。
二、Reference介绍
Reference 是一个 Specification Type，也就是 “只存在于规范里的抽象类型”。它们是为了更好地描述语言的底层行为逻辑才存在的，但并不存在于实际的 js 代码中。
Reference 由三个部分组成，分别是：
- base value
- referenced name
- strict reference
简单理解：
base value ：属性所在的对象或者就是 EnvironmentRecord，它的值只可能是 undefined, Object, Boolean, String, Number, EnvironmentRecord 其中的一种。
referenced name ：属性的名称。
strict reference：是否严格模式
举个例子：
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。
1.GetBase(ref)：返回 reference 的 base value。
2.IsPropertyReference(ref)：简单的理解----如果 reference 的base value 是一个对象，就返回true。
3.GetValue(ref)：返回对象属性真正的值。注意--调用 GetValue，返回的将是具体的值，而不再是一个 Reference。
模拟GetValue()使用：
var foo = 1;
var fooReference = {
base: EnvironmentRecord,
name: 'foo',
strict: false
};
GetValue(fooReference) // 1;三、重点----如何确定this的值
步骤：
1.计算 MemberExpression 的结果赋值给 ref
MemberExpression :
- PrimaryExpression // 原始表达式 可以参见《JavaScript权威指南第四章》
- 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 类型
2.1 [ref 是 Reference] && [IsPropertyReference(ref) === true] => [this 的值为 GetBase(ref)]
2.2 [ref 是 Reference] && [ref.baseValue === EnvironmentRecord] => [this 的值为 ImplicitThisValue(ref) => undefined]
(ImplicitThisValue函数始终返回 undefined,所以最后 this 的值就是 undefined)
2.3 [ref 不是 Reference] => [this 的值为 undefined]举个栗子：
// 非严格模式
var value = 1;
var foo = {
value: 2,
bar: function () {
return this.value;
}
}
console.log(foo.bar()); // foo.bar是Reference类型,this指向base value => foo,结果 => 2
console.log((foo.bar)()); // 同上判断,结果 => 2
console.log((foo.bar = foo.bar)()); // 有赋值操作符,返回值为不是Reference类型,this指向 undefined => window, 结果 => 1
console.log((false || foo.bar)()); // 逻辑操作符,返回值为不是Reference类型,结果 => 1
console.log((foo.bar, foo.bar)()); // 逗号操作符,返回值为不是Reference类型,结果 => 1追根溯源的从 ECMASciript 规范讲解 this 的指向，尽管从这个角度写起来和读起来都比较吃力，但是一旦多读几遍，明白原理，绝对会给你一个全新的视角看待 this 。
本文参考掘金前端大神冴羽的文章：原文链接