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

Rocture 发布于2019-08-02 11:52 / 1904人阅读

摘要：面向对象理解对象和对象的描述特性面向对象面向对象的语言都有一个特性都有类的概念。默认值是使用对象字面量的方式为对象添加的属性，其的值是，的值是指定的值。同数据属性同数据属性读取的时候调用函数。

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


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 的写法：有的时候明确的代码风格可以更好的表现代码的功能。比如在对象的属性中使用 _year 代表这个属性只有通过对象内部调用访问。

定义一个访问器属性，必须使用 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高程》

云服务器 GPU云服务器面向对象特性理解对象对象存储warm特性 js数据对象和对象的区别吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53175.html

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

摘要：面向对象理解对象和对象的描述特性面向对象面向对象的语言都有一个特性都有类的概念。默认值是使用对象字面量的方式为对象添加的属性，其的值是，的值是指定的值。同数据属性同数据属性读取的时候调用函数。 JavaScript面向对象OOM 1（理解对象和对象的描述特性） Date: Updated At Oct 31, 2018 | JavaScript | 面向对象 | Author: Zhe...

Cobub 2019-08-23 12:39 评论0 收藏0
深入理解JavaScript中的属性和特性

摘要：深入理解中的属性和特性中属性和特性是完全不同的两个概念，这里我将根据自己所学，来深入理解中的属性和特性。其中第三个参数描述符对象是对象字面量的方法创建的，里面的属性和属性值实际上保存的是要修改的特性和特性值。深入理解JavaScript中的属性和特性　　JavaScript中属性和特性是完全不同的两个概念，这里我将根据自己所学，来深入理解JavaScript中的属性和特性。　　主...

VPointer 2019-08-23 15:27 评论0 收藏0
JavaScript深入理解对象方法——Object.defineProperty()

摘要：返回值被传递给函数的对象。描述该方法允许精确添加或修改对象的属性。描述符必须是两种形式之一不能同时是两者。可以是任何有效的值数值，对象，函数等。该方法返回值被用作属性值。该方法将接受唯一参数，并将该参数的新值分配给该属性。 Object.defineProperties() Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性...

woshicixide 2019-08-21 17:08 评论0 收藏0
Javascript面向对象的程序设计_理解对象

摘要：面向对象的程序设计理解对象前言最近在细读高级程序设计，对于我而言，中文版，书中很多地方翻译的差强人意，所以用自己所理解的，尝试解读下。总结如果英语水平足够好的话，建议看英文原版书籍或者国外大师的博客。 JS面向对象的程序设计_理解对象前言：最近在细读Javascript高级程序设计，对于我而言，中文版，书中很多地方翻译的差强人意，所以用自己所理解的，尝试解读下。如有纰漏或错误，会非...

刘厚水 2019-08-23 12:14 评论0 收藏0