JS — 类、事件
类
与C++中的
Class类似。但是不存在私有成员（全都是公开的）。this指向类的实例。类名一般使用驼峰命名法。
定义：
class 类名 { // 定义一个类
constructor() { // 构造函数（如果不写构造函数，会默认有一个无参构造函数）
}
}
例如：
test.js中的内容为：
class Point { // 定义一个类叫Point
constructor(x, y) { // 构造函数（如果不写构造函数，会默认有一个无参构造函数）
this.x = x; // 定义成员变量
this.y = y;
}
init() { // 定义成员函数
this.sum = this.x + this.y; // 成员变量可以在任意的成员函数中定义
}
toString() { // 定义成员函数
//return '(' + this.x + ',' + this.y + ')';
return `(${this.x}, ${this.y})`;
}
}
let main = function() {
let p = new Point(3, 4); // 实例
console.log(p.x, p.y); // 返回3，4
console.log(p.toString()); //返回(3, 4)
}
export {
main
}
test.html中的内容为：
<body>
<script type="module">
import {main} from "/test/test.js";
main();
</script>
</body>
ps：每一个class都可以对应前端的每一个组件，可以用class去维护每一个组件的各种行为等。
继承：
test.js中的内容为：
class Point { // 定义一个类叫Point
constructor(x, y) { // 构造函数（如果不写构造函数，会默认有一个无参构造函数）
this.x = x; // 定义成员变量
this.y = y;
}
toString() { // 定义成员函数
//return '(' + this.x + ',' + this.y + ')';
return `(${this.x}, ${this.y})`;
}
}
class ColorPoint extends Point { // extends:继承
constructor(x, y, color) {
super(x, y); // 这里的super是指基类（父类）的构造函数，先进行初始化
this.color = color;
}
toString() {
return `${this.color} ${super.toString()}`;
}
}
let main = function() {
let p = new ColorPoint(3, 4, 'pink'); // 实例
console.log(p.toString()); // 返回pink (3, 4)
}
export {
main
}
test.html中的内容为：
<body>
<script type="module">
import {main} from "/test/test.js";
main();
</script>
</body>
ps：
super这个关键字，既可以当作函数使用，也可以当作对象使用。作为函数调用时，代表父类的构造函数，且只能用在子类的构造函数之中。
super作为对象时，指向父类的原型对象。在子类的构造函数中，只有调用
super之后，才可以使用this关键字。成员重名时，子类的成员会覆盖父类的成员。类似于C++中的多态（同一个函数可以表现出多种不同的状态）。
静态方法：
在成员函数前添加
static关键字即可。静态方法不会被类的实例继承，所以只能通过类来调用，通过“类名 . 函数名”来访问。
静态函数是所有实例公共的函数（相当于全局变量）。
例如：
test.js中的内容为：
class Point { // 定义一个类叫Point
constructor(x, y) { // 构造函数（如果不写构造函数，会默认有一个无参构造函数）
this.x = x; // 定义成员变量
this.y = y;
}
toString() { // 定义成员函数
//return '(' + this.x + ',' + this.y + ')';
return `(${this.x}, ${this.y})`;
}
static print_class_name() {
console.log("Point");
}
}
let main = function() {
let p = new Point(3, 4); // 初始化实例（非静态的成员变量和成员函数）
Point.print_class_name(); // 通过类名访问静态函数，返回Point
p.print_class_name(); // 会报错
}
export {
main
}
test.html中的内容为：
<body>
<script type="module">
import {main} from "/test/test.js";
main();
</script>
</body>
静态变量：
在ES6中，只能通过
class.propname定义和访问，静态成员必须通过类本身来访问。静态变量是所有实例公共的变量（相当于全局变量）。
例如：
test.js中的内容为：
class Point { // 定义一个类叫Point
constructor(x, y) { // 构造函数（如果不写构造函数，会默认有一个无参构造函数）
this.x = x; // 定义成员变量
this.y = y;
Point.cnt++;
}
toString() { // 定义成员函数
//return '(' + this.x + ',' + this.y + ')';
return `(${this.x}, ${this.y})`;
}
static print_class_name() {
console.log("Point");
}
}
Point.cnt = 0; // 定义Point的静态成员变量cnt
let main = function() {
// 初始化五个点
for (let i = 0; i < 5; i++) {
new Point(3, 4);
}
console.log(Point.cnt); // 返回5
}
export {
main
}
test.html中的内容为：
<body>
<script type="module">
import {main} from "/test/test.js";
main();
</script>
</body>
事件
JavaScript的代码一般通过 事件 触发。
可以通过
addEventListener函数（常用API）为元素绑定事件的触发函数。
例如：
test.js中的内容为：
let div = document.querySelector('div'); // 获取文档中id="div" 的元素。querySelector() 方法返回文档中匹配指定CSS选择器的一个元素。
let input = document.querySelector('input');
let main = function() {
div.addEventListener('click', function(event) { // 鼠标左键点击事件
console.log(event.type); // 返回事件的类型，每点击一次输出一次
});
input.addEventListener('input', function(event) { // 键盘输入事件
console.log(event.type); // 返回事件的类型，连续触发
});
input.addEventListener('focus', function(event) { // 聚焦事件
console.log(event.type); // 返回事件的类型
});
window.addEventListener('resize', function(e) {
console.log(e.type);
})
}
export {
main
}
test.html中的内容为：
<body>
<div></div>
<input type="text">
<script type="module">
import {main} from "/test/test.js";
main();
</script>
</body>
test.css中的内容为：
div {
width: 300px;
height: 300px;
background-color: pink;
}
常见的触发函数有：
鼠标
click：鼠标左键点击
dblclick：鼠标左键双击
contextmenu：鼠标右键点击
mouseup：鼠标弹起，包括左键、滚轮、右键
mousedown：鼠标按下，包括左键、滚轮、右键
event.button：0表示左键，1表示中键，2表示右键
键盘
keyup：某个按键是否被释放
keydown：某个键是否被按住，事件会连续触发
keypress：紧跟在keydown事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。
keydown、keyup、keypress的关系类似于鼠标的mousedown、mouseup、click
event.code：返回按的是哪个键
event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键。
event常用属性同上
表单
focus：聚焦某个元素
blur：取消聚焦某个元素
change：某个元素的内容发生了改变
窗口
需要作用到window元素上。
resize：当窗口大小发生变化
scroll：滚动指定的元素
load：当元素被加载完成
库函数和API的区别：