JavaScript高级程序设计(红色宝典) 第八章 对象、类与面向对象编程 读记
2021/11/25 1:10:04
本文主要是介绍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()实际上对每个源对象执行的是浅复制。
也就是,不能在两个对象间转移获取函数和设置函数。
还有,后边的属性会覆盖前面的属性。
知识点:
浅复制:意味着只会复制对象的引用。
未完待遇。。。
晚安好梦
这篇关于JavaScript高级程序设计(红色宝典) 第八章 对象、类与面向对象编程 读记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-19环境变量处理课程:新手入门教程
- 2024-09-19接口模块封装课程:新手入门指南
- 2024-09-19请求动作封装课程:新手入门教程
- 2024-09-19拖拽表格课程:新手入门指南
- 2024-09-19页面权限课程:新手必学的权限管理入门教程
- 2024-09-19如何正确主动登出课程:新手必读教程
- 2024-09-19Element-Plus课程:新手入门与初级教程
- 2024-09-19Token处理入门教程:新手必看指南
- 2024-09-19如何应对被动登出课程的情况:新手必读指南
- 2024-09-19打包优化课程:初学者的必备指南