JavaScript —— 类、事件
类[*]与C++中的Class类似。但是不存在私有成员（全都是公开的）。
[*]this指向类的实例。
[*]类名一般使用驼峰命名法。
定义：
class 类名 {// 定义一个类
constructor() {// 构造函数（如果不写构造函数，会默认有一个无参构造函数）
}
}例如：
test.js中的内容为：
class Point {// 定义一个类叫Point
constructor(x, y) {// 构造函数（如果不写构造函数，会默认有一个无参构造函数）
<body>
</body>this.x = x;// 定义成员变量
<body>
</body>this.y = y;
}
init() {// 定义成员函数
<body>
</body>this.sum = this.x + this.y;// 成员变量可以在任意的成员函数中定义
}
toString() {// 定义成员函数
<body>
</body>//return '(' + this.x + ',' + this.y + ')';
<body>
</body>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>
</body>
ps：每一个class都可以对应前端的每一个组件，可以用class去维护每一个组件的各种行为等。
继承：
test.js中的内容为：
class Point {// 定义一个类叫Point constructor(x, y) {// 构造函数（如果不写构造函数，会默认有一个无参构造函数）<body>
</body>this.x = x;// 定义成员变量<body>
</body>this.y = y; } toString() {// 定义成员函数<body>
</body>//return '(' + this.x + ',' + this.y + ')';<body>
</body>return `(${this.x}, ${this.y})`; }}class ColorPoint extends Point {// extends:继承 constructor(x, y, color) {<body>
</body>super(x, y);// 这里的super是指基类（父类）的构造函数，先进行初始化<body>
</body>this.color = color; } toString() {<body>
</body>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>
</body>
ps：
[*]super这个关键字，既可以当作函数使用，也可以当作对象使用。
[*]作为函数调用时，代表父类的构造函数，且只能用在子类的构造函数之中。
[*]super作为对象时，指向父类的原型对象。
[*]在子类的构造函数中，只有调用super之后，才可以使用this关键字。
[*]成员重名时，子类的成员会覆盖父类的成员。类似于C++中的多态（同一个函数可以表现出多种不同的状态）。
静态方法：
[*]在成员函数前添加static关键字即可。
[*]静态方法不会被类的实例继承，所以只能通过类来调用，通过“类名 . 函数名”来访问。
[*]静态函数是所有实例公共的函数（相当于全局变量）。
例如：
test.js中的内容为：
class Point {// 定义一个类叫Point constructor(x, y) {// 构造函数（如果不写构造函数，会默认有一个无参构造函数）<body>
</body>this.x = x;// 定义成员变量<body>
</body>this.y = y; } toString() {// 定义成员函数<body>
</body>//return '(' + this.x + ',' + this.y + ')';<body>
</body>return `(${this.x}, ${this.y})`; } static print_class_name() {<body>
</body>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>
</body>
静态变量：
[*]在ES6中，只能通过class.propname定义和访问，静态成员必须通过类本身来访问。
[*]静态变量是所有实例公共的变量（相当于全局变量）。
例如：
test.js中的内容为：
class Point {// 定义一个类叫Point constructor(x, y) {// 构造函数（如果不写构造函数，会默认有一个无参构造函数）<body>
</body>this.x = x;// 定义成员变量<body>
</body>this.y = y;<body>
</body>Point.cnt++; } toString() {// 定义成员函数<body>
</body>//return '(' + this.x + ',' + this.y + ')';<body>
</body>return `(${this.x}, ${this.y})`; } static print_class_name() {<body>
</body>console.log("Point"); }}Point.cnt = 0;// 定义Point的静态成员变量cntlet main = function() { // 初始化五个点 for (let i = 0; i < 5; i++) {<body>
</body>new Point(3, 4); } console.log(Point.cnt);// 返回5}export { main}test.html中的内容为：
<body>
</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) {// 鼠标左键点击事件<body>
</body>console.log(event.type);// 返回事件的类型，每点击一次输出一次 }); input.addEventListener('input', function(event) {// 键盘输入事件<body>
</body>console.log(event.type);// 返回事件的类型，连续触发 }); input.addEventListener('focus', function(event) {// 聚焦事件<body>
</body>console.log(event.type);// 返回事件的类型 }); window.addEventListener('resize', function(e) {<body>
</body>console.log(e.type); }) }export { main}test.html中的内容为：
<body>
</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的区别：
库函数顾名思义就是把函数放到库里，是把一些常用的函数编完放到一个文件里，供别人用。库函数调用通常用于应用程序中对一般文件的访问。主要由两方面提供：一是操作系统提供的；另一类是由第三方提供的。
API（Application Programming Interface）是应用程序编程接口。windows不允许应用程序直接访问硬件，但是会提供API函数让用户间接地访问，这样就会调用系统级API。API分为两种：一是用户级API，替用户写好函数，方便调用；二是系统级API，如果应用程序想要和硬件交互，必须调用此类函数。程序员调用的是API（api函数），然后通过与系统调用共同完成函数的功能。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]