【前端】ES6新特性中

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cheidou123/article/details/91483726

一 模块系统

ES6模块化就是要解决作用域问题，让JS变的更有条理。

1 export导出

• ⑴使用export关键字导出

export const someValue = 1234
export const someValue0 = '1234'
export const someValue1 = {}
export let someValue2 = 1234
export let someValue3 = '1234'
export function someFunc = a => a+1

• ⑵ 还可以这么写

const someValue = 1234
function someFunc = a => a+1
let someObj = {}

export { someValue, someFunc, someObj}

• ⑶ 重命名导出

const someValue = 1234
function someFunc = a => a+1
let someObj = {}

export {
	someValue as exportNum,
    someFunc as exportFunc,
    someObj as exportObj
}

• default导出
  default导出在一个文件只能使用一次

export defalut someValue = 1234

2 import导入

• ⑴导入指定变量

import { someValue } from './exportFile'  // 导入一个

import { someFunc, someObj } from './exportFile'   // 导入多个

• ⑵重命名导入指定变量

import { someValue as importValue } from './exportFile'  // 重命名一个
import { someFunc as importFunc , someObj as importObj } from './exportFile' // 重命名多个
import {
    someValue,
    someFunc as importFunc 
}  // 导入多个，且部分重命名

• ⑶整体加载

import * as importModule from './exportFile'  // 导入全部且挂载在 importModule 对象上

console.log(importModule.someValue)  // 1234

• ⑷仅导入模块

import 'animate.css'

• ⑸导入默认值

// 就是使用 default 导出的变量，导入的时候我们要为它命名
import value from './exportFile'

3 注意

ES6模块输出的是值的引用。不同的脚本加载这个接口，得到的都是同一个实例。
例如:

// mod.js
function C() {
  this.sum = 0;
  this.add = function () {
    this.sum += 1;
  };
  this.show = function () {
    console.log(this.sum);
  };
}

export let c = new C();

// x.js
import {c} from './mod';
c.add();

// y.js
import {c} from './mod';
c.show();

// main.js
import './x';
import './y';

输出的是1

二 类与继承

1. 类

class没有预解析，实例化一定要放在下面

class Person{  // Person类  它也是一个函数
    constructor(name){  // 构造函数
        this.name = name;
    }
    showName(){
        return this.name;
    }
}
var p1 = new Person('苏日俪格');
console.log(p1.showName());  // 苏日俪格

2.继承

class Person{
    constructor(name){
        this.name = name;
    }
    showName(){
        return this.name;
    }
}
class SubPerson extends Person{
    constructor(name,job){
        super(name);    // 指向父类的构造函数
        this.job = job;
    }
    showJob(){
        return this.job;
    }
}
var p1 = new SubPerson('苏日俪格','前端开发');
console.log(p1.name);  // 苏日俪格
// console.log(p1.showName());  // 苏日俪格
// console.log(p1.job); // 前端开发