类
-
与C++中的
Class类似。但是不存在私有成员（全都是公开的）。 -
this指向类的实例。 -
类名一般使用驼峰命名法。
定义：
class 类名 { // 定义一个类constructor() { // 构造函数（如果不写构造函数，会默认有一个无参构造函数）}
}
例如：
test.js中的内容为：
class Point { // 定义一个类叫Pointconstructor(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，4console.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 { // 定义一个类叫Pointconstructor(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 { // 定义一个类叫Pointconstructor(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(); // 通过类名访问静态函数，返回Pointp.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 { // 定义一个类叫Pointconstructor(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的静态成员变量cntlet 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的区别：
