1.6 对象
英文名称:Object 一切皆对象
由key:value对构成
- value可以是变量、数组、对象、函数等
- 函数定义中的this用来引用该函数的“拥有者”
let person = {
name: "yxc",
age: 18,
money: 0,
add_money: function (x) {
this.money += x;
}
}
对象属性与函数的调用方式:
- person.name、person.add_money()
- person[“name”]、person"add_money"
1.7 数组
数组是一种特殊的对象。
类似于C++中的数组,但是数组中的元素类型可以不同
- 数组中的元素可以是变量、数组、对象、函数
let a = [1, 2, "a", "yxc"];
let b = [
1, // 变量
"yxc", // 变量
['a', 'b', 3], // 数组
function () { // 函数
console.log("Hello World");
},
{ name: "yxc", age: 18 } // 对象
];
访问数组中的元素
通过下标
a[0] = 1; // 访问数组a[]的第0个元素
console.log(a[0]);
数组的常用属性和函数
- 属性length:返回数组长度。注意length是属性,不是函数,因此调用的时候不要加()
- 函数push():向数组末尾添加元素
- 函数pop():删除数组末尾的元素
- 函数splice(a, b):删除从a开始的b个元素
- 函数sort():将整个数组从小到大排序
- 自定义比较函数:array.sort(cmp),函数cmp输入两个需要比较的元素,返回一个实数,负数表示第一个参数小于第二个参数,0表示相等,正数表示大于。
1.8 函数
- 定义方式
function add(a, b) {
return a + b;
}
let add = function (a, b) {
return a + b;
}
let add = (a, b) => {
return a + b;
}
let add = a=> {//一个变量可以不加括号
return a + b;
}
- 返回值
如果未定义返回值,则返回undefined。
1.9 类
与C++中的Class类似。但是不存在私有成员。
- this指向类的实例
定义
class Point {
constructor(x, y) { // 构造函数
this.x = x; // 成员变量
this.y = y;
this.init();
}
init() {
this.sum = this.x + this.y; // 成员变量可以在任意的成员函数中定义
}
toString() { // 成员函数
return '(' + this.x + ', ' + this.y + ')';
}
}
let p = new Point(3, 4);
console.log(p.toString());
继承
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 这里的super表示父类的构造函数
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
- super这个关键字,既可以当作函数使用,也可以当作对象使用。
- 作为函数调用时,代表父类的构造函数,且只能用在子类的构造函数之中。
- super作为对象时,指向父类的原型对象。
- 在子类的构造函数中,只有调用super之后,才可以使用this关键字。
- 成员重名时,子类的成员会覆盖父类的成员。类似于C++中的多态。
静态方法
在成员函数前添加static关键字即可。静态方法不会被类的实例继承,只能通过类来调用。例如:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
static print_class_name() {
console.log("Point");
}
}
let p = new Point(1, 2);
Point.print_class_name();
p.print_class_name(); // 会报错
静态变量
在ES6中,只能通过class.propname定义和访问。例如:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
Point.cnt++;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
Point.cnt = 0;
let p = new Point(1, 2);
let q = new Point(3, 4);
console.log(Point.cnt);
1.10 事件
JavaScript的代码一般通过事件触发。
可以通过addEventListener函数为元素绑定事件的触发函数。
常见的触发函数有:
鼠标
- click:鼠标左键点击
- dblclick:鼠标左键双击
- contextmenu:鼠标右键点击
- mousedown:鼠标按下,包括左键、滚轮、右键
- event.button:0表示左键,1表示中键,2表示右键
- mouseup:鼠标弹起,包括左键、滚轮、右键
- event.button:0表示左键,1表示中键,2表示右键
键盘
- keydown:某个键是否被按住,事件会连续触发
- event.code:返回按的是哪个键
- event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键。
- keyup:某个按键是否被释放
- event常用属性同上
- keypress:紧跟在keydown事件后触发,只有按下字符键时触发。适用于判定用户输入的字符。
- event常用属性同上
keydown、keyup、keypress的关系类似于鼠标的mousedown、mouseup、click
- event常用属性同上
表单
- focus:聚焦某个元素
- blur:取消聚焦某个元素
- change:某个元素的内容发生了改变
窗口
需要作用到window元素上。
- resize:当窗口大小放生变化
- scroll:滚动指定的元素
- load:当元素被加载完成