web学习——JavaScript（2）

1.6对象

英文名称：Object。
类似于C++中的map，由key:value对构成。

value可以是变量、数组、对象、函数等。
函数定义中的this用来引用该函数的“拥有者”。
对象属性与函数的调用方式：

person.name、person.add_money() person["name"]、person["add_money"]()

例如：
index3.js

let person = {//key：value
    name: "头发没了还会再长",
    age: 18,
    money: 0,
    add_money: function (x) {
        this.money += x;//this就是拥有add_money这个函数的对象
    }
};

function main() {
    console.log("person.name:" + person.name, "person.age:" + person.age, "person.money:" + person.money);
    console.log("person[\"name\"]:" + person["name"]);
    person.add_money(1);
    console.log("person.money:" + person.money);
    person["add_money"](2);
    console.log("person[\"money\"]:" + person["money"]);
}

export {
    main
}

.html

 <script type="module">
        import { main } from "/static/js/index3.js";
        main();
    script>

控制台结果（F12）

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表示相等，正数表示大于。

例如：

let a = [];

let b = [
    1,
    "头发没了还会再长",
    ['a', 'b', 'c'],
    function () {
        console.log("Hello world");
        return 0;
    },
    { name: "头发没了还会再长", age: 18 }
];

let main = function () {
    console.log(typeof a);
    console.log(b[0]);
    console.log(b[1]);
    console.log(b[2][0]);
    console.log(b[3]());
    console.log(b[4].name);
    console.log(b[4]["age"]);
}

export {
    main
}

控制台输出：

let a = [1, 3, 5, 2, 4];


let main = function () {
    console.log(a.length);
    a.push(6);
    console.log(a);
    a.pop();
    console.log(a);
    a.splice(6, 6);
    console.log(a);
    a.sort();
    console.log(a);
    a.sort(function (a, b) {
        return b - a;
    });
    console.log(a);
}

export {
    main
}

1.8函数

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

定义方式

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

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

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

返回值

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

例如：

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

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

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

let p = function(){
    console.log("hellop");
}

let add = ()=>{
    return ()=>{
        console.log("helloadd");
    };
};

let main = function () {
    let c= add1(1,2);
    console.log(c);
    c=add2(1,4);
    console.log(c);
    c=add3(1,3);
    console.log(c);
    console.log(p());//因为没有返回值 所以会输出undefined
    console.log(add()());//add()返回的是一个函数 再用()调用函数
}

export {
    main
}

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);

静态变量和全局变量很像，但是静态变量是每个类的，可以避免出现重名。因为全局变量一个函数只能定义一个，但静态变量每个类都可以有一个，变量可以重名。