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

缺乏、安全感 2022-02-13 15:55 1127阅读 0赞

**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][https_www.npmjs.com_package_slug]

**2.使用SystemJS打包ES模块**

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

[https://www.npmjs.com/package/systemjs][https_www.npmjs.com_package_systemjs]

**3.Babel**

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

**4.Polyfill**

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

babel/polyfill使用：[https://www.babeljs.cn/docs/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

[https_www.npmjs.com_package_slug]: https://www.npmjs.com/package/slug
[https_www.npmjs.com_package_systemjs]: https://www.npmjs.com/package/systemjs
[https_www.babeljs.cn]: https://www.babeljs.cn/
[https_www.babeljs.cn_docs_babel-polyfill]: https://www.babeljs.cn/docs/babel-polyfill