New features of ES6 (2)

One 、 function

1、ES6 The default value of the function parameter

function fun(name：' Zhang San ',age：'20',ab){
    
 Function body statement 
}

2、 Arrow function

2.1、 When the arrow function has no parameters , Just replace it with parentheses

Such as ：

 let fun = () => {
     Function body statement }

give an example ：

  let obj = {
    
    uname:' Zhang Liang ',
    age:25,
    //(1) No parameters , Just replace it with parentheses 
         fun: ()=>{
     //  Arrow function 
        console.log(' Arrow function ')
    } 

2.2、 Omit parentheses if there is only one parameter

 let fun = deg => {
     Function body statement }

for example ：

let obj={
    
    name : ' Zhang San ',
    age : 20,
    fn:age=>{
    
        console.log(' Arrow function ')
    }
}

obj.fn()

2.3、 The arrow function itself implies ruturn The role of （ The function body statement has only one sentence ）

let add =(age1,aeg2) =>ag1+age2
// Equivalent to ：
let add = function（age1,age2）{
    
    return age1+age2
}

2.4、
d、 If you want to use its implicit return function in the arrow function , Return an object , You must enclose the object with parentheses , Otherwise, an error will be reported

   let test = () =>({
    

   })

for example ：

let obj={
    
    name : ' Zhang San ',
    age : 20,
test:()=>({
    
    name:' Zhang San ',
    age:20

})
}

console.log(obj.test())

2.5、 There is no... In the arrow function this The binding of

for example ：

 let obj={
    
    name : ' Zhang San ',
    age : 20,
    fn:age=>{
    
        console.log(' full name ：',this.name)
    },
    fun:function(){
    
        console.log(' full name ：',this.name)
    }
}
obj.fn()
obj.fun()

2.6、 There is no built-in object in the arrow function argument

Two 、 Class function

1、 stay ES5 Create class in

function Person(name,age){
    
    this.pname = name
    this.page  = age
}

Person.prototype.fun = function(){
    
    console.log(' Bind functions on the prototype ')
}

let p1 = new Person(' Liu bei ',20)

p1.fun()

2、 stay ES6 Create a function in

class Person{
    
constructor(name,age){
    
    this.pname = name
    this.page  = age

}
fun(){
    
    console.log(' Binding function ')
}
}

let p2 = new Person(' Liu bei ',20)

p2.fun()

3、ES6 Support getter( Get attribute value ) and setter( Setting property values ) Method

class Person{
    
    constructor(name,age){
    
        this.pname = name
        this.page = age
    }
get pname(){
     // Must bring get, The method name must be the same as the property name 
    return this._pname // pname You have to take '_', Express pname yes Person Private properties of class 
}
set pname(newName){
     // setter Method , Used to set private properties pname Value , You have to take set
    this._pname = newName
}
}

let p1 = new Person(' Guan yu ',28)
console.log(p1.pname)// The default call is get Method (pname())
p1.pname = ' Li Si '// The default call is set Method .

emphasize ： Attribute getter Methods and setter Methods must be defined at the same time

4、 Static members ： Members shared by all objects of the class .（ explain ： Class members include member variables （ attribute ） And member methods ）

4.1： stay es5 How to define static member methods ：

(1)、 Static attribute constructor name . Property name // This attribute is static , Share... For all objects
（2)、 Static methods , Constructor name . Method name (){}// The method is static , Share... For all objects

function Person(name,age){
    
    this.name=name
    this.age=age
}

Person.prototype.f1 = function(){
    
    console.log(' Dynasty ：',Person.school)
    console.log(' full name ：',this.name)
    console.log(' Age ：',this.age)
}

Person.school=' The Ming dynasty '

var s1 = new Person(' Zhu yuanzhang ',50)
var s2 = new Person(' Zhu Biao ',25)
var s3 = new Person(' Zhu di ',20)

s1.f1()
s2.f1()
s3.f1()

4.2、ES6 Define static member methods in ： adopt static Keyword to define static members

  class Person{
    
    static school=' The Ming dynasty '
    constructor(name,age){
    
        this.name=name
        this.age=age
    }
    show(){
    
        console.log(' Dynasty ：',Person.school)
        console.log(' full name ：',this.name)
        console.log(' Age ：',this.age)
    }
  }

  Person.school=' The Ming dynasty '

var s1 = new Person(' Zhu yuanzhang ',50)
var s2 = new Person(' Zhu Biao ',25)
var s3 = new Person(' Zhu di ',20)

s1.show()
s2.show()
s3.show()

5、 Class inheritance

5.1、ES6 Implementation of class inheritance in , adopt extends To achieve

class Person{
    
    constructor(name){
    
        this.name=name
    }

    fn(){
    
        console.log(' Method of parent class ')
    }
}

class son extends Person{
    
    constructor(name){
    
        super(name)
    }
    show(){
    
        console.log(this.name+' football ')
    }
}

let s1 = new son(' Lionel messi ')


s1.fn()
s1.show()

5.2、ES5 Inheritance in ： adopt call、apply、bind Method realization

function father(name){
    
    this.name = name
    this.fun = function(){
    
        console.log(' Parent class ')
    }
}

function son(name) {
    
    //1、 call call Function implementation inheritance 
    //father.call(this,name)

    //2、 call apply Method 
    //father.call(this,[name])

    //3、 call bind Function implementation inheritance 
    father.bind(this)(name)
}
let s1 = new son(' zhang wuji ')

s1.fun()

3、 ... and 、 modular

A module is a .js file , Variables defined inside the module , function 、 Object cannot be accessed externally . If you want to access the contents inside the module from outside the module, please refer to ES6 You can export it

1、export export

1.1、 Export a variable

// export ：test.js
export let userName = ' Xi'an University of Posts and Telecommunications '

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

1.2、 Export multiple variables

  let username = ' Xi'an ' 
 let userage = '1000'
 let  show = function(){
    
    console.log(' name '+username)
    console.log(' Age '+userage)
 }

 export{
    
    userage,
    username,
    show
 }

 import {
     username } from "./export.js";
 console.log(username) 

 import {
     userage } from "./export.js";
 console.log(userage) 

 import {
     show } from "./export.js";
 console.log(show) 

1.3、 When exporting variables , adopt age Keyword rename variable

  let username = ' Xi'an ' 
 let userage = '1000'
 let  show = function(){
    
    console.log(' name '+username)
    console.log(' Age '+userage)
 }

 export{
    
    userage,
    username,
    show
 }

 import {
     age } from "./export.js";
 console.log(age) 

2、 The default is derived ：export default name

2.1、 A module has only one default Export , The imported name and the exported name can be different

 export default function() {
    
        console.log(' Xi'an ')
 } 

import fun from './export.js' // Import export Default export function in , Rename to fun
//fun It's an object , Equivalent to  fun = obj
fun() // Call the... Of the import module f1 function 

2.2、 A default Export ： It contains many contents ： Package multiple exported contents into objects

<!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='../export-text.js'></script>
</body>
</html>

  var obj= {
    
    pt:'AAAAAA',
    fun(){
    
    console.log(' Xi'an :'+this.pt)
 }
  
 }

 export default obj

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

It should be noted that , stay node Medium operation yes ,js The file is not recognized ES6 Modular instructions , An error will be reported . The error is displayed as ：“Cannot use import statement outside a module”, as a result of node Modular instructions and es6 The modular instructions of are different ： In other words node I won't support it ES6 The modular .
resolvent （ stay VSCode in ）： A、 take js File put in html In file ：<script type='module' src='../export'></script> B、 to vscode Installing a plug-in , Plug in name ：live server, The purpose of installation is to solve the problem of cross domain access .