面向对象ES6-封装类

1、ES6直接获取类的静态属性和修改静态属性的值

class Person{
	static num = 10;
	constructor(){
		this.myname = 'joy';
	}
}
Person.staticNum = 20;
console.log(Person.num) // 20

2、静态属性来统计类的实例化次数，防止污染全局

class Person{
	static num = 0;
	constructor(myname){
		this.myname = myname;
		Person.num ++
	}
}
let joy = new Person()
let tom = new Person()
console.log(Person.num) // 2

tips:静态属性是类上面的方法，直接调用
3、ES6私有属性

class Person{
	#weight = '78kg' // #key 表示私有属性
	getWeight(){
		return this.#weight
	}
}
let joy = new Person()
console.log(joy.getWeight())

5、ES6继承

class Dady{
	constructor(hobby) { 
		this.lastName = 'hu'
		this.hobby = hobby
	}
	fn(){
		console.log('父类方法')
	}
}
class Son extends Dady{
	constructor(hobby){
		super(hobby) // 继承父级的方法并且把参数传给父级，执行父级的constructor，并且改变父级函数的指向为自己
		this.name = 'joy'
		// this 一定要调用在super后面
	}
	fullName(){
		return this.lastName + this.name
	}
	fn(){
		super.fn()
		console.log('子类方法')
	}
}
let joy = new Son('swim')
console.log(joy.hobby) // swim
console.log(joy.name) // joy
console.log(joy.lastName) // hu
console.log(joy.fullName()) // hujoy
let tom = new Dady('football') 
console.log(tom.hobby)// football
joy.fn() // '父类方法'  '子类方法'

constructor extends super都是关键字

ESM模块
ES6.js

export {c}
// 输出的得是对象，不能 export c
// export 输出可以是多个
export let b = 14
// export default只能是一个
export default{
	b,
	d
}

html

import'./ES6.js' // import 文件名，直接执行该文件
import * as obj from './ES6.js' // 把ES6.js文件里的所有export内容放到名字会obj的对象里
console.log(obj.b) // 14

import obj,{c} from './ES6.js' 
console.log(obj) // {d: 10}不加{}表示模块里export default的里面的对象
console.log(c) // 20, 加了{}表示模块里export里面该对象的值

import {c as f} from './ES6.js'
console.log(f) // 20 c重命名为f

模块按需导入

document.onclick = function (){
	import ('./ES6.js').then(res => {
 		console.log(res) //res 表示模块里所有export组成的对象
	})
}

document.onclick = async function (){
	let res = await import('./ES6.js')
	console.log(res)
}

以上两个方法都可以异步操作函数，async await更加简单