前端训练营第三周学习总结

表达式 Expression

Grammar-Tree vs Priority:运算符的优先级由表达式生成树来实现的,JS中运算符按照优先级高低分以下几类:

Member及同级运算

属性、成员访问,返回Reference类型

  • a.b
  • a[b]
  • foo`string` : 函数后跟templete的用法,模板按分变量与字符串分解后传入函数foo中
  • super.b :调用父类属性
  • super['b']
  • new.target:判断函数是否由new调用
  • new Foo() : 带() 的优先级更高

New及同级运算

  • new Foo

Call及同级运算

  • foo()
  • super() :执行父类构造函数
  • foo()['b'] : 为了保证new运算的正确性,降低了优先级
  • foo().b
  • foo()`abc`

Left Handside & Right Handside
Member、New、Call又被称作Left Handside Expression,其他则成为Right Handside Expression,按照等号(=)左右进行划分。LHE在运行时上应为reference类型,下面几类为RHE

Update自增运算

注意中间不允许有LineTerminator

  • a++
  • a--
  • --a
  • ++a

Unary单目运算

  • delete a.b
  • void foo() :后面无论是任何值均返回undefined,void 0是返回undefined的最佳实践
  • typeof a : 注意typeof与js运行时对类型的规定不一致 typeof null --> object、typeof function(){} -->function
  • +a
  • -a
  • ~a:按位取反
  • !a :取非
  • await a

Exponental

  • ** :唯一右结合运算符

Multiplicative

  • * / %

Additive

  • + -

Shift移位运算

  • << >> >>>

Relationship比较运算

  • <> <= >= instanceof in

Equality

  • ==
  • !=
  • ===
  • !==

Bitwise

  • & ^ |

Logical

具有短路特性

  • &&
  • ||

Conditional

  • ? : JS中的三目运算同样具有短路逻辑,true?foo1:foo2 时foo1不调用,false?foo1:foo2 时foo2不调用,是完全合法的if else表达式版本,且可以无限嵌套

Comma

  • , : , 类似于表达式版本的分号,永远返回最后一项的值,例如 1,2,3返回3 、1,function(){}返回后面的函数表达式

类型转换

boxing.jpg

装拆箱

  • Boxing
    Number String Symbol Boolean 四个类分别对应JS中的四个类型,可用于强制类型转换、调用构造器等(返回对象)
    eg:注意Number() 与 new Number()不一样,直接调用用于强转,new运算则返回一个对象
  • Unboxing
    对象拆箱主要使用 [Symbol.toPrimitive] | valueOf、toString

语句Statement

Completion Record内部类型是一条记录,用以描述语句执行的结果,包含以下三个字段。

  • [[type]] : normal, break, continue, return, or throw
  • [[value]] : Types
  • [[target]] : label

简单语句

  • ExpressionStatement -> a =1 +2;
  • EmptyStatement -> ;
  • DebuggerStatement debugger;
  • ThrowStatement throw a;
  • ContinueStatement continue label1;
  • BreakStatement break label;
  • ReturnStatement return 1+2;

组合语句

BlockStatement

结构为{ ...; ...; ...; },基本逻辑为statement list中的statement顺次执行
[[type]] : 一般是normal,但其中的statement list执行到非normal语句时则中断后续执行
[[value]] : --
[[target]] : --

{
    a:1
}
//这段代码将被解释为block语句,而不是一个对象,所以 a会被理解为label,而不是一个对象属性,所以对象不能放左侧

Iteration

  • while( ... ) ...
    如果语句中有throw、return与block语句行为一致,但可以消费continue、break,如果匹配正确的label也可以消费
  • do ... while( ... )
  • for( ...此处可以是声明语句... ; ... ; ... ) ...
    for语句可以在block之外产生一个独立的父级作用域,相当于产生两层块级作用域
  • for( ... in ... )
    用以循环对象属性
  • for( ... of ... )
    对应iterator机制,一般与Generator搭配使用, for of => Iterator => Generator/Array,可以实现无穷迭代
  • for await( of )

标签、循环、break、continue语句体系

  • LabelledStatement
  • IterationStatement
  • ContinueStatement
  • BreakStatement
  • SwitchStatement

try语句

结构为,{}不能省略,try{ ... }catch( ...此处作用域在后面的block语句中... ){ ... }finally{ ... },任何运行时逻辑错误都会产生throw行为

声明语句

  • FunctionDeclaration
    函数声明,与之类似的函数表达式

  • GeneratorDeclaration
    语法为 function* foo(){ yield 1;},功能主要表现为分布返回多个值的函数

  • AsyncFuncrionDeclaration

  • AsyncGeneratorDeclaration

  • VariableStatement

  • ClassDeclaration

  • LexicalDeclaration

Object API/Grammar

  • {} . [] Object.defineProperty
  • Object.create/Object.setPrototypeOf/Object.getPrototypeOf
  • new/class/extends (尽量不要和上面的方式混用)
  • new/function/prototype (deprecated)

Function Object
[[call]]

JS标准里有哪些对象是我们无法实现出来的,都有哪些特性?

  • Bound Function Exotic Objects(pg127)

A bound function wraps another function object. A bound function has a [[Call]] internal method and may have a [[Construct]] internal method, Calling a bound function generally results in a call of its wrapped function.

Bound function objects do not have the internal slots of ECMAScript function objects ([[Environment]],[[FormalParameters]],[[FunctionKind]],[[ECMAScriptCode]],[[ConstructorKind]],[[Realm]],[[ScriptOrModule]],[ThisMode]],[[Strict]],[[HomeObject]],[[SourceText]] )(pg117). Instead they have the internal slots like [[BoundTargetFunction]],[[BoundThis]], [[BoundArguments]]

  • Array Exotic Objects(pg128)

Array object gives special treatment to array index.Every Array object has a non-configurable "length"property whose value is always a nonnegative integer less than 2^32.

  • String Exotic Objects(pg131)

A String object is an exotic object that encapsulates a String value and exposes virtual integer-indexed data properties corresponding to the individual code unit elements of the String value.

  • Arguments Exotic Objects(pg133)

Most ECMAScript functions make an arguments object available to their code. Depending upon the characteristics of the function definition, its arguments object is either an ordinary object or an arguments exotic object. An arguments exotic object is an exotic object whose array index properties map to the formal parameters bindings of an invocation of its associated ECMAScript function.

  • Integer-Indexed Exotic Objects(pg138)
  • Module Namespace Exotic Objects(pg142)

A module namespace object is an exotic object that exposes the bindings exported from an ECMAScript Module

  • Immutable Prototype Exotic Objects(pg145)

An immutable prototype exotic object is an exotic object that has a [[Prototype]] internal slot that will not change once it is initialized.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342