你好,我是winter。
不知道你有没有注意到,我们在语句部分,讲到了很多种语句类型,但是,其实最终产生执行效果的语句不多。
事实上,真正能干活的就只有表达式语句,其它语句的作用都是产生各种结构,来控制表达式语句执行,或者改变表达式语句的意义。
今天的课程,我们就深入到表达式语句中来学习一下。
表达式语句实际上就是一个表达式,它是由运算符连接变量或者直接量构成的(关于直接量我们在下一节详细讲解)。
一般来说,我们的表达式语句要么是函数调用,要么是赋值,要么是自增、自减,否则表达式计算的结果没有任何意义。
但是从语法上,并没有这样的限制,任何合法的表达式都可以当做表达式语句使用。比如我们看下面的例子。
a + b;
这句代码计算了a和b相加的值,但是不会显示出来,也不会产生任何执行效果(除非a和b是getter),但是不妨碍它符合语法也能够被执行。
下面我们就一起来了解下都有哪些表达式,我们从粒度最小到粒度最大了解一下。
首先我们来给你讲解一下表达式的原子项:Primary Expression。它是表达式的最小单位,它所涉及的语法结构也是优先级最高的。
Primary Expression包含了各种“直接量”,直接量就是直接用某种语法写出来的具有特定类型的值。我们已经知道,在运行时有各种值,比如数字123,字符串Hello world,所以通俗地讲,直接量就是在代码中把它们写出来的语法。
我们在类型部分,已经介绍过一些基本类型的直接量。比如,我们当时用null关键字获取null值,这个用法就是null直接量,这里我们仅仅把它们简单回顾一下:
"abc";
123;
null;
true;
false;
除这些之外,JavaScript还能够直接量的形式定义对象,针对函数、类、数组、正则表达式等特殊对象类型,JavaScript提供了语法层面的支持。
({});
(function(){});
(class{ });
[];
/abc/g;
需要注意,在语法层面,function、{ 和class开头的表达式语句与声明语句有语法冲突,所以,我们要想使用这样的表达式,必须加上括号来回避语法冲突。
在JavaScript标准中,这些结构有的被称作直接量(Literal),有的被称作表达式(**Expression),在我看来,把它们都理解成直接量比较合适。
Primary Expression还可以是this或者变量,在语法上,把变量称作“标识符引用”。
this;
myVar;
任何表达式加上圆括号,都被认为是Primary Expression,这个机制使得圆括号成为改变运算优先顺序的手段。
(a + b);
这就是Primary Expression的几种形式了,接下来,我们讲讲由Primary Expression构成的更复杂的表达式:Member Expression。
Member Expression通常是用于访问对象成员的。它有几种形式:
a.b;
a["b"];
new.target;
super.b;
前面两种用法都很好理解,就是用标识符的属性访问和用字符串的属性访问。而new.target是个新加入的语法,用于判断函数是否是被new调用,super则是构造函数中,用于访问父类的属性的语法。
从名字就可以看出,Member Expression最初设计是为了属性访问的,不过从语法结构需要,以下两种在JavaScript标准中当做Member Expression:
f`a${b}c`;
这是一个是带函数的模板,这个带函数名的模板表示把模板的各个部分算好后传递给一个函数。
new Cls();
另一个是带参数列表的new运算,注意,不带参数列表的new运算优先级更低,不属于Member Expression。
实际上,这两种被放入Member Expression,仅仅意味着它们跟属性运算属于同一优先级,没有任何语义上的关联。接下来我们看看Member Expression能组成什么。
这种非常简单,Member Expression加上new就是New Expression(当然,不加new也可以构成New Expression,JavaScript中默认独立的高优先级表达式都可以构成低优先级表达式)。
注意,这里的New Expression特指没有参数列表的表达式。我们看个稍微复杂的例子:
new new Cls(1);
直观看上去,它可能有两种意思:
new (new Cls(1));
new (new Cls)(1);
实际上,它等价于第一种。我们可以用以下代码来验证:
class Cls{
constructor(n){
console.log("cls", n);
return class {
constructor(n) {
console.log("returned", n);
}
}
}
}
new (new Cls(1));
这段代码最后得到了下面这样的结果。
cls 1
returned undefined
这里就说明了,1被当做调用Cls时的参数传入了。
除了New Expression,Member Expression还能构成Call Expression。它的基本形式是Member Expression后加一个括号里的参数列表,或者我们可以用上super关键字代替Member Expression。
a.b(c);
super();
这看起来很简单,但是它有一些变体。比如:
a.b(c)(d)(e);
a.b(c)[3];
a.b(c).d;
a.b(c)`xyz`;
这些变体的形态,跟Member Expression几乎是一一对应的。实际上,我们可以理解为,Member Expression中的某一子结构具有函数调用,那么整个表达式就成为了一个Call Expression。
而Call Expression就失去了比New Expression优先级高的特性,这是一个主要的区分。
接下来,我们需要理解一个概念:New Expression 和 Call Expression 统称LeftHandSideExpression,左值表达式。
我们直观地讲,左值表达式就是可以放到等号左边的表达式。JavaScript语法则是下面这样。
a() = b;
这样的用法其实是符合语法的,只是,原生的JavaScript函数,返回的值都不能被赋值。因此多数时候,我们看到的赋值将会是Call Expression的其它形式,如:
a().c = b;
另外,根据JavaScript运行时的设计,不排除某些宿主会提供返回引用类型的函数,这时候,赋值就是有效的了。
左值表达式最经典的用法是用于构成赋值表达式,但是其实如果你翻一翻JavaScript标准,你会发现它出现在各种场合,凡是需要“可以被修改的变量”的位置,都能见到它的身影。
那么接下来我们就讲讲 AssignmentExpression 赋值表达式。
AssignmentExpression 赋值表达式也有多种形态,最基本的当然是使用等号赋值:
a = b
这里需要理解的一个稍微复杂的概念是,这个等号是可以嵌套的:
a = b = c = d
这样的连续赋值,是右结合的,它等价于下面这种:
a = (b = (c = d))
也就是说,先把d的结果赋值给c,再把整个表达式的结果赋值给b,再赋值给a。
当然,这并非一个很好的代码风格,我们讲解语法是为了让你理解这样的用法,而不是推荐你这样写代码。
赋值表达式的使用,还可以结合一些运算符,例如:
a += b;
相当于
a = a + b;
能有这样用的运算符有下面这几种:
*=
、/=
、%=
、+=
、-=
、<<=
、>>=
、>>>=
、&=
、^=
、|=
、**=
我想你已经注意到了,赋值表达式的等号左边和右边能用的表达式类型不一样,在这一课,我们已经关注完了表达式的左边部分(左值表达式)的语法结构,下一节课,我们将会给你重点讲解表达式的右边部分。
赋值表达式可以构成Expression表达式的一部分。在JavaScript中,表达式就是用逗号运算符连接的赋值表达式。
在JavaScript中,比赋值运算优先级更低的就是逗号运算符了。我们可以把逗号可以理解为一种小型的分号。
a = b, b = 1, null;
逗号分隔的表达式会顺次执行,就像不同的表达式语句一样。“整个表达式的结果”就是“最后一个逗号后的表达式结果”。比如我们文中的例子,整个“a = b, b = 1, null;”
表达式的结果就是“,”
后面的null
。
在很多场合,都不允许使用带逗号的表达式,比如我们在前面课程中提到,export后只能跟赋值表达式,意思就是表达式中不能含有逗号。
这节课我们开始讲解了运算符和表达式的一些相关知识,这节课上,我们已经学习了赋值表达式和赋值表达式的左边部分。下节课,我们将会讲一讲赋值表达式的右边部分。
最后给你留一个作业,把今天讲到的所有运算符按优先级排列成一个表格,下节课我们会补完剩下的部分。
评论