类
-
与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的区别：
库函数顾名思义就是把函数放到库里，是把一些常用的函数编完放到一个文件里，供别人用。库函数调用通常用于应用程序中对一般文件的访问。主要由两方面提供：一是操作系统提供的；另一类是由第三方提供的。
API（Application Programming Interface）是应用程序编程接口。windows不允许应用程序直接访问硬件，但是会提供API函数让用户间接地访问，这样就会调用系统级API。API分为两种：一是用户级API，替用户写好函数，方便调用；二是系统级API，如果应用程序想要和硬件交互，必须调用此类函数。程序员调用的是API（api函数），然后通过与系统调用共同完成函数的功能。
来源链接：https://www.cnblogs.com/kitty-38/p/18680607
© 版权声明
本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。
THE END
暂无评论内容