深入浅出ES6---第二篇

女爷i 2022-06-14 01:53 182阅读 0赞

## arrow function箭头函数 ##

函数的快捷写法，不需要通过 function 关键字创建函数，并且还可以省略 return 关键字。=> 是function的简写形式，支持expression 和 statement 两种形式。

// 箭头函数根据parma个数的不同，写法上还可以做如下改变
    
    () => { expression } // 零个参数用 () 表示
    x => { expression } // 一个参数可以省略 ()
    (x, y) => { expression } // 多参数不能省略 ()

例子：

var person = {
        name: 'tom',
        getName: function() { 
            return this.name;
        }
    }
    // ES6
    const person = {
        name: 'tom',
        getName: () => this.name
    }

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this.

## 增强的对象字面量 ##

对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。  
（1）当属性与值的变量同名时

const name = 'Jane';
    const age = 20
    
    // es6
    const person = {
      name,
      age
    }
    
    // es5
    var person = {
      name: name,
      age: age
    };

（2）定义方法可以不用function关键字

// es6
    const person = {
      name,
      age,
      getName() { // 只要不使用箭头函数，this就还是我们熟悉的this
        return this.name
      }
    }
    
    // es5
    var person = {
      name: name,
      age: age,
      getName: function getName() { 
        return this.name;
      }
    };

（3）在对象字面量中可以使用中括号作为属性，表示属性也能是一个变量了。

const name = 'Jane';
    const age = 20
    
    const person = {
      [name]: true,
      [age]: true
    }

## 模块的 Import 和 Export ##

import 用于引入模块，export 用于导出模块。

// 引入整个文件
    import dva from 'dva';
    
    // 引入函数(可以是一个或多个)
    import { connect } from 'dva';
    import { Link, Route } from 'dva/router';
    
    // 引入全部并作为 github 对象
    import * as github from './services/github';
    
    // 导出默认
    export default App;
    // 部分导出，复合写法是 export { App } from './file';
    　　等价于import { App } from './file；export｛App｝

## class、extend、super ##

这三个特性涉及了ES5中最令人头疼的的几个部分：原型、构造函数，继承。  
**class**  
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法.

// ES5
    // 构造函数
    function Person(name, age) { 
      this.name = name;
      this.age = age;
    }
    
    // 原型方法
    Person.prototype.getName = function() { 
      return this.name;
    }
    
    // ES6
    class Person { 
      constructor(name, age) {  // 构造函数
        this.name = name;
        this.age = age;
      }
    
      getName() {  // 原型方法
        return this.name;
      }
    }

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。  
简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。这个和ES5里的构造函数是差不多的意思,相当于把方法定义在构造函数里是私有的，而把方法定义到原型中，所有实例共享.  
**extend继承**

class Person { 
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
    
      getName() {
        return this.name
      }
    }
    
    // Student类继承Person类
    class Student extends Person { 
      constructor(name, age, gender, classes) {
        super(name, age);
        this.gender = gender;
        this.classes = classes;
      }
    
      getGender() {
        return this.gender;
      }
    }

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后可以对其进行加工。如果不调用super方法，子类就得不到this对象。  
**class、extend／super三者的综合**

class Animal { 
        constructor(){
            this.type = 'animal'
        }
        says(say){
            console.log(this.type + ' says ' + say)
        }
    }
    
    let animal = new Animal()
    animal.says('hello') //animal says hello
    
    class Cat extends Animal { 
        constructor(){
            super()
            this.type = 'cat'
        }
    }
    
    let cat = new Cat()
    cat.says('hello') //cat says hello