ES6新特性总结（4）函数、类、模块化

1 函数

1.1 函数形参的默认值

在很多情况下，需要在使用函数的时候给定默认参数，在ES5标准中一般会这样写：

function fun(name, age) { //设置一个函数，有2个参数
    //如果name的类型不为undefined，那name还是name，否则为张三
    name = typeof name !== "undefined" ? name : "张三";
    //如果age的类型不为undefined，那age还是age，否则为20
    age = typeof age !== "undefined" ? age : 20;
    //输出name，age
    console.log(name, age);
}
fun(); //张三 20
fun("李四"); //李四 20
fun("王五", 3); //王五 3

1.2 函数形参不定参数

在很多情况下，使用函数传参的时候，形参的数量是不固定的，这时候要获取参数值就会比较麻烦。在ES5标准中可以通过隐藏参数arguments来获取，此时会把所有参数放在arguments中。

function fun() {
    console.log(arguments);
    console.log(arguments[0]); //第一个参数
    console.log(arguments[1]); //第二个参数
    console.log(arguments[2]); //第三个参数
}
fun("张三", 20, "178cm"); 

输出结果为：
[Arguments] { ‘0’: ‘张三’, ‘1’: 20, ‘2’: ‘178cm’ }
张三
20
178cm

1.3 箭头函数

箭头语法最大的特点是有箭头“=>”号，当然箭头语法有很多变式写法。
1、没有参数，用括号代替

let fun = () => "张三";

2、一个参数，括号可以省略

let fun = arg => "李四";

3、多个参数

let fun = (arg1, arg2) => arg1 + arg2;
console.log(fun(1, 3));

4、利用箭头语法里隐式返还的时候需要注意对象的情况，需要注意如下错误情况：

let fun = () => {
    name: "张三",
    age: 20
}

这个代码初步感觉是返还一个对象，但是这里的大括号和函数里的大括号在含义上有冲突，系统会认为大括号是函数里的括号，而不是对象里的括号，导致报错，正确形式为：

let fun = () => ({
    name: "张三",
    age: 20
})
console.log(fun()); //{ name: '张三', age: 20 }

5、箭头函数里没有this绑定，如下代码，this指向对象本身。

let obj = {
    id: 2,
    fun: function () {
        console.log(this.id);
    }
}
obj.fun(); //2

上面代码可以打印出id为2，this指向了obj，所以this.id可以取得obj.id。如果改成箭头语法会发现，函数中this指向改变了，代码如下：

let obj = {
    id: 2,
    fun: () => {
        console.log(this.id);
    }
}
obj.fun(); //undefined

这里发现this.id获取不到值，原因是箭头函数没有this绑定，箭头函数中的this会指向最近的上层this，所以这里this的指向是window，所以最终取不到this.id。

6、使用箭头语法的时候没有隐藏参数arguments的绑定，代码如下：

let fun = (arg1, arg2) => {
    console.log(arguments);
    return arg1 + arg2;
}
fun();

2 类（class）

2.1 类的概述

在ES5标准中通过构造函数来模拟类的功能，一般会定义一个构造函数，把一类功能做封装，通过new运算符来调用。

function Person(name) {
    this.name = name;
    this.age = 20;
}
Person.prototype.fun = function () {
    console.log("fun...");
}
let person = new Person("张三");
console.log(person.name, person.age); //张三 20
person.fun(); //fun...

在ES6标准中提供class关键字来定义类，在写法上更简洁、语义化更强。如下：

class Person {
    constructor(name) {
        this.name = name;
        this.age = 20;
    }
    fun() {
        console.log("fun...");
    }
}
let person = new Person("张三");
console.log(person.name, person.age); //张三 20
person.fun(); //fun...

ES6支持通过getter、setter在原型上定义属性。创建getter的时候需要用关键字get；创建setter的时候需要用关键字set。例如：

class Person {
    constructor(name) {
        this.name = name;
    }
    get name() {
        return this._name;
    }
    set name(newName) {
        this._name = newName;
    }
}
let p1 = new Person("张三");
console.log(p1.name); //利用get获取当前的name，输出：张三
p1.name = "李四"; //利用set修改当前的name
console.log(p1.name); //利用get获取修改后的name，输出：李四

2.2 静态成员

在ES5标准中的静态成员，可以通过如下方式实现：

function Person(name) {
    this.name = name;
    this.age = 20;
}
Person.num = 10; //静态属性
Person.fun = function () { //静态方法
    console.log("fun...");
}

在ES6标准中提供static关键字类声明静态成员。

