JavaScript高级程序设计（红色宝典）第八章对象、类与面向对象编程读记

2023-02-25 10:31:10

JavaScript高级程序设计（红色宝典）第八章对象、类与面向对象编程读记

引入：可以把ECMAScript的对象想象成一张散列表，其中的内容就是一组名/值对，值可以是数据或者函数。

第一节：理解对象

现在我们创建一个对象

let person = {
    name: "Tom",
    age: 29,
    job:"engineer",
    sayName() {
        console.log(this.name);
    }
}

第二节：数据的属性

1.[[Configurable]]:表示属性是否可以通过delete删除重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。

2.[[Enumberable]]:表示属性是否可以通过for-in循环返回

3.[[Writable]]:表示属性的值是否可以被修改

4.[[value]]:包含属性的实际值

例子：

let person = {}
Object.defineProperty(person,"name",{
    Writable:false,
    value："nic"
});
console.log(person.name); //nic
person.name = "Grrg";
console.log(person.name); //nic

let person = {}
Object.defineProperty(person,"name",{
    configurable:false,
    value："nic"
});
console.log(person.name); //nic
delete person.name;
console.log(person.name); //nic

注意：如果将configurable设置为false则不可逆，就永远不可配置了。

补充两个属性：

[[Get]]:获取函数，在读取属性时调用。

[[Set]]:设置函数，在写入属性时调用。

简例：

Object.defineProperty(book,"year",{
    get() {
        return this.age;
    },
    set(newValue) {
        this.age = newValue;
    }
})

第三节：定义多个属性

let book = {};
Object.defineProperty(book,"year",{
    year_: {
        value:2017
    },
    edition: {
      value:1  
    },
    year:{
       get() {
        return this.age;
    },
    set(newValue) {
        this.age = newValue;
    } 
    }
    
})

第四节：读取属性属性

方法：Object.getOwnPropertyDescriptor();

let book = {};
Object.defineProperty(book,"year",{
    year_: {
        value:2017
    },
    edition: {
      value:1  
    },
    year:{
       get() {
        return this.age;
    },
    set(newValue) {
        this.age = newValue;
    } 
    }
    
})

//核心在这
let des = Object.getOwnPropertyDescriptor(book,"year_");
console.log(des.value); //2017
console.log(des.configurable); //false
console.log(typeof des.get); //undefined

let des = Object.getOwnPropertyDescriptor(book,"year"); //这样就能des.get拿到了

ECMAScript2017新增：Object.getOwnPropertyDescriptors()静态方法。调用这个简单来说就是所有变量的所有属性全部返回。

代码省略了。。

第五节：合并对象（混入）

混入：把源对象所有的本地属性一起复制到目标对象上。

目标对象通过对象混入源对象的属性得到了增强。

ES6中合并对象的方法：Object.assign()方法。

简单复制：

dest = {};
src = {id:'src'};

result = Object.assign(dest,src);
//Object.assign修改目标对象
//也会返回修改后的目标对象
console.log(dest === result); //true
console.log(dest !== src); //true
console.log(result); //{id:src}
console.log(result); //{id:src}

多个源对象：

dest = {};
result = Object.assign(dest,{a:'foo'},{b:'bar'});
console.log(result); //{a:foo,b:bar}

获取函数与设置函数：

dest = {
    set a(val) {
        console.log()
    }
};

src = {
    get a() {
        console.log('Invoked src getter');
        return 'foo';
    }
}

Object.assign(dest,src);
//调用src的获取方法，调用dest的设置方法并传入foo
//因为这里的设置函数不执行赋值操作
//所以实际上并没有把值转移过来
console.log(dest); //{set a(val) {...}}

Object.assign()实际上对每个源对象执行的是浅复制。

也就是，不能在两个对象间转移获取函数和设置函数。

还有，后边的属性会覆盖前面的属性。

知识点：

浅复制：意味着只会复制对象的引用。

未完待遇。。。

晚安_好梦

码农公寓