Web应用课 3.3 JavaScript——对象、数组、函数、类、事件

对象

英文名称：Object。
类似于C++中的map，由key:value对构成。
value可以是变量、数组、对象、函数等。
函数定义中的this用来引用该函数的“拥有者”。
eg.

let person = {
    name:'zjq',
    age: 18,
    money: 100,
    friends : ['yxc','Bob','Lucy'],//对象成员可以是数组
    clothes: { //对象成员也可以是对象
        color: 'red',
        price: 20,
    },
    add_money:function(x){ //对象行为函数
        this.money += x;
    },
};

function main(){
    console.log(person);
    console.log(person["money"]);//访问person的成员money,必须有引号
    person["add_money"](100);//调用person成员函数，参数为100,必须有引号
    console.log(person["money"]);//访问person的成员money,必须有引号
    
    let key = "name";
    console.log(person[key]);//通过键值对方式访问person成员money

    delete person.name;//删除对象的成员name
}

export{
    main
};

数组

数组是一种特殊的对象。
类似于C++中的数组，但是数组中的元素类型可以不同。
数组中的元素可以是变量、数组、对象、函数。

let a = [1, 2, "a", "yxc"];

let b = [
    1,  // 变量
    "yxc",  // 变量
    ['a', 'b', 3],  // 数组
    function () {  // 函数
        console.log("Hello World");
    },
    { name: "yxc", age: 18 }  // 对象
];

数组元素的访问

通过下标。

function main(){
    console.log(b[3]);
    b[3] = function(){ //重新赋值元素
        console.log("hhh");
    }
    b[3]();//执行b[3]元素函数
    console.log(b[3]);
    console.log(b[-1]);
    console.log(b[10]);//js中没有数组越界的概念，返回undefined
}

数组的常用属性和函数

• 属性length：返回数组长度。注意length是属性，不是函数，因此调用的时候不要加()
• 函数push()：向数组末尾添加元素
• 函数pop()：删除数组末尾的元素
• 函数splice(a, b)：删除从a开始的b个元素
• 函数sort()：将整个数组从小到大排序
• 自定义比较函数：array.sort(cmp)，函数cmp输入两个需要比较的元素，返回一个实数，负数表示第一个参数小于第二个参数，0表示相等，正数表示大于。

function main(){
    console.log(a);
    a.sort(function(a,b){
        return a - b;//若a>b,则a - b > 0,表明排序时遵循正序(升序)
    });
    console.log(a);
    a.sort(function(a,b){
        return b - a;//若a>b,则b - a < 0,表明排序时遵循逆序(降序)
    });
    console.log(a);
}

函数

函数是用对象来实现的。
函数也与C++中的函数类似。

定义方式

function add(a, b) {
    return a + b;
}

let add = function (a, b) {
    return a + b;
}

let add = (a, b) => {
    return a + b;
}

返回值

如果未定义返回值，则返回undefined。

let f = (a,b) => {
    return () =>{
        console.log("Hello");
    }
};
function main(){
    console.log(f(3,4)());//执行打印"Hello"并输出undefined
    
}

类

与C++中的Class类似。但是不存在私有成员。
this指向类的实例。
每个前端的组件可以定义为class

定义

class Point{
    
    constructor(x,y){ //构造函数
        this.x = x;//成员变量
        this.y = y;
    }

    init(){
        this.sum = this.x + this.y;// 成员变量可以在任意的成员函数中定义
    }

    toString(){
        return `(${this.x}, ${this.y})`;
    }
}

继承

class ColorPoint extends Point{ //继承自Point
    constructor(x,y,color){
        super(x,y);//在子类的构造函数中，只有调用super之后，才可以使用this关键字。
        this.color = color;
    }

    toString(){
        return `${this.color} ${super.toString()}`;
    }
}

注意事项

• super这个关键字，既可以当作函数使用，也可以当作对象使用。
• • 作为函数调用时，代表父类的构造函数，且只能用在子类的构造函数之中。
• • super作为对象时，指向父类的原型对象。
• 在子类的构造函数中，只有调用super之后，才可以使用this关键字。
• 成员重名时，子类的成员会覆盖父类的成员。类似于C++中的多态。

静态方法

在成员函数前添加static关键字即可。静态方法不会被类的实例继承，只能通过类来调用。
但是静态方法可以被子类继承

class ColorPoint extends Point{ //继承自Point
    static print_class_name(){
        console.log("ColorPoint");
    }
}
function main(){
	ColorPoint.print_class_name();
}

静态成员变量

在ES6中，只能通过class.propname定义和访问。
静态成员变量可以被子类继承

class Point{
    
    constructor(x,y){ //构造函数
        this.x = x;//成员变量
        this.y = y;
        Point.cnt++;//访问静态变量
    }

    init(){
        this.sum = this.x + this.y;// 成员变量可以在任意的成员函数中定义
    }

    toString(){
        return `(${this.x}, ${this.y})`;
    }
}

Point.cnt = 0;//定义静态变量

function main(){
    for(let k = 0;k < 5;k++){
        new Point(1,2);
        console.log(Point.cnt);
    }

    for(let k = 0;k < 5;k++){
        new ColorPoint(1,2);
        console.log(Point.cnt);
    }
}

事件：让js与页面产生联系

JavaScript的代码一般通过事件触发。
可以通过addEventListener函数为元素绑定事件的触发函数。

常见的触发函数

鼠标

• click：鼠标左键点击
• dblclick：鼠标左键双击
• contextmenu：鼠标右键点击
• mousedown：鼠标按下，包括左键、滚轮、右键
• event.button：0表示左键，1表示中键，2表示右键
• mouseup：鼠标弹起，包括左键、滚轮、右键
• event.button：0表示左键，1表示中键，2表示右键

示例

let div = document.querySelector("div");

function main(){
    div.addEventListener("contextmenu",function(event){
        console.log(event.type,event.button);
    });
    div.addEventListener("mousedown",function(event){
        console.log(event.type,event.button);
    });
    div.addEventListener("mouseup",function(){
        console.log(event.type,event.button);
    });
}

export{
    main
};

键盘

• keydown：某个键是否被按住，事件会连续触发
  event.code：返回按的是哪个键
  event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键。
• keyup：某个按键是否被释放
  event常用属性同上
• keypress：紧跟在keydown事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。
  event常用属性同上
  keydown、keyup、keypress的关系类似于鼠标的mousedown、mouseup、click
  补充：为div添加可聚焦属性，以支持键盘事件监听

<!-- 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。 -->
<div tabindex="0">1</div>

textarea.addEventListener("keydown",event =>{
        console.log(event.type,event.code);
    });

    textarea.addEventListener("keyup",event =>{
        console.log(event.type,event.code);
    });

    textarea.addEventListener("keypress",event =>{
        console.log(event.type,event.code);
    });

表单

• focus：聚焦某个元素
• blur：取消聚焦某个元素

    textarea.addEventListener("focus",event => {
        console.log(event.type);
    });
    textarea.addEventListener("blur",event => {
        console.log(event.type);
    });

• change：某个元素的内容发生了改变

窗口

需要作用到window元素上。

• resize：当窗口大小放生变化
• scroll：滚动指定的元素
• load：当页面所有元素被加载完成

    textarea.addEventListener("focus",event => {
        console.log(event.type);
    });
    textarea.addEventListener("blur",event => {
        console.log(event.type);
    });
    window.addEventListener("resize",event =>{
        console.log(event.type);
    });
    window.addEventListener("scroll",event =>{
        console.log(event.type);
    });
    window.addEventListener("load",event =>{
        console.log(event.type);
    });