ES6 类和模块

1.类

	Class是ES6中的语法糖,本质上还是function。(语法看起来更简洁、优雅、可读性高、可维护性高)
Java中的语法糖:
	List list = new ArrayList();
	list.add(new Object());
	...
	for(Object obj : list){
		System.out.println(obj);
	}
	
	list.forEach(obj -> System.out.println(obj) );
	//Java语言不管怎么变,本质上还是类、强类型

基础用法

类定义
类表达式可以为匿名或命名

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

类声明

class Example {
    constructor(a) {
        this.a = a;
    }
}

注意要点:不可重复声明。

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

会有以下报错
在这里插入图片描述
注意要点
类定义不会被提升,这意味着,必须在访问前对类进行定义,否则就会报错。

类中方法不需要 function 关键字。

方法间不能加分号。

new Example(); 
class Example {}

类的主体
属性

prototype

ES6 中,prototype 仍旧存在,虽然可以直接自类中定义方法,但是其实方法还是定义在 prototype 上的。 覆盖方法 / 初始化时添加方法

Example.prototype={
    //methods
}

添加方法

Object.assign(Example.prototype,{
    //methods
})

静态属性

静态属性:class 本身的属性,即直接定义在类内部的属性( Class.propname ),不需要实例化。 ES6 中规定,Class 内部只有静态方法,没有静态属性。

class Example {
// 新提案
    static a = 2;
}
// 目前可行写法
Example.b = 2;

公共属性

class Example{}
Example.prototype.a = 2;

实例属性

实例属性:定义在实例对象( this )上的属性。

class Example {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}

name 属性

返回跟在 class 后的类名(存在时)。

let Example1=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example1.name); // Exam
 
let Example2=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example2.name); // Example2

输出结果是
在这里插入图片描述

2.模块Module

	ES6的重大的语法升级,提高了封装性。
	一个 js文件就是一个模块,编译的时候就可以确定依赖关系,控制暴露的方法、变量等。

ES6严格模式

	1.对变量的影响
			变量必须先声明、再使用。提高代码的可读性、可维护性
	2.对类的影响
			向只读的属性赋值会报错
			对于不可扩展的对象添加属性会报错
	3.对函数的影响
			普通函数中,不允许使用this引用window对象
			函数的参数必须唯一
			eval()函数不会创建变量或函数

模块的export 与 import
export

//该模块定义了2个变量,一个函数、一个类
let myName = "Tom";
let myAge = 20;
let sayHello = function(){
	return "My name is" + myName + "! I'm '" + myAge + " years old. "
}
let myClass = class myClass {
	static a = "yeah!";
}
//导出,该模块暴露给外接使用的列表:
export{
	myName,
	myAge,
	sayHello,
	myClass
}

import

	<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
	<script type="module">
		//从另一个模块导入
		import { myName, myAge, sayHello, myClass } from "./js/module1.js";

		alert(sayHello())
	</script>

模块化:模块是一个文件

好处:

    1.减少命名冲突

    2.避免引入时的层层依赖

    3.可以提升执行效率

方法一:

1.如何导出(暴露)

            export let run =function(){

                console.log("run-->fun")

            }

            export let userName = "jinglijuan"
2.如何引入(依赖)

<script type="module">  //设置为module类型

                import {run,userName} from "./module.js" //内部名字要与暴露出来的名字一致
                
                run();

                console.log(userName);

</script>

方法二:暴露的数据过多时使用

 1. 导出时正常导出

            export let run =function(){

                console.log("run-->fun")

            }

            export let userName = "jinglijuan"
 2. 导入时

<script type = "module">

                import * as 别名 from './mo.js'

                console.log(别名.暴露的方法或者变量名)

                console.log(mo.run)

</script>

方法三:直接导出对象

 1. 导出:

            let run = function(){

                console.log("jinglijuan")

            }

            let userName = "jinglijuan"

            let age = 21

            let sex = "woman"



            export {

                run,

                userName,

                age,

                sex

            }
 2. 如何导入(接收):

            import {userName,age} from "./mo.js"

            console.log(userName,age)

方法四:导出的数据起个别名

导出时通过as给导出的内容起个别名,接收时需要以别名为依据

        1. 导出:

            let age = 21

            let sex = "woman"



            export {

                age as a,

                sex

            }

 2. 如何导入(接收):

            import {userName,a} from "./mo.js"

            console.log(userName,a)

方法五:引入时增加别名(从不同文件中的引入的变量名或者方法名可能是重名的,引入时使用会报错)

 1.引入

           import {userName as moUserName} from './mo4.js'

           import {userName} from './mo5.js'

           console.log(moUserName,userName)

方法六:默认导出(使用频率最高)

 只能有一个默认对象

        1.导出(暴露)

            export default {

                userName:'jinglijuan',

                age:20

            }

 2.引入(接收)

            import mo from "./mo.js"

            console.log(mo.userName)

方法七:混合导出

 1.导出(暴露)

            export default{

                userName:'jinglijuan',

                age:20

            }

            export let sex = '男'
 2.引入

            import mo,{sex} from './mo7.js'

            console(mo.userName,mo.age,sex)

模块的特点:

1.可以相互依赖

2.当你的模块被多次引入时,只执行一次
	在多处引入相同的js文件,那么这个js文件只会执行一次

猜你喜欢

转载自blog.csdn.net/yu2875592987/article/details/105788487
今日推荐