JavaScript面向对象OOM 1（理解对象和对象的描述特性）
Date: Updated At Oct 31, 2018 | JavaScript | 面向对象 | Author: ZhengAo |
- 面向对象的语言都有一个特性 -- 都有类的概念。通过类可以创建一系列属性相近，功能类似的对象。
- JavaScript 中没有类的概念，JS 有特殊的面向对象的技巧--通过原型的方式。每个对象都是基于一个引用类型创建的
- 首先要对 Js 的对象有一个简单的认识。Js 中的对象就是一个 Key-Value 对组成的集合。
- 其中 Value 可以是一个基础数据类型，也可以是一个引用数据类型。
- Key 可以是一个任意可以转换成字符串的类型（Js 内部会自动把 Key 都转换成字符串，也可以理解成 Key 是一个字符串）
I-1 创建对象
- 创建一个对象最开始（基本、没人用）的方式就是创建一个 Object 的实例。
- 创建之后为其添加属性。
<!--创建实例-->var person = new Object();<!--添加属性-->person.name = 'Zhang San';person.talk = function() { console.log('name', this.name);} - 在之后最常使用的就是通过对象字面量的方式创建一个新对象。
<!--字面量-->var person = { name: 'Zhang San', talk: function() { console.log('name', this.name);} - 使用对象字面量创建理论上可以减少内存的使用，提高性能，更高效（减少了创建实例时候的 prototype 的调用，缩短原型链）。开发体验上字面量的方式更好。
- 参考：
I-2 对象的属性
- 首先要明白，Js 中的对象的属性分为两种： 数据属性和访问器属性
- Js 的属性中有一些是使用双中括号括起来的例如：
[[Configurable]]，这些属性是 JS 引擎所访问的。
I-2-1 数据属性
- 数据属性包含一个数据值的位置，可以读取和写入。 这个位置指的是在对象中有一个可以看到的属性
var obj = { demo : 123} 上面的 demo 就是一个数据属性
数据属性中有4个描述它的特性（注意区分大小写，使用的时候是小写开头）
- [[Configurable]] 可以从新定义的属性。默认值： true。
- [[Enumerable]] 可以遍历的属性（for-in） 默认值：true
- [[Writable]] 可以修改属性的值。 默认值： true
- [[Value]]属性Key对应的值。读取的时候从这里读取。默认值是undefined
使用对象字面量的方式为对象添加的属性，其[[Configurable]]`[[Enumerable]]`[[Writable]] 的值是true，[[Value]的值是指定的值。
在初始化对象之后，我们会有修改它的欲望，Js 在（ES5）的时候为我们提供了一个方法用于修改这些描述特性。
- 修改对象属性(A.x)的数据属性时候，使用：
Object.defineProperty(对象，对象的属性，描述符对象)方法。 -
函数名比较长，理解语义记忆：
- Object： 首先这是一个对象默认的方法。
- define（定义）
- property（特性）
- 小驼峰写法写成： Object.defineProperty()
<!--定义一个对象-->var person = {};<!--创建一个属性-->Object.defineProperty(person, name, { writable: false, value: 'Zhang San'})console.log(person.name) // Zhang San<!--由于设置了属性特性 writable = false 所以不可以更改-->person.name = 'Li Si'console.log(person.name) // Zhang San - 在多次调用
Object.defineProperty()方法修改一个属性的configurable的值的时候，一旦设置了false就不可以再次修改。 - 这个方法的最小兼容为 IE9+ ，其他现代浏览器基本都可以提供这个方法（不兼容建议放弃或强制升级）。
I-2-2访问器属性
- 什么是访问器属性：先看一个例子
var book = { _year: 2005, edition: 1,}// 注意这里的 year 不是 _year， year就是一个访问器属性，_year是一个数据属性。Object.defineProperty(book, 'year', { get: function() { return this._year }, set: function(newVal) { this.editor += newVal - 2004 ; this._year = newVal; }}) -
通过例子可以看出访问器属性和数据属性非常大的区别就是
- 访问器属性不包含具体的数值，不直接显示在对象中，不能直接通过字面量定义。
- 访问器属性有 get 和 set 方法才能为其赋值。
- 访问器属性的定义经常会引起其他数据属性的变化。（这就是它的一个重要作用）
- 至于例子中的
_year的写法：有的时候<span style="color: red">明确的代码风格</span>可以更好的表现代码的功能。比如在对象的属性中使用_year代表这个属性 <u >只有通过对象内部调用访问</u> 。 - 定义一个访问器属性，必须使用 Object.defineProperty()这个方法定义
-
访问器属性提供了4个描述特性。
- [[Configurable]] 同数据属性
- [[Enumerable]] 同数据属性
- [[Get]] 读取的时候调用函数。默认值为：undefined
- [[Set]] 设置的时候调用函数。默认值为：undefined
- get和set 不一定同时存在，存在一个表明：操作另一个的时候不会得到结果，严格模式会报错。
- 兼容性： IE9+
I-3 操作对象的多个属性
- 以上两节主要说明了单个属性描述特性的操作，批量的属性操作可以提升语义和简化代码。
- JS 提供了可以一次性定义多个属性的方法：使用
Object.defineProperties(对象，描述对象)方法
var book = {};Object.defineProperties(book, { _year: { value: 2004 }, edition: { value: 1 }, year: { get: function(){ return this._year; }, set: function(newValue){ if (newValue > 2004) { this._year = newValue; this.edition += newValue - 2004; } } }}); I-4 读取对象的属性特性
- Js 提供了
Object.getOwnPropertyDescriptor(对象，属性)的方法获取指定对象的特定属性的描述特性。 -
方法名记忆： 对象方法.获取-自身的特性-描述符特性
-
get：获取 -
own：自身的 -
property：特性 -
descriptor：描述特性 - 使用小驼峰链接：
getOwnPropertyDescriptor()
-
- 未特殊指定的描述特性，它的值是默认值。
- 兼容性 IE9+
参考资料
- 《JavaScript高程》
原文地址：