首页手记理解JavaScript对象

理解JavaScript对象

标签：

JavaScript

创建对象

方法一：Object对象创建

var obj1 = new Object();
// 字面量
var obj1 = {};

方法二：Object.create()

var obj2 = Object.create(null);

方法三：构造函数

function Person(name) {
    this.name = name;
}

var p = new Person('bobobo');

属性类型

分为两种：数据属性和访问器属性。

数据属性

数据属性包含4个特征：

[[Configurable]]：表示是否可以通过 delete 删除属性从而重新定义属性，能否修改属性的特征，或者能否把属性改为访问器属性。默认值为 true。
[[Enumerable]]: 表示是否可以通过 for-in 遍历返回属性。默认值为 true。
[[Writable]]: 表示是否可以修改属性的值。默认值为 true。
[[Value]]: 表示属性的值。默认值为 undefined。

想要修改数据属性默认特征，需要使用 Object.defineProperty()方法修改。

第一个参数为对象。
第二个参数为对象属性名字。
第三个参数为一个描述符对象（descriptor）：Configurable, Enumerable, Writable, Value

var person = {}

Object.defineProperty(person, 'name', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: 'js'
})

console.log(person.name); // 初始化值为 'js'

person.name = "bobo";
console.log(person.name); // 修改不成功，热输出 'js'

delete person.name;
console.log(person.name); // 仍然存在 name 属性，输出 'js'

for (var val in person) {
    console.log(val); // 打印不出来
}

访问器属性

访问器属性包含4个特征：

[[Configurable]]: 表示是否可以通过 delete 删除属性，从而重新定义属性，能否修改属性的特征，或者能否把属性改为数据属性。默认值为true。
[[Enumerable]]: 表示是否能通过 for-in 遍历返回属性。默认值为true
[[Get]]: 在读取属性时候调用的函数。默认值为 undefined。
[[Set]]: 在写入属性时候调用的函数。默认值为 undefined。

访问器属性必须使用：Object.defineProperty() 方法来定义。

第一个参数为对象
第二个参数为对象属性名字
第三个参数为描述对象（descriptor）：Configurable, Enumerable, Get, Set

var animate = {
    _name: 'dog'
};

Object.defineProperty(animate, "name", {
    get: function () {
        return this._name + ' [Get]';
    },
    set: function (newValue) {
        this._name = newValue + ' [Set]'
    }
});

console.log(animate.name); // god [Get]
animate.name = "cat";
console.log(animate.name); // cat [Set] [Get]

定义多个属性

使用 Object.definedProperties()方法，这个方法接收两个对象参数：

第一个对象是要添加和修改其属性的对象
第二个对象的属性与第一个对象中要添加或修改的属性一一对应

var tree = {};

Object.defineProperties(tree, {
    _name: {
        writable: true,
        value: 'Pine Tree'
    },
    _year: {
        writable: true,
        value: 100
    },
    name: {
        get: function () {
            return this._name;
        },
        set: function (newVale) {
            this._name = newVale
        }
    },
    year: {
        get: function () {
            return this._year;
        },
        set: function (newValue) {
            this._year = newValue;
        }
    }
});
console.log(tree.name); // Pine Tree
console.log(tree.year); // 100

tree.name = "Yang Tree";
tree.year = 200;

console.log(tree.name); // Yang Tree
console.log(tree.year); // 200

读取属性的特征

属性类型有2个：数据属性和访问器属性，需要读取属性是哪个特征的话，需要使用到：Object.getOwnPropertyDescriptor() 方法，第一个参数为：属性所在的对象，第二个参数为：读取的属性名称，返回的结果是一个对象：

如果是数据属性：则这个对象包含：configurable, enumerable, writable, value。
如果是服务器属性: 则这个对象包含：configurable, enumerable, get, set。

var tree = {};

Object.defineProperties(tree, {
    _name: {
        writable: true,
        value: 'pine tree'
    },
    name: {
        get: function () {
            return this._name;
        },
        set: function (newVale) {
            this._name = newVale
        }
    }
});

var descriptor1 = Object.getOwnPropertyDescriptor(tree, 'name');
var descriptor2 = Object.getOwnPropertyDescriptor(tree, '_name');

// 检测属性是哪个属性特征，我们简单的检测返回的对象是否有 get 方法即可
// 如果存在 get 方法那么就是 访问器属性
// 如果不存在 get 方法那么就是 数据属性
console.log(typeof descriptor1.get); // function
console.log(typeof descriptor2.get); // undefined