一、前言

JS表达式分类：

• 基本表达式
• 复杂表达式

拓展 - 语句和表达式的区别：

• 语句是为了进行某种操作，一般情况下不需要返回值
• 表达式都是为了得到返回值，一定会返回一个值（这里的值不包括undefined）

二、基本表达式

• 基本表达式是表达式的最小单位，不包含其它表达式

• 分类：

  • 字面量
  • 关键字
  • 变量

• 具体划分：this关键字、标识符引用、字面量引用、数组初始化、对象初始化和分组表达式。

2.1 this关键字和标识符

• this: 表示当前对象的一个引用，返回当前对象

  • 在方法中，this表示该方法所属的对象

    在对象方法中，this指向调用它所在方法的对象。示例如下：

    // this 表示 person 对象。
    var person = {
      firstName: "John",
      lastName : "Doe",
      id       : 5566,
      // fullName 方法所属的对象就是 person。
      fullName : function() {
        return this.firstName + " " + this.lastName;
      }
    };
    

  • 在函数中，默认情况下，this表示全局对象

    函数的所属者默认绑定到 this 上。所以在浏览器中，window就是该全局对象

  • 在函数中，在严格模式下，this是未定义的（undefined）

    函数是没有绑定到 this 上，这个时候 this 是 undefined

  • 在事件中，this表示接收事件的元素。示例如下：

    <button onclick="this.style.display='none'">
    点我后我就消失了
    </button>
    

  • 类似 call() 和 apply() 方法可以将this引用到任何对象

    在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

    示例如下：

    // 当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：
    var person1 = {
      fullName: function() {
        return this.firstName + " " + this.lastName;
      }
    }
    var person2 = {
      firstName:"John",
      lastName: "Doe",
    }
    person1.fullName.call(person2);  // 返回 "John Doe"
    

  • 如果单独使用，this表示全局对象

    在浏览器中全局对象就是 window

• a: 返回变量a的值

• b: 返回变量b的值

2.2 字面量引用

字面量又叫直接量，指程序中能直接使用的数据值。以特定符号和格式规定的，创建爱你指定类型变量的，不能被修改的便捷表达式。

因为是表达式，字面量都有返回值。

字面量是方便程序员以简单的句式，创建对象和变量的语法糖，但有时候以字面量创建的“对象”和以标准方法创建的对象的行为并不完全相同。

// null字面量，空值字面量
null;
undefined;
//布尔值
true;
false;
//数字
1;
//字符串
'abc';
/pattern/;

数组和对象的初始化实际上是一个以字面量方式描述的初始化过程。这两个初始化表达式有时称作数组字面量和对象字面量

对象字面量就是空集合，或被括号包含，且其中含有键-值对的逗号分割列表

var person = {};

var person = {
  name: "jasen",
  age: "14"
}

注意点：对象的字面量是直接根据对象值定义出来的对象，如果使用 var person = new Object()，则是由Object定义出来，只是一个引用

数组字面量 同理，等其他

var arr = [];
var arr = ['a','b','c'];

2.3 分组表达式

分组表达式是指括号，用于重写运算符的优先级

三、复杂表达式

复杂表达式是由原始表达式和操作符组合而成

分类：

• 属性访问表达式

• 对象创建表达式

• 函数表达式

3.1 属性访问表达式

属性访问表达式可以得到 对象的属性值 或 数组元素的值。

写法：

​ 1）expression.indentifier: 表达式后跟随一个句号和标识符，表达式指定对象，标识符则指定需要访问的属性名称

​ 2）expression.[expression]: 使用方括号，方括号内是另一个表达式（这种方法适用于对象和数组），方括号内的表达式指定要访问的属性名称或要访问的数组元素的索引

var obj = { a : 1};
console.log(obj.a);  //1
console.log(obj[a]); //1
console.log(obj.b); // undefined

// 计算结果是null或undefined
var obj = null;
console.log(obj.a); // 抛出异常

// 计算结果不是对象
var obj = "hello";
console.log(obj.a); // undefined

var arr = [1, 2, 3];
console.log(arr[0]); //1

计算规则：

​ 1）句号和中括号之前的表达式会首先计算，如果计算结果是null或undefined，表达式会抛出异常，因为这两个值不能包含任意属性。

​ 2）如果计算结果不是对象，JS会自动将其转换为对象。

​ 2）如果对象表达式后跟随一对方括号，则会计算方括号内的表达式的值并将其转换为字符串。

​ 不论哪种情况，如果命名的属性不存在，整个属性访问表达式的返回值为undefined

3.2 对象创建表达式

创建一个对象，并调用一个函数初始化新对象的属性

new Object();

若对象创建表达式不需要传入任何参数给构造函数，则圆括号可以省略。

3.3 函数表达式

函数表达式分为 函数定义表达式 和 函数调用表达式

• 函数定义表达式 函数定义表达式定义一个新的JS函数，表达式的值是这个新定义的函数

var fn = function() {}

• 函数调用表达式 函数调用表达式是一种调用或执行函数或方法的语法表示。如果圆括号前的表达式是一个属性访问表达式，则这个调用称为方法调用

f(0);
Math.max(x,y,z);
a.sort();

参考

• JS表达式(概述,基本表达式,复杂表达式)
• JavaScript this 关键字
• JavaScript中的字面量是什么