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

2021-11-24 23:58:40 阅读：162 来源： 互联网

标签：读记 console log dest Object person 面向对象编程 JavaScript 属性

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()实际上对每个源对象执行的是浅复制。

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

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

知识点：

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

未完待遇。。。

晚安_好梦

标签：读记,console,log,dest,Object,person,面向对象编程,JavaScript,属性
来源： https://blog.csdn.net/m0_56396386/article/details/121528039

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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