一、基本使用
constructor构造方法,类似于构造函数,new的时候会调用,内部的this就是实例化的对象
class User {
//构造方法,类似于构造函数,new的时候会调用,内部的this就是实例化的对象
constructor(name, age, email) {
this.name = name;
this.age = age;
this.email = email;
// console.log(age,email)
}
// 实例方法
sayHi(sayName) {
return `${sayName},你好,我叫${this.name},我今年${this.age}岁了`
}
}
const Tom = new User('Tom', 100, '123@qq.com')//100, '123@qq.com'
console.log(Tom.sayHi('小明'))//小明,你好,我叫Tom,我今年100岁了
二、继承
class User {
constructor(name, age, email) {
this.name = name;
this.age = age;
this.email = email;
// console.log(age,email)
}
sayHi(sayName) {
return `${sayName},你好,我叫${this.name},我今年${this.age}岁了`
}
}
class AdminUser extends User {
constructor(nname, email, role) {
//子类构造函数使用this以前必须调用super
//this.role = role; ×错误写法,super前面不能有this操作
super(name, undefined, email); // 调用父类的构造函数,不继承age,但必须用undefined占个位置
this.role = role;
}
// 实例方法
Job(duty) {
return `你好,我叫${this.name},我担任的角色是${this.role},我每天的工作内容是${duty},${this.email}这是我的邮箱`
}
}
三、class私有,静态属性和方法
私有属性/方法:类中内部访问的属性和方法
静态属性/方法:类可以直接访问的属性和方法
class Info {
constructor(name) {
this.name = name
}
// 通过#作为前缀添加的属性会变为私有
// 私有属性
#password = '123456789'
// 私有方法
#say() {
// 私有属性可以在
return '私有的say方法'
}
test() {
// 在类的内部可以访问私有属性调用私有方法
return `私有方法:${this.#say()},私有属性:${this.#password}`
}
// 通过 static定义静态属性/方法
static staticMethod() {
return `这是一个静态方法,this是${this}`
}
static idCard = '321341198012011212'
}
const p = new Info('jack')
console.log(p['#password'])// 外部无法访问 点语法访问undefined
console.log(p.test())//私有方法:私有的say方法,私有属性:123456789
// 通过类访问静态属性/方法
console.log(Info.staticMethod()) //`这是一个静态方法,this是......
console.log(Info.idCard)//'321341198012011212'
四、getter 和 setter
getter用于获取属性的值
setter用于设置属性的值
class Person {
constructor(name) {
this._name = name;
}
get age() {
return 456;
}
set age(value) {
this._name = value;
}
}
const person = new Person('Alice');
console.log(person.age)//456
console.log(person._name)//Alice
person.age = 123
console.log(person.age)//456
console.log(person._name)//123
五、使用class类实现事件总线
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h2>自己实现事件总线</h2> -->
<button class="emit">注册事件</button>
<button class="on">监听事件</button>
<script>
class EventBus {
#handlers = {}
// 触发事件
$emit(event, ...args) {
this.#handlers[event] = args;
}
// 注册事件
$on(event, callback) {
const storedArgs = this.#handlers[event];
if (storedArgs) {
callback(...storedArgs);
}
}
}
// 简化 querySelector调用
function qs(selector) {
return document.querySelector(selector)
}
const eventbus = new EventBus()
// 注册事件
qs('.emit').addEventListener('click', () => {
eventbus.$emit('sentFn', 123, 456)
})
// 监听事件
qs('.on').addEventListener('click', () => {
eventbus.$on('sentFn', (num1, num2) => {
console.log(num1, num2)
})
})
</script>
</body>
</html>