30分钟学会ES6 (二)

ES6学习系列重点针对ES6中新增特性进行学习,分为两个章节:

  • 30分钟学会ES6 (一)
    本章节主要学习 letconsttemplate string变量解构赋值函数SetMap
  • 30分钟学会ES6 (二)
    本章节主要学习 模块化

30分钟学会ES6 (二)

文章目录

  • 30分钟学会ES6 (二)
    • 类相关
      • class
      • 静态方法
      • 继承
    • 模块化
      • 严格模式
      • export
      • import
        • 整体加载
      • 跨模块常量
      • 加载模块

类相关

class

可以通过class新建一个类,类似于java。

以前我们是这么做的:

//定义类
var User = function(name,age){
    this.name = name;
    this.age = age;
};
//定义方法
User.prototype.say = function(word){
    console.log("my name is "+this.name+",my age is "+this.age+",hello "+word);
}

//实例化类
var user = new User("zhangsan",18);
user.say("world");

现在可以这么做:

//定义类
class User{
    //构造函数
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
	//定义方法
    say(word){
        console.log("my name is "+this.name+",my age is "+this.age+",hello "+word);
    }
}
//实例化类
let user = new User("zhangsan",18);
user.say("world");

注意:class的typeof类型其实还是function

console.log(typeof user);//object
console.log(typeof User);//function

静态方法

class User{
    static say(){
        console.log("hello world!");
    }
}

User.say();

继承

继承通过extends关键字来实现。子类中必须在构造函数中调用super()方法,才能使用this关键字,这是因为子类实例的构建基于父类实例,只有super方法才能调用父类实例。

class User{
    constructor(name){
        this.name = name;
    }

    print(){
        console.log(name);
    }
}

//错误
class Admin extends User{
    constructor(name,password){
        this.name = name; //报错:Must call super constructor in derived class before accessing 'this' or returning from derived constructor
        this.password = password;
    }
}

//正确
class Admin extends User{
    constructor(name,password){
        super(); //必须要有super方法
        this.name = name;
        this.password = password;
    }
    //override
    print(){
        console.log(`name=${this.name},password=${this.password}`);
    }
}

let admin = new Admin("zhangsan","123456");
admin.print();

模块化

严格模式

ES6的模块自动采用严格模式,不管有没有在js头部添加use strict

模块化具有以下限制:

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性,否则报错
  • 不能使用with语句
  • 不能对只读属性赋值,否则报错
  • 不能使用前缀 0 表示八进制数,否则报错
  • 不能删除不可删除的属性,否则报错
  • 不能删除变量delete prop,会报错,只能删除属性delete global[prop]
  • eval不会在它的外层作用域引入变量
  • evalarguments不能被重新赋值
  • arguments不会自动反映函数参数的变化
  • 不能使用arguments.callee
  • 不能使用arguments.caller
  • 禁止this指向全局对象
  • 不能使用fn.callerfn.arguments获取函数调用的堆栈
  • 增加了保留字(比如protectedstaticinterface

export

export用于在js文件中定义模块,可以定义默认值,函数、变量以及class等。

  • 定义默认值

    一个模块文件只能有一个默认值

    // 字符串默认值
    export default 'hello world'
    
    export default function hello(){
        console.log("hello world");
    }
    
  • 定义变量

    // 第一种方式:变量1
    export let a = "hello";
    export let b = "world";
    export var c = "nihao";
    // 第二种方式:变量2
    let a1 = "hello";
    let b1 = "world";
    let c1 = "nihao";
    export {a1,b1,c1};//{a1:"hello",b1:"world",c1:"nihao"}
    
  • 定义函数

    //函数
    export function add(x,y){
        return x+y
    }
    
    //可以在export时重新定义名字
    function multiply(x,y){
        return x*y;
    }
    export{
        multiply as mp
    }
    
  • 定义class

    //class
    export class User{
        constructor(name){
            this.name = name;
        }
    
        sayHello(){
            console.log(`hello ${this.name}`);
        }
    }
    

import

import用于引用js文件中的模块定义,例如模块文件名时module.js

语法是import {} from '模块 JS路径'.

import后面跟一对{},其中的变量名必须与模块名相同,同时也可以通过as重命名模块名。

from后面可以是模块文件的相对路径,也可以是绝对路径,.js可以省略。

import命令是编译期执行的,在运行期之前,所以可以先调用其中的模块,再引入模块。

注意:浏览器如果要import模块,需要使用

你可能感兴趣的:(前端技术)