重学js —— 左侧表达式（new/super/import()/可选链等）

[lizhongzhen11]

左侧表达式

• MDN——表达式和运算符

只选取了部分进行翻译

new 操作符

• MDN-new
• MDN-new.target
• 冴羽——JavaScript深入之new的模拟实现（这个读ya第四声，微软自带的输入法居然打不出来）
• 我的模拟实现
  1. 能用 new 的一定是内部实现了 [[Call]] 方法的对象，即 typeof 结果为 'function'。注意：箭头函数不能做构造器，需排除！
  2. 如果构造函数自身没有返回值，那么会返回一个对象，其原型对象指向构造函数的 prototype
  3. 如果构造函数自身有返回值且该值是对象，那么直接返回
  4. 最难理解的其实是传参给构造函数后，如何让得到的对象其拥有构造函数内部定义的属性以及传过来的值，这里比较费时间，这里要记住改变 this 为返回的对象，并通过 call 或 apply 调用即可，例如

     function test(name){
       this.name = name
     }
     new test('a') // {name: 'a'}

  5. 对 Function, Date 等调用 new，有点特殊，我代码里没有考虑

运行时语义：Evaluation

New表达式：new NewExpression

1. 返回 ? EvaluateNew(NewExpression, empty)

MemberExpression：new MemberExpression Arguments

1. 返回 ? EvaluateNew(MemberExpression, Arguments)

EvaluateNew

1. 断言：constructExpr 是 NewExpression 或 MemberExpression
2. 断言：arguments 是 empty 或 Arguments
3. 定义 ref 为计算 constructExpr 结果
4. 定义 constructor 为 ? GetValue(ref)
5. 如果 arguments 为 empty，定义 argList 为新的空 List
6. 否则，
   1. 定义 argList 为 ? arguments 的参数列表
7. 如果 constructor 不是构造器，抛类型错误
8. 返回 ? Construct(constructor, argList)

super 关键字

MDN

运行时语义：Evaluation

SuperProperty：super [ Expression ]

对应 super[expr] 这种调用

1. 定义 env 为 GetThisEnvironment()
2. 定义 actualThis 为 ? env.GetThisBinding()
3. 定义 propertyNameReference 为 Expression 运算结果
4. 定义 propertyNameValue 为 ? GetValue(propertyNameReference)
5. 定义 propertyKey 为 ? ToPropertyKey(propertyNameValue)
6. 如果与此 SuperProperty 匹配的代码是严格模式代码，定义 strict 为 true，否则定义 strict 为 false
7. 返回 ? MakeSuperPropertyReference(actualThis, propertyKey, strict)

SuperProperty：super . IdentifierName

对应 super.IdentifierName 这种调用

1. 定义 env 为 GetThisEnvironment()
2. 定义 actualThis 为 ? env.GetThisBinding()
3. 定义 propertyKey 为 IdentifierName 的字符串值
4. 如果与此 SuperProperty 匹配的代码是严格模式代码，定义 strict 为 true，否则定义 strict 为 false
5. 返回 ? MakeSuperPropertyReference(actualThis, propertyKey, strict)

SuperCall：super Arguments

1. 定义 newTarget 为 GetNewTarget()
2. 断言：newTarget 是对象
3. 定义 func 为 ? GetSuperConstructor()
4. 定义 argList 为 ? Arguments 的参数列表
5. 定义 result 为 Construct(func, argList, newTarget)
6. 定义 thisER 为 GetThisEnvironment()
7. 返回 ? thisER.BindThisValue(result)

GetSuperConstructor

1. 定义 envRec 为 GetThisEnvironment()
2. 断言：envRec 是 函数环境记录
3. 定义 activeFunction 为 envRec.[[FunctionObject]]
4. 断言：activeFunction 是ECMAScript 函数对象
5. 定义 superConstructor 为 ! activeFunction.[GetPrototypeOf]
6. 如果 superConstructor 不是构造器，抛类型错误
7. 返回 superConstructor

MakeSuperPropertyReference

1. 定义 env 为 GetThisEnvironment()
2. 断言：env.HasSuperBinding() 为 true
3. 定义 baseValue 为 ? env.GetSuperBase()
4. 定义 bv 为 ? RequireObjectCoercible(baseValue)
5. 返回一个 Reference 类型的值，该 Reference 是 Super Reference，其基础值部分是 bv，引用名称部分是 propertyKey，thisValue 部分是 actualThis，且严格引用标记是 strict

可选链

MDN

@babel/plugin-proposal-optional-chaining （babel支持）