class Person {
    static num = 20; //静态属性
    constructor(name) {
        this.name = name;
    }
    static fun() { //静态方法
        console.log("fun...");
    }
}
console.log(Person.num); //20
Person.fun(); //fun

2.3 类的继承

在ES5标准中可以通过call、apply、bind来实现构造函数的继承，实现方式如下：

function Father(name) {
    this.name = name;
    this.age = 50;
}
function Son(name) {
    Father.call(this, name);
    Father.apply(this, [name]);
    Father.bind(this)(name);
    this.height = "178cm";
}

上述方式可以实现构造函数的继承，但是如果有方法在Father原型上实现，还需要考虑原型的继承，单纯的原型赋值继承还会涉及传址问题，所以实现起来比较繁琐。

ES6标准中类的继承：通过extends关键字实现。

class Father {
    constructor(name) {
        this.name = name;
    }
    fun() {
        console.log("fun...");
    }
}
class Son extends Father {
    constructor() {
        super();
    }
    hobby() {
        console.log("喜欢打游戏");
    }
}
let son = new Son();
son.fun();

在继承中需要调用super()方法继承父类的构造方法。super()在使用过程中需要注意以下两点：
A、在访问this之前一定要调用super()。
B、如果不调用super(),可以让子类构造函数返还一个对象

3 模块化

ES6的模块化分为导出（export）与导入（import）两个模块：

1、export的用法

在ES6中每一个模块即是一个文件，在文件中定义的变量、函数，对象在外部是无法获取的。如果希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（导出）。

（1）导出一个变量
①先新建test.js文件，在文件中写入以下代码：

export let myName = "刘备";

②再创建index.js文件，在该文件中以import的形式将这个变量进行引入：

import { myName } from "./test.js";
console.log(myName); //输出：刘备

（2）导出多个变量，可以将这些变量包装成对象进行模块化输出
①先新建test.js文件，在文件中写入以下代码：

let myName = "橘猫吃不胖"
let myAge = 90;
let myfun = function () {
    return `我是：${myName}，我的年龄：${myAge}`;
}
export {
    myName,
    myAge,
    myfun
}

②在index.js文件中，以import的形式将这个变量进行引入：

import { myName, myAge, myfun } from "./test.js";
console.log(myName); //橘猫吃不胖
console.log(myAge); //90
console.log(myfun()); //我是：橘猫吃不胖，我的年龄：90

（3）导出时重命名变量：通过as来进行操作
①在test.js文件中写入以下代码：

let myName = "橘猫吃不胖"
let myAge = 90;
let myfun = function () {
    return `我是：${myName}，我的年龄：${myAge}`;
}
export {
    myName as name,
    myAge as age,
    myfun as fn
}

②在index.js文件中输入以下代码：

import { name, age, fn } from "./test.js";
console.log(name); //橘猫吃不胖
console.log(age); //90
console.log(fn()); //我是：橘猫吃不胖，我的年龄：90

（4）导入整个模块：import * as 名字 from 文件
在index.js中输入以下代码：

import * as info from "./test.js";
console.log(info.name); //橘猫吃不胖
console.log(info.age); //90
console.log(info.fn()); //我是：橘猫吃不胖，我的年龄：90

2、默认导出（export default）
（1）一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。
①在test.js文件中写入以下代码：

export default function () {
    return "默认导出一个方法";
}

②在index.js文件中写入以下代码：

import myFun from "./test.js" //注意这里默认导出不需要用{}
console.log(myFun()); //默认导出一个方法

（2）可以将所有需要导出的变量放入一个对象中，然后通过export default进行导出
①在test.js文件中写入以下代码：

export default {
    myFn() {
        return "默认导出一个方法";
    },
    myName: "橘猫吃不胖"
}

②在index.js文件中写入以下代码：

import obj from "./test.js";
console.log(obj.myFn()); //默认导出一个方法
console.log(obj.myName); //橘猫吃不胖

（3）混合导出
①在test.js文件中写入以下代码：

export default function () {
    return "默认导出一个方法";
}
export let myName = "橘猫吃不胖";

②在index.js文件中写入以下代码：

import myFn, { myName } from "./test.js";
console.log(myFn()); //默认导出一个方法
console.log(myName); //橘猫吃不胖

3、重命名export和import
如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，可以这样做：

在test1.js文件中代码如下：

export let myName = "我来自test1.js";

在test2.js文件中代码如下：

export let myName = "我来自test2.js";

在index.js文件中代码如下：

import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1); //我来自test1.js
console.log(name2); //我来自test2.js