理解对象和对象的描述特性

2024年5月21日 170次阅读 来源: zhengao261

JavaScript面向对象OOM 1（理解对象和对象的描述特性）

Date: Updated At Oct 31, 2018 | JavaScript | 面向对象 | Author: ZhengAo |

  1. 面向对象的语言都有一个特性 — 都有类的概念。通过类可以创建一系列属性相近，功能类似的对象。
  2. 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 对象的属性

  1. 首先要明白，Js 中的对象的属性分为两种： 数据属性和访问器属性
  2. 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高程》
    原文作者：zhengao261
    原文地址: https://segmentfault.com/a/1190000016878984
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