ES6(九）

这是我参与更文挑战的第9天，活动详情查看： 更文挑战

来啦来啦，接day8

16. class类

① 类的多方法声明

复制代码

class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name(‘q’)+’:’+’Skill:’+val);//若name方法没有return，则此处无法输出q
}
}
let jspang= new Coder;
jspang.name(‘q’);
jspang.skill(‘web’); //q q q:Skill:web

② 类的传参

在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。

复制代码

class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name(‘q’)+’:’+’Skill:’+val);
}
constructor(a,b){//用constructor来约定了传递参数，然后用作了一个add方法，把参数相加。
this.a=a;
this.b=b;
}
add(){
return this.a+this.b;
}
}

let q=new Coder(1,2);
console.log(q.add());//3

③ class的继承

复制代码

class htmler extends Coder{//子类为空
}
let qq=new htmler;
qq.name(‘q’);//调用里边的name方法,结果为 q

17. 模块化操作

• export :负责进行模块化，也是模块的输出。

• import : 负责把模块引，也是模块的引入操作。

① export可以让我们把变量，函数，对象进行模块化，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化。我们新建一个temp.js文件，然后在文件中输出一个模块变量。

export var a = 'jspang';

然后可以在index.js中以import的形式引入。

复制代码

import {a} from ‘./temp.js’;
console.log(a);

这就是一个最简单的模块的输出和引入。

② 多变量的输出

这里声明了3个变量，需要把这3个变量都进行模块化输出，这时候我们给他们包装成对象就可以了。

复制代码

var a =’q’;
var b =’qq’;
var c = ‘web’;
export {a,b,c}

③ 函数的模块化输出

复制代码

export function add(a,b){
return a+b;
}

④ as的用法
有些时候我们并不想暴露模块里边的变量名称，而给模块起一个更语义话的名称，这时候我们就可以使用as来操作。

复制代码

var a =’q’;
var b =’qq’;
var c = ‘web’;
export {
x as a,
y as b,
z as c
}

⑤ export default的使用 加上default相当是一个默认的入口。在一个文件里export default只能有一个。

对比一下export和export default的区别

复制代码

(1).export
export var a =’q’;
export function add(a,b){
return a+b;
}

对应的导入方式
import {a,add} form './temp';//也可以分开写

(2).export defalut

export default var a='q';

对应的引入方式

import str from './temp';

ES6的模块化不能直接在浏览器中预览，必须要使用Babel进行编译之后正常看到结果。

OVER

END.明天见