从ECMAScript规范中学习this

this Keyword规范

12.2.2 The this Keyword
	12.2.2.1 Runtime Semantics: Evaluation
		PrimaryExpression : this
		Return ResolveThisBinding( ) .

ResolveThisBinding

1. let encRec =  GetThisEnvironment( ).

2. return envRec.GetThisBinding().

The abstract operation ResolveThisBinding determines the binding of the keyword this using the LexicalEnvironment of the running execution context. ResolveThisBinding performs the following steps:

Let envRec be GetThisEnvironment( ).
Return envRec.GetThisBinding().

GetThisEnvironment

1. 获取当前运行的执行上下文的词法环境，并赋值到lex

2. 重复以下步骤
1. 将lex的环境记录赋值到envRec
2. 调用envRec.HasThisBinding()来确定该环境记录是否有绑定this
3. 如果为true，则返回envRec
4. 否则将lex指向当前词法环境的外层(outer)环境

The abstract operation GetThisEnvironment finds the Environment Record that currently supplies the binding of the keyword this. GetThisEnvironment performs the following steps:

Let lex be the running execution context’s LexicalEnvironment.
Repeat
Let envRec be lex’s EnvironmentRecord.
Let exists be envRec.HasThisBinding().
If exists is true, return envRec.
Let outer be the value of lex’s outer environment reference.
Let lex be outer.

词法环境(Lexical Environments)

全局环境

模块环境

函数环境

注意： 词法环境和环境记录值纯粹是规范机制，不需要对应于ECMAScript实现的任何特定构件。ECMAScript程序不可能直接访问或操作这些值。

环境记录(Environment Records)

模块环境记录

全局环境记录

对象环境记录

函数环境记录

• [[thisValue]]: 函数调用时的this的值

• BindThisValue(): 设置[[thisValue]]并记录其已初始化。

函数调用

1. Let ref be the result of evaluating MemberExpression.

2. Let func be GetValue(ref).

3. ReturnIfAbrupt(func).

4. If Type(ref) is Reference and IsPropertyReference(ref) is false and GetReferencedName(ref) is "eval", then
1. If SameValue(func, %eval%) is true, then
1. Let argList be ArgumentListEvaluation(Arguments).
2. ReturnIfAbrupt(argList).
3. If argList has no elements, return undefined.
4. Let evalText be the first element of argList.
5. If the source code matching this CallExpression is strict code, let strictCaller be true. Otherwise let strictCaller be false.
6. Let evalRealm be the running execution context’s Realm.
7. Return PerformEval(evalText, evalRealm, strictCaller, true). .

5. If Type(ref) is Reference, then
1. If IsPropertyReference(ref) is true, then
1. Let thisValue be GetThisValue(ref).
2. Else, the base of ref is an Environment Record
1. Let refEnv be GetBase(ref).
2. Let thisValue be refEnv.WithBaseObject().

6. Else Type(ref) is not Reference
1. Let thisValue be undefined.

7. Let thisCall be this CallExpression.

8. Let tailCall be IsInTailPosition(thisCall). (See 14.6.1)

9. Return EvaluateDirectCall(func, thisValue, Arguments, tailCall).

MemberExpression[Yield] :
	PrimaryExpression[?Yield]
	MemberExpression[?Yield] [ Expression[In, ?Yield] ]
	MemberExpression[?Yield] . IdentifierName
	MemberExpression[?Yield] TemplateLiteral[?Yield]
	SuperProperty[?Yield]
	MetaProperty
	new MemberExpression[?Yield] Arguments[?Yield]

1. Assert: IsPropertyReference(V) is true.

2. If IsSuperReference(V), then
1. Return the value of the thisValue component of the reference V.

3. Return GetBase(V).

1. 声明ref = MemberExpression的返回结果

2. 如果ref是引用类型
1. 如果ref的基值是一个对象
1. 如果引用类型的基值有thisValue，则this就是该thisValue
2. 否则this就指向该基值
2. 否则，ref的基值就是环境记录，this是undefined

3. 如果ref不是引用类型，则this就是undefined

场景分析

在全局作用域中、模块顶级作用域中的this

console.log(this)

• 在全局作用域中的this会返回全局环境记录所绑定的全局对象，在浏览器中是window，在node中是global。

• 在模块顶级作用域中的this会直接返回undefined。

函数上下文中的this

<script>
    // 左侧MemberExpression是一个对象，因此this就指向这个对象
    const o = {
      fn() {
        console.log(this);
      },
    };
    o.fn(); // o

    // 通过包装对象调用函数也和通过普通对象调用方法一样
    const b = new Boolean();
    b.fn = function () {
      console.log(this);
    };
    b.fn(); // Boolean

    // 函数在全局作用域中直接执行，运行时没有绑定thisValue，因此返回全局对象window
    function fn1() {
      console.log(this);
    }
    fn1(); // window

    // 函数的this与声明的位置无关，与调用方式有关
    // fn2 相当于 window.fn2()
    const fn2 = o.fn;
    fn2(); // window

    /**
     * 类似于
     * var temp = fn3()
     * temp()
     */
    function fn3() {
      return function temp() {
        console.log(this);
      };
    }
    fn3()(); // window

    /**
     * 类似于
     * var o = fn4()
     * o.temp()
     */
    function fn4() {
      var o = {
        temp() {
          console.log(this);
        },
      };
      return o;
    }
    fn4().temp(); // o
  </script>

  <script type="module">
    // ref的基值是模块环境记录，this指向undefined
    function fn1() {
      console.log(this);
    }
    fn1();
  </script>

Array.prototype.myCall = function(){
  return this
}

const arr = []
console.log(arr.myCall() === arr); // true

箭头函数中的this

const o = {
  fn1: () => {
    console.log(this);
  },
  fn2() {
    const temp = () => {
      console.log(this);
    };
    temp();
  },
};

o.fn1();
o.fn2();

显式绑定this

1. 严格模式下，传入的第一个参数就是this的值

2. 非严格模式下
1. 如果传入的第一个参数是null或者undefined，那么this指向全局对象
2. 如果传入的第一个参数是对象，那么this就是这个对象
3. 如果传入的第一个参数是booelan、string、number等，那么this会是它们的包装器对象。

function fn(){
	console.log(this)
}
fn.call({}) // {}
fn.apply(123) // Number对象

var f = ()=>{
  console.log(this);
}
f() // window
var f = ()=>{
  "use strict";
  console.log(this);
}
f()  // window

严格模式

"use strict";
function fun() {
  return this; 
}
console.log(fun() === undefined);
console.log(fun.call(2) === 2);
console.log(fun.apply(null) === null);
console.log(fun.call(undefined) === undefined);
console.log(fun.bind(true)() === true);
// 全为true

function fn(){
  "use strict"
  console.log(this);
}
fn()  // 函数调用时没有绑定thisValue，因此是undefined

function fn(){
  "use strict"
  console.log(this);
}
fn()  // 函数调用时没有绑定thisValue，因此返回全局环境的thisValue，也就是window

闭包中的this

function fn(){
  console.log(this);  // o
  function f(){
    console.log(this)  // window
  }
  f()
}
const o = {}
o.fn = fn
o.fn()

var temp = function() {
  console.log(this);  // o
  function f(){
    console.log(this)  // window
  }
  f()
}
const o = {}
o.fn = fn
o.fn()
function fn(){
  console.log(this);  // o
  var f = temp
  f()
}
const o = {}
o.fn = fn
o.fn()