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