Chrome v79 版本支持可选链，但是需要手动设置，浏览器url地址栏输入chrome://flags打开，搜索 Experimental JavaScript，选择启用。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName); // undefined

console.log(adventurer.someNonExistentMethod?.()) // undefined


// 使用 nullish 合并运算符设置一个默认值
let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "Unknown city";
console.log(customerCity); // Unknown city

Evaluation

OptionalExpression :

    MemberExpression OptionalChain

1. 定义 baseReference 为计算 MemberExpression 的结果
2. 定义 baseValue 为 ? GetValue(baseReference)
3. 如果 baseValue 为 undefined 或 null
   1. 返回 undefined
4. 返回执行 带参数 baseValue 和 baseReference 的 OptionalChain 的链运算结果

OptionalExpression :

    CallExpression OptionalChain

1. 定义 baseReference 为计算 CallExpression 的结果
2. 定义 baseValue 为 ? GetValue(baseReference)
3. 如果 baseValue 为 undefined 或 null
   1. 返回 undefined
4. 返回执行 带参数 baseValue 和 baseReference 的 OptionalChain 的链运算结果

OptionalExpression :

    OptionalExpression OptionalChain

1. 定义 baseReference 为计算 OptionalExpression 的结果
2. 定义 baseValue 为 ? GetValue(baseReference)
3. 如果 baseValue 为 undefined 或 null
   1. 返回 undefined
4. 返回执行 带参数 baseValue 和 baseReference 的 OptionalChain 的链运算结果

ChainEvaluation 链运算

参数 baseValue 和 baseReference

OptionalChain : ?. Arguments

1. 定义 thisChain 为 OptionalChain
2. 定义 tailCall 为 IsInTailPosition(thisChain)
3. 返回 ? EvaluateCall(baseValue, baseReference, Arguments, tailCall)

OptionalChain : ?. [ Expression ]

1. 如果和 OptionalChain 匹配的代码是 严格模式代码，定义 strict 为 true，否则定义 strict 为 false
2. 返回 ? EvaluatePropertyAccessWithExpressionKey(baseValue, Expression, strict)

OptionalChain : ?. IdentifierName

1. 如果和 OptionalChain 匹配的代码是 严格模式代码，定义 strict 为 true，否则定义 strict 为 false
2. 返回 ? EvaluatePropertyAccessWithIdentifierKey(baseValue, IdentifierName, strict)

OptionalChain : OptionalChain Arguments

1. 定义 optionalChain 为 OptionalChain
2. 定义 newReference 为 ? 带有参数 baseValue 和 baseReference 的 optionalChain 的链运算
3. 定义 newValue 为 ? GetValue(newReference)
4. 定义 thisChain 为该 OptionalChain
5. 定义 tailCall 为 IsInTailPosition(thisChain)
6. 返回 ? EvaluateCall(newValue, newReference, Arguments, tailCall)

OptionalChain : OptionalChain [ Expression ]

1. 定义 optionalChain 为 OptionalChain
2. 定义 newReference 为 ? 带有参数 baseValue 和 baseReference 的 optionalChain 的链运算
3. 定义 newValue 为 ? GetValue(newReference)
4. 如果和 OptionalChain 匹配的代码是 严格模式代码，定义 strict 为 true，否则定义 strict 为 false
5. 返回 ? EvaluatePropertyAccessWithExpressionKey(newValue, Expression, strict)

OptionalChain : OptionalChain . IdentifierName

1. 定义 optionalChain 为 OptionalChain
2. 定义 newReference 为 ? 带有参数 baseValue 和 baseReference 的 optionalChain 的链运算
3. 定义 newValue 为 ? GetValue(newReference)
4. 如果和 OptionalChain 匹配的代码是 严格模式代码，定义 strict 为 true，否则定义 strict 为 false
5. 返回 ? EvaluatePropertyAccessWithIdentifierKey(newValue, IdentifierName, strict)

Import 调用

Evaluation

ImportCall : import ( AssignmentExpression )

1. 定义 referencingScriptOrModule 为 ! GetActiveScriptOrModule()
2. 定义 argRef 为运算 AssignmentExpression 的结果
3. 定义 specifier 为 ? GetValue(argRef)
4. 定义 promiseCapability 为 ! NewPromiseCapability( %Promise% )
5. 定义 specifierString 为 ToString(specifier)
6. IfAbruptRejectPromise(specifierString, promiseCapability)
7. 执行 ! HostImportModuleDynamically(referencingScriptOrModule, specifierString, promiseCapability)
8. 返回 promiseCapability.[[Promise]]