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

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