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高程》