内容介绍
看了蛋老师的class视频，跟着学习了一下ES6的class（类）。跟着写了一个叫废话生成器的东西，这个废话生成器跟我预想的也不是一样，但只是为了学习姑且就叫它废话生成器吧。此文算不上技术文章，充其量算是个学习记录。如过有什么错误请各位大佬及时指导。
代码展示
此部分是完整的代码，复制粘贴可运行。
<!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>废话生成器</title>
<style>
.crap_main {
width: 400px;
height: 500px;
margin: 0 auto;
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: center;
}
.crap_main>.carp_generate {
width: 100%;
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
}
button {
border-radius: 15px;
outline: none;
border: none;
background: #409eff;
color: #ffffff;
padding: 6px 17px;
}
input {
width: 180px;
border-radius: 15px;
border: 1px solid #ccc;
height: 20px;
padding: 4px 15px;
outline: none;
}
.crap_main p {
width: 100%;
height: 300px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="crap_main">
<div class="carp_generate">
<input type="text">
<button class="first">一级废话</button>
<button class="second">二级废话</button>
</div>
<p id="content"></p>
</div>
<script>
const first = document.querySelector('.first');
const second = document.querySelector('.second');
const content = document.querySelector('p');
const input = document.querySelector('input')
class BullShit {
/**
* 私有属性：子类无法继承父类的私有属性，或者说，私有属性只能定义在它的class里面使用
* */
#call = '老铁！'
/**
* 创建一个静态方法
*
* 类相当于实例的原型，所有在类中定义的方法都会被实例继承，如果在一个方法前加上static关键字，
* 就表示该方法不会被实例继承，而是直接通过类来调用，这就成为“静态方法”。
*
* 除了私有属性，父类的所有属性和方法都会被子类继承，其中包括静态方法
* */
static welcome_tips() {
return '温馨提示：您这是在说废话'
}
static welcome() {
/**
* 在一个静态方法里调用另一个静态方法是可以调用this的
* 这里的this并不是绑定实例的，这里的this是绑定类本身的。
* */
content.innerHTML = this.welcome_tips()
}
/**
* 如果父类定义了私有属性的读写方法，子类就可以通过这些方法，读写私有属性
* */
getCall() {
return this.#call
}
/**
* constructor方法是类默认的方法，通过new命令生成实例时自动调用该方法。
* 一个类必须有constructor()方法，如果没有显示定义，一个空的constructor()会被默认添加。
* class BullShit(){} 等同于 class BullShit(custructor())
* */
constructor(text, color) {
this.text = text;
this.color = color;
}
show() {
content.innerHTML = `${this.#call}${this.text}${input.value}`
content.style.color = this.color
}
// 再加一些额外的废话，让废话更完善
/**
* 在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
* */
set extra(value) {
this.value = value;
content.innerHTML += this.value
}
get extra() {
return `这些是废话：${this.text} ${this.value}`
}
}
/**
* class可以用extends关键字实现继承，BullShit是父类，son_of_BullShit是子类，子类通过extends继承父类所有的属性和方法
* */
class son_of_BullShit extends BullShit {
constructor(text, color, fontSize) {
/**
* super在这里表示父类的构造函数，用来新建一个父类的构造函数。
*
* ES6规定，子类必须在父类的constructor方法中调用super()，否则会报错。这是因为子类自己的this对象，
* 必须通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法，
* 如果不调用super()方法，子类就得不到自己的this对象。
*
* super()只能用于子类的构造函数之中，用在其他地方就会报错
*
* */
super(text, color)
this.fontSize = fontSize
}
show() {
content.innerHTML = `${this.getCall()}${this.text}${content.innerHTML}`
content.style.color = this.color
content.style.fontSize = this.fontSize
}
}
// 给一级废话按钮添加点击事件
first.addEventListener('click', () => {
/**
* 使用时也是直接对类使用new命令，跟构造函数用法完全一致
* bullshit是BullShit的实例，
* */
const bullshit = new BullShit('我知道', "#00a1d6")
bullshit.show()
bullshit.extra = '儿'
console.log(bullshit.extra)
});
// 给二级废话按钮添加点击事件
second.addEventListener('click', () => {
const son_of_bullshit = new son_of_BullShit('我知道', "#00a1d6", '30px')
son_of_bullshit.show()
});
// 给p标签添加点击事件
content.addEventListener('click', () => {
// 使用类调用静态方法
BullShit.welcome()
})
</script>
</body>
</html>
