对象扩展

对象扩展

对象字面量增强

• 属性值用变量表示，当属性名和属性值的变量名相同时相同时，可以只写一个
• 方法中的函数可以简化书写
• 可以用表达式当做属性名

const bar = "bar";
const obj = {
    name: "zs",
    bar: bar,
    
    sayHi: function () {
        console.log("hi");
    }
};
// 也可以简化书写成
const bar = "bar";
const obj = {
    name: "zs",
    bar,
    // []内部可以放表达式，计算出的结果为属性名
    [1+2]: 18,
    // 函数可以省略书写
    sayHi() {
        console.log("hi");
        // 这里的this指代方法调用者
        console.log(this.name);
    }
};

对象方法扩展

Object.assign(target,source,source1,…)

将source中的属性复制到target中，如果target中有同名属性，则会被覆盖。然后再将source1中属性复制到新target中。按照参数顺序依次复制下去。

const source1 = {
    a: 1,
    b: 2
}
const target = {
    a: 3,
    c: 4
}
const result = Object.assign(target, source1);
// 得到的result对象就是复制了source1中属性的target对象
console.log(result);
console.log(target);

• 应用：在修改对象时，如果不想改变原对象，可以先将原对象复制一份给新对象，在新对象上更改，就可以了。

function Block(options) {
    // 在构造函数中，接收传入对象的参数使用这种方法
    this.width = options.width;
    this.height = options.height;
    this.x = options.x;
    this.y = options.y;
    // 当有了assign方法后可以简化书写
    // 将参数传进来的属性复制给实例对象，就可以在实例对象中调用了
    Object.assign(this, options);
}
const newBlock = new Block({
    width: 100,
    height: 200,
    x: 50,
    y: 50
});
//生成的实例对象包含参数对象的所有属性
console.log(newBlock);
console.log(newBlock.x);

Object.is

更符合认知的去判断数据是否相等，但实际工作中还是使用=或更普遍

// 返回true
console.log(+0 === -0);
// 返回false
console.log(NaN === NaN);
// 返回false
console.log(Object.is(+0, -0));
// 返回true
console.log(Object.is(NaN, NaN));

对象的类 class 和静态成员

• 之前用构造函数来创建一类对象，在构造函数的原型对象上来添加方法
• ES2015 提供了 class 用来创建对象的类
• static 方法可以创建类自己的静态成员

class Person {
    // 将属性设置在constructor 中
    constructor(name, age) {
        // this指向实例对象
        this.name = name;
        this.age = age
    }
    // 方法直接写在类中，就是创建在了原型对象内，可以用实例对象打点调用
    // 可以使用ES6的新写法， 方法中的函数的省略写法
    sayHi() {
        // 插入字符串一定要在反引号 ` ` 内才生效
        console.log(`my name is ${this.name}`);
    }
    // static创建静态成员，能通过类名打点调用
    static creat(name, age) {
        //静态成员里的this指向的是 自己的类型class Person
        // 打印出的this是 class Person 对象
        console.log(this);
        return new Person(name, age)
    }
}
// 创建实例的方法和之前的构造函数相同
const p1 = new Person("zs", 27);
console.log(p1);
//调用方法和构造函数创建的对象调用方法相同
p1.sayHi();

// 静态成员调用（因为函数也是对象，所以可以打点调用）
Person.creat("ls", 55);
console.log(Person.creat("ls", 55));

类的继承 extends

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }
    sayHi() {
        console.log(`my name is ${this.name}`);
    }
}
// 继承父类用extends关键字
class Student extends Person {
    constructor(name, age, number) {
        // super对象指向的是父类
        //super()调用，相当于调用了父类中的constructor，用这种方法继承父类构造函数的属性
        super(name, age);
        this.number = number;
    }
    hello() {
        // super打点继承方法
        super.sayHi();
        console.log(`number is ${this.number}`);
    }
}
const s1 = new Student("tom", 22, 888888);
console.log(s1);
s1.hello();