【Es6入门实践】11 类的声明和使用，模块化操作

class:类的声明和使用

• 声明一个类 写类，首字母大写 对象首字母是小写
• 类里面都是方法和属性

class Coder{
     name(val){//函数的参数，而不是类的参数 val:内函数的参数
      console.log(val)
     }
}
//实例化一个类
let hls=new Coder;
hls.name('JACK')

浏览器显示结果

函数的参数

class Coder{
     name(val){//函数的参数，而不是类的参数 val:内函数的参数
      console.log(val)
      return val;
     }

     skill(val){
      //类里面的函数引用，用this(整个作用域)
       console.log(this.name('Cola')+':'+'skill-'+val)
     }
}
//实例化一个类
let hls=new Coder;
// hls.name('JACK')
//类的多方法声明
hls.skill('playing')

类的传参

函数的参数

class Coder{
     name(val){//函数的参数，而不是类的参数 val:内函数的参数
      console.log(val)
      return val;
     }

     skill(val){
      //类里面的函数引用，用this(整个作用域)
       console.log(this.name('Cola')+':'+'skill-'+val)
     }
     
     //类的参数设置
     constructor(a,b){//只要有这个就代表是类的参数，而不是函数的参数了
       this.a=a;
       this.b=b;
    }
    add(){
      return this.a+this.b
    }
}

类的传参–怎么调用呢

在new的时候就要传递参数

let hls=new Coder(1,2);
console.log(hls.add())

类的继承

class htmler extends Coder {

}

let lily=new htmler;
lily.name('lucy')

模块化操作

• export 生成模块 输出操作
• import 引入模块 引入操作

我们先在之前的src文件下新建一个temp.js文件

我们在src/index.js文件下进行引入

我们可以在src路径下输入如下命令行，查看结果

babel-node index.js

我们发现被顺利打印出来了，说明引入成功了

假设我们有一个多变量输出，那么我们应该怎么操作呢？

• 其实我们可以直接把它包装成对象

export {name,age,skill};

temp.js完整代码

var name='hls';
var age='18';
var skill='web';
//这个就是我们的多变量输出-函数的模块化输出
//函数模块化包装并输出
export {name,age,skill};

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

//语义化
export{
  name as a,
  age as b,
  skill as c
}

index,js文件

// 模块化操作 
// export 生成模块 输出操作
// import 引入模块 引入操作

import {name,age,skill} from './temp'

console.log(name)

区分

• export default 只能有一个
• export 可以有很多

temp.js文件

//export  
export var a='HLS';
export function add(a,b){
  return a+b
}

//export default 这个是默认的，相当于出口有一个默认的主文件
//它只能在这个文件中有一个
export default  var a = 'hls'

index.js文件中

//export
//我们必须知道它们都包装成了什么模块
//一个是a，一个是add,我们必须用花括号包装起来引入
import {a,add} from './temp'


//  export default 名字自己取的，而且不用花括号，而且不需要知道里面名字到底是什么

import shy from './temp'