【ES6的新特性-箭头函数&类的定义&模块化】

一、ES6的新特性

1、函数

（1）函数参数的默认值

function fun(name='张三',age,cb){
函数体语句
}

（2）箭头函数

a、没有参数用户括号代替

let fun = ()=>{函数体语句}//将匿名函数赋给一个变量

☀️举例如下：

var obj={
    uname:'张三',
    age:25,
    fun:()=>{
       console.log('箭头函数')
    }
}
obj.fun()

b、只有一个参数，省略‘（）’

let fun =arg=>{函数体语句}

☀️举例如下：

var obj={
    uname:'张三',
    age:25,
    fn:arg=>{//箭头函数：只有一个参数时，省略‘（）’
        console.log('参数是：'+arg)
    }
}

obj.fn('西安邮电大学')

c、箭头函数本身隐含有return的作用(函数体只有一条语句，不带“{}”

let add= (arg1.arg2)=>arg1+arg2
//等价于
let add =function(arg1,arg2)
{
return arg1+arg2;
}

☀️举例如下：

var obj={
    uname:'张三',
    age:25,
    fun:()=>{//箭头函数
       console.log('箭头函数')
    },
    fn:arg=>{//箭头函数：只有一个参数时，省略‘（）’
        console.log('参数是：'+arg)
    },
    add:(arg1,arg2)=>arg1+arg2//箭头函数的函数体不带‘{}’，并且只有一条语句，
}
obj.fun()
obj.fn('西安邮电大学')
let a = obj.add(12,33)
console.log(a)

d、在箭头函数中若要使用隐式返还的功能返回一个对象，则必须用“（）”括起来

let test =()=>({})//圆括号去掉会报语法错误

☀️举例如下：

var obj={
    test:()=>({
         uname:'张三',
         age:25
    })

console.log(obj.test())

e、在箭头函数没有this绑定

var obj={
    uname:'张三',
    age:25,
   
    f1:function(){//非箭头函数中默认绑定了this(即当前对象和this绑定在一起)
        console.log('姓名：'+this.uname)//this代表obj
    },
    f2:()=>{ //在箭头函数中this和当前对象没有进行绑定
        console.log('姓名：'+this.uname)//姓名：undefined
    }
}

obj.f1()
obj.f2()

f、在箭头函数中没有内置的对象arguments

var obj={
    uname:'张三',
    age:25,

    f3:function(arg1,arg2){
        console.log(arguments)//arguments隐含的内置对象
    },
    f4:(arg1,arg2)=>{
        console.log(arguments)//在箭头函数中没有arguments这个隐含的内置对象
    }
}

obj.f3(46,22)
obj.f4(46,22)

2、类

（1）ES5类的创建

ES5类的创建：先定义构造方法，在构造方法中封装类的功能，使用new运算符创建类的对象。

//定义构造方法
function Person(name,age){//本质上就是创建了Person类
    this.name =name;
    this.age = age
}
Person.prototype.fun = function(){
    console.log('原型上绑定函数')
}
//创建对象
var p1 =new Person('刘备',23)
p1.fun()

（2）ES6类的创建

ES6类的创建：在ES6中提供了class关键字来定义类，在写法上更简洁，语义化更强。

class Person{
    constructor(name,age){
        this.name =name
        this.age=age
    }
    fun(){
        console.log('原型上绑定函数')
    }
}
var p1 =new Person('诸葛亮',23)
p1.fun()

（3）ES6支持getter（获取属性值）和setter（设置属性值）方法。

class Person{
    constructor(name,age){
        this.pname =name
        this.page=age
    }
    get pname(){//必须带get,方法名必须和属性名相同，用来获取私有属性pname的值
        return this._pname  //pname必须带上‘_’,表示pname是Person类的私有属性(把pname属性私有化)--提高对象的封装性
    }
    set pname(newName){ //setter方法用来设置私有属性pname的值，必须带set
        this._pname = newName
    }
}
var p1 = new Person('关羽',28)
console.log(p1.pname)//默认调用get方法
p1.pname ='李四'//默认调用set方法
console.log(p1.pname)

强调：属性的getter和setter方法必须同时定义

（4）静态成员：类的所有对象共享的成员

说明：类的成员包括成员变量（属性）和成员方法。

A、ES5定义静态成员的方法：
a、静态属性：构造方法名.属性名 //该属性是静态的，为所有对象共享
b、静态方法：构造方法名.方法名()//该方法时静态的，为所有对象共享

//ES5中静态成员的定义

function Student(name,age){//定义构造方法
    this.name = name
    this.age =age
    // this.school='西安邮电大学' //每个构造函数的私有属性
}

Student.prototype.showInfo =function(){
    console.log('学校：'+this.school) 
    console.log('姓名：'+this.name) 
    console.log('年龄：'+this.age) 
}
// school就是Student类的静态成员变量（静态属性），Student的所有对象共享该属性
Student.prototype.school ='陕西师范大学'  


var s1 =new Student('曹操',21)
var s2 =new Student('刘备',22)
var s3 =new Student('张三',23)

s1.showInfo()
s2.showInfo()
s3.showInfo()

B、ES6中定义静态成员的方法
通过static关键字来定义静态成员

//ES6中静态成员的定义
class Student{
    static school ='西安邮电大学' //静态属性
    constructor(name,age){
        this.name = name
        this.age =age
    }
    show(){
        console.log('学校：'+Student.school)
        console.log('姓名：'+this.name)
        console.log('年龄：'+this.age)
    }
    static fun(){
        console.log('我是静态方法')
    }
}
var s1 = new Student('贾宝玉',20)
var s2 = new Student('林黛玉',22)
var s3 = new Student('贾元春',28)
s1.show()
s2.show()
s3.show()

（5）类的继承

A、ES6中类的继承实例：通过extends关键字来实现。

class Father{
    constructor (name){
        this.name=name
    }
    fun(){
        console.log('我是父类的方法')
    }
}
class Son extends Father{
    constructor(name){
        super(name)
    }
    hobby(){
        console.log('我喜欢打篮球')
    }
}
var s1 =new Son('张无忌')
s1.fun()//子类对象调用继承的父类方法
s1.hobby()//子类对象调用自己的方法

B、ES5继承的实现：通过call、apply、bind方法来实现继承

function Father(name){//父类
    this.name=name
    this.fun= function(){
        console.log('我是父类的方法')
    }
}
function Son(name){//子类
    //1、调用call函数实现继承
    // Father.call(this,name)
    
    //2、调用apply函数实现继承
    // Father.apply(this,[name])

    //3、调用bind函数实现继承
    Father.bind(this)(name)

    this.hobby = function(){
        console.log('我喜欢篮球')
    }

}
var s1 = new Son('张无忌')
s1.fun()

三种方法的输出：

3、模块

模块：一个模块就是一个.js文件，在模块内部定义的变量，函数，对象在外边是无法访问的。如果要在模块的外部访问模块内部的内容，在ES6中可以将其导出。

（1）使用export导出&使用import导入

A、导出一个变量。

//导出：test.js
export let userName = '西安邮电大学'

//导入：t6.js
import {userName } from "./test.js";
console.log(userName)

运行结果：

B、导出多个变量。

//导出：test.js
let userName = '北京大学'
let userAge = 70
let showInfo = function(){
    console.log('校名：'+userName)
    console.log('校龄：'+userAge)
}
export{//导出多个变量
    userName ,
    userAge,
    showInfo
} 

//导入：t6.js
import {userName } from "./test.js";
console.log(userName)
import { userAge } from "./test.js";
console.log(userAge)
import { showInfo } from "./test.js";
console.log(showInfo)

C、导出重命名变量

//导出：test.js
let userName = '北京大学'
let userAge = 70
let showInfo = function(){
    console.log('校名：'+userName)
    console.log('校龄：'+userAge)
}
export{//导出多个变量
    userName as name,//可以在导入时修改变量名称,也就是重命名
    userAge,
    showInfo
} 

//导入：t6.js
import {name } from "./test.js";
console.log(name)

运行结果：

（2）默认导出：export default 名称

a、一个模块只有一个默认导出，导入的名称和导出的名称可以不一致。

//导出：test.js
export default function(){
    console.log('西安邮电大学')
}

//导入：t6.js
import fun from './test.js'  //导入test模块中的默认导出函数，并重命名为fun
fun()

运行结果：

b、一个默认导出，包含多个内容：将需要导出的内容打包到对象中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type='module'  src="../js/t6.js"></script>
</body>
</html>

//test.js
var obj = {
    pt: '西安邮电大学',
    show(){
        console.log('学校名称：'+this.pt)
    }
}
export default obj  //定义默认导出

//t6.js
import top from './test.js' //top = obj
top.show()

运行结果：

node运行.js文件时不识别ES6的模块化指令的解决办法：

（1）报错：SyntaxError: Cannot use import statement outside a module
（2）原因：node的模块化指令和ES6的模块化指令不同。node不支持ES6模块化的指令。
（3）解决办法（在vscode中）
a、将js文件放入html文件中：<script type=‘module’ ‘src=’../js/t6.js’></script>
默认的：<script type=‘text/javascript’ ‘src=’../js/t6.js’></script>仍然使用的是ES6的模块化方式。
b、给vscode安装插件：live server,目的是解决跨域访问的问题