JavaScript之this

站长

2023年02月17日 21:50 · 阅读数 63

书接上文

上一篇我们介绍了执行上下文中的作用域链，了解了作用域如何在JS中发挥作用，今天我们来认识执行上下文中相对而言最复杂的另一名重要成员——this

Reference

介绍this前我们先来了解一些ESM规范，ESM规范中定义了两种类型(Types)：语言类型和规范类型。语言类型即我们在开发中能够直接操作的，也就是我们常说的基础类型，如 Undefined , Null , Boolean, String, Number , Object等。而规范类型在ESM规范中说它是用来用算法描述 ECMAScript 语言结构和 ECMAScript 语言类型的。不明白？通俗点就是一种仅存在于规范中的类型，用来描述语言底层行为逻辑的。规范类型包括：Reference, List, Completion, Property Descriptor, Property Identifier, Lexical Environment, 和 Environment Record。其中 Reference 就与我们今天的主角this息息相关。

那么什么是Reference呢？

ESM规范中对他的描述是这样的

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

Reference 类型就是用来解释诸如 delete、typeof 以及赋值等操作行为的。ESM规范中对他具体的描述是这样的

A Reference is a resolved name binding. A Reference consists of three components, the base value, the referenced name and the Boolean valued strict reference flag. The base value is either undefined, an Object, a Boolean, a String, a Number, or an environment record (10.2.1). A base value of undefined indicates that the reference could not be resolved to a binding. The referenced name is a String.

从上面的描述中我们能知道Reference 的三个组成部分

base value——就是属性所在的对象，或者就是 EnvironmentRecord，它的值只可能是 undefined, an Object, a Boolean, a String, a Number, or an environment record 其中的一种。
referenced name——就是属性的名称，一个字符串。
strict reference——布尔类型的严格引用的标志

我们可以举几个简单的例子：

var value = 1;

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

var father = {
    son: function () {
        return this;
    }
};
 
father.son(); // father

// son对应的Reference是：
var sonReference = {
    base: father,
    propertyName: 'son',
    strict: false
};

在规范中还提供了获取 Reference 组成部分的方法，比如 GetBase 和 IsPropertyReference，并且之后还有一个用于从 Reference 类型获取对应值的方法： GetValue。当然这些我们在开发里同样是使用不到的。

GetBase ：返回reference的base value
IsPropertyReference：简单来说就是如果 reference 的 base value是一个对象则返回true
GetValue：返回对象属性真正的值，但是要注意：它返回的是具体的值，而不是Reference

this

讲了那么多，那么Reference 跟 this 到底有啥关系？

ESM规范 11.2.3 介绍了当函数调用的时候，如何确定 this 的取值，我们只看其中的第1、6、7步：

1.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).

7.Else, Type(ref) is not Reference.

a. Let thisValue be undefined.

看完这些相信多少会有些疑惑：

计算 MemberExpression 的值赋值给 ref。

那么什么是 MemberExpression ：规范中是这么说的

MemberExpression :
- PrimaryExpression // 原始表达式可以参见《JavaScript权威指南第四章》
- FunctionExpression // 函数定义表达式
- MemberExpression [ Expression ] // 属性访问表达式
- MemberExpression . IdentifierName // 属性访问表达式
- new MemberExpression Arguments // 对象创建表达式
简单举个例子
```
function func() {
    console.log(this)
}

func(); // MemberExpression 是 foo

function func() {
    return function() {
        console.log(this)
    }
}

func()(); // MemberExpression 是 func()

var father = {
    son: function () {
        return this;
    }
}

father.son(); // MemberExpression 是 father.son
```
简单粗暴地来说，其实就是()左边的部分
如果 ref 的类型是 Reference：且IsPropertyReference(ref) 是 true ：则 this 的值为GetBase(ref)；且 base value 值是 Environment Record：则this的值为 ImplicitThisValue(ref)
如果 ref 的类型不是 Reference ，则this的值为 undefined

