目录

  • 一、ES6的新特性
  • 1、函数
  • (1)函数参数的默认值
  • (2)箭头函数
  • 2、类
  • (1)ES5类的创建
  • (2)ES6类的创建
  • (3)ES6支持getter(获取属性值)和setter(设置属性值)方法。
  • (4)静态成员:类的所有对象共享的成员
  • (5)类的继承
  • 3、模块
  • (1)使用export导出&使用import导入
  • (2)默认导出:export default 名称
  • node运行.js文件时不识别ES6的模块化指令的解决办法:


一、ES6的新特性

1、函数

(1)函数参数的默认值

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

(2)箭头函数

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

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

☀️举例如下:

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

es6 函数 类型限定_ES6

b、只有一个参数,省略‘()’

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

☀️举例如下:

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

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

es6 函数 类型限定_javascript_02

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)

es6 函数 类型限定_es6_03


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

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

☀️举例如下:

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

console.log(obj.test())

es6 函数 类型限定_es6_04

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()

es6 函数 类型限定_ES6_05

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)

es6 函数 类型限定_javascript_06

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()

es6 函数 类型限定_es6 函数 类型限定_07

(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()

es6 函数 类型限定_ES6_08

(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)

es6 函数 类型限定_ES6_09

强调:属性的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()

es6 函数 类型限定_ES6_10

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()

es6 函数 类型限定_ES6_11

(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()//子类对象调用自己的方法

es6 函数 类型限定_ES6_12


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()

三种方法的输出:

es6 函数 类型限定_ES6_13

3、模块

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

(1)使用export导出&使用import导入

A、导出一个变量。

//导出:test.js
export let userName = '西安邮电大学'
//导入:t6.js
import {userName } from "./test.js";
console.log(userName)

运行结果:

es6 函数 类型限定_ES6_14

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)

es6 函数 类型限定_es6 函数 类型限定_15

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)

运行结果:

es6 函数 类型限定_ES6_16

(2)默认导出:export default 名称

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

//导出:test.js
export default function(){
    console.log('西安邮电大学')
}
//导入:t6.js
import fun from './test.js'  //导入test模块中的默认导出函数,并重命名为fun
fun()

运行结果:

es6 函数 类型限定_前端_17

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()

运行结果:

es6 函数 类型限定_es6 函数 类型限定_18

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,目的是解决跨域访问的问题

es6 函数 类型限定_javascript_19