ES6系列学习（6）模块、Babel、Polyfill、ES6继承-蒲公英云

ES6系列学习（6）模块、Babel、Polyfill、ES6继承

1.ES6模块

//config.js
export const apiKey = 'abc123';
export const age = 12;
export function greet(name){
};
//
import { apiKey ,age , greet} from './config'

slug:可以将各种各样的用户名转换成-连接的用户名，地址：https://www.npmjs.com/package/slug

2.使用SystemJS打包ES模块

和Webpack一样是打包工具，但是不用复杂配置。

https://www.npmjs.com/package/systemjs

3.Babel

babel中文网：https://www.babeljs.cn/

4.Polyfill

babel只能转换语法而不是去增加或修改原有ES6新的属性和方法。polyfill就是为了解决这种情况，也能抚平不同浏览器之间对js实现的差异。

babel/polyfill使用：https://www.babeljs.cn/docs/babel-polyfill

5.原型继承

//ES5的原型继承
function User(name,email){
    this.name = name;
    this.email = email;
}
User.prototype.info = function(){
    console.log('Hi I am ...');
}
const codecasts = new User('','');
codecasts.info()
//ES6的class继承
class User{
    //类中构造函数
    constructor(name,email){
        this.name = name;
        this.email = email;
    }
    //类中方法
    info(){
    }
    //静态方法(只能在原型对象上调用，不能在实例上调用，例如Array.from())
    static description(){
    }
    //get/set设置和获取属性
    set github(value){
        this.girhubName = value;
    }
    get github(){
        return `https://github.com/${this.githubName}`
    }
}
const codecasts = new User('','');
codecasts.github = 'laravist';
codecasts.github

ES5和ES6的继承:

专门写一篇介绍

6.类的扩展

继承一个类：

class Aimal{
    constructor(name){
        this.name;
        this.belly = [];
    }
    eat(food){
        this.belly.push(food);
    }
}
class Dog extends Animal{
    constructor(name,age){
        super(name);   //类似于es5的Animal.call(this,name,age);
        this.age = age;
    }
    bark(){
        console.log('');
    }
}
const lucky = new Dog('lucky',2);
lucky

子类必须在constructor方法里调用super方法，否则不能新建实例。这是因为子类没有属于自己的this对象，而是继承了父类的this对象而对其进行加工。显然，只有调用了super方法之后，才可以使用this。

7.ES6的class扩展内建对象数组

下面两种继承方式输出结果不一样

//1 super（）创建this值指向基类Array，MyArray这个子类在这个基类this上修改，所以this的值可以访问基类上的功能的
class MyArray extends Array{
    constructor(){
        super();
    }
}
//2 子类MyArray创建this的值，this的值指向MyArray的实例，然后调用基类构造函数，Array的其他属性会修饰这个this
function MyArray(){
    Array.apply(this,arguments);
}
const colors = new MyArray();
colors[0] = 'red';
console.log(colors.length);   //undefined
colors.length = 0;
console.log(colors[0])   //red