也就是说判断 ref 是不是的关键就是各种类型的 MemberExpression 会被如何处理，我们通过不同的例子来解释。

var value = 1;

var father = {
  value: 2,
  son: function () {
    return this.value;
  }
}

function func() {
    this.value;
}

### func()

//示例1
func()

这是一个非常简单普通的示例，最后函数执行时，按照之前的步骤：

MemberExpression 值为func，func是一个函数对象，理所当然是一个Reference ：

var fooReference = {
    base: EnvironmentRecord,
    name: 'func',
    strict: false
};

可以看到他的 base value 是 EnvironmentRecord ，所以它的 this 值为 ImplicitThisValue(ref)，这个是啥？规范中它的返回值始终是 undefined ，非严格模式下，其值会被隐式转换为全局对象，也就是返回值为 1

father.son();

//示例2
father.son();

查看规范 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.

意思就是说属性访问器也就是那个 . 返回的就是个 Reference

MemberExpression 值为 father.son，它是一个Reference：

var Reference = {
  base: father,
  name: 'son',
  strict: false
};

现在回去看看 IsPropertyReference 的定义，这个Reference的 base value 是 father ，是一个对象，因此返回结果是true，所以此时函数内的 this 值为 GetBase(ref) ，也就是 father ！因此返回值是 2 ！

呼~ 下一个

(father.son)()

//示例3
(father.son)();

MemberExpression 值为 (father.son)，它是一个Reference：这时候它被 () 包裹，这时候我们需要看另一则规范 11.1.6 The 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.

返回表达式的结果，也就是返回了 father.son ，所以和第一种情况是一样的

(father.son = father.son)()

//示例4
(father.son = father.son)();

MemberExpression 值为 (father.son = father.son)，这时候括号内还有一个赋值操作的表达式，经过了这个赋值操作 father.son 变成了什么呢，查看规范 11.13.1 Simple Assignment ( = )，也就是赋值操作符的返回值是什么呢：

3.Let rval be GetValue(rref).

也就是说他会通过 GetValue(rref) 的操作，将该方法的返回值赋值给 '=' 左侧的属性，上面有说GetValue返回的是操作对象本身的值，不再是一个Reference了，因此，此时函数执行上下文中的 this 为 undefined，非严格模式下就是全局对象，最后返回值为 1。

(false || father.son)()

//示例5
(false  ||  father.son)();

MemberExpression 值为(false || father.son)，括号中是一个或运算的表达式，我们知道或运算回取第一个经过类型转换不为false的值，那么这个值是什么类型呢，查看规范 11.11 Binary Logical Operators：

2.Let lval be GetValue(lref).

和赋值操作一样，他也会经过 GetValue 的转换变成本身的值，也就不是Reference，因此同示例三一样，最后返回值为 1。

(father.son, father.son)()

//示例6
(father.son,  father.son)();

MemberExpression 值为(father.son, father.son)，括号中是逗号操作，二话不说查规范，查看规范11.14 Comma Operator ( , )

2.Call GetValue(lref).

也是一样会经过 GetValue 的转换，因此最后返回值为 1。

总结

虽然我们可以将 this 简单地理解为指向调用函数的对象，但是这样我们就无法理解示例4、示例5的返回值了，因此我们从规范的角度仔细分析了 this 的指向，我们也发现尽管示例1和示例4、5最后 this 都指向 undefined 或者全局，但是他们的原理却大相径庭，留下一个思考题供大家研究，大家可以积极讨论。

function Foo(){
	getName = function(){
		console.log(1);					
        };
	return this
}
			
function getName(){
	console.log(5);
}

Foo().getName(); //为什么是1呢？

最后再打个广告，关注公众号程序猿青空，不定期分享各种优秀文章、学习资源、学习课程，能在未来（因为现在还没啥东西）享受更多福利。

转载自:https://juejin.cn/post/7198626288135340087