二、对象的拓展

2.1 特性

对象是什么，我们用属性来描述

属性是什么，我们用特性来描述

也就是说：特性是用来描述属性的

2.2 Object.defineProperty

作用：

用于设置单个属性的特性

在 ES3.1 中，只要对象能够被访问，就可以任意操作该对象。比如：添加属性，删除属性，修改属性值

在 ES5 中，为对象拓展了一个叫做 “特性” 的东西，用来控制对象中属性的可访问性

使用方式：

Object.defineProperty(obj, property, {});

• Object.defineProperty(obj, property, options);

  • obj：要设置的对象

  • property：要进行设置的属性

  • options：描述特性对象

ES3.1：

// ES3.1
var obj = {
    color: "red",
    width: 100
}
console.log(obj);
// 添加属性
obj.title = "nihao";
// 删除属性
delete obj.color;
// 修改属性值
obj.width = 200;
console.log(obj);

ES5：

// ES5
var obj = {
    color: "red",
    width: 100
}

// 使用 for 循环枚举每一个属性
for (var i in obj){
    console.log(i);
}

console.log(obj);


// 定义特性
Object.defineProperty(obj, "color", {
    // 修改可枚举性
    enumerable: false
});

// 再次使用 for 循环枚举每一个属性
for (var i in obj){
    console.log(i);  // color 已被修改为不可枚举，结果只会出现 width
}
console.log(obj);

// 总结： 同样是 for 循环，在没有设置特性之前，是可以输出对象中的每一个属性
//        在设置了特性之后，被设置了特性的属性，没有被输出

2.3 特性—配置值

使用方式：

Object.defineProperty(obj, property, {
    value: “”
});

总结：

• 如果一个对象中，存在该属性，此时描述特性对象中的其他属性默认都是true

• 如果一个对象中，不存在该属性，而是通过定义特性的方式添加的属性，那么描述特性对象中的其他属性默认都是false

2.4 特性—可修改性

使用方式：

Object.defineProperty(obj,  property, {
    writable: false   // 将可修改性设为false  将不能再被修改
});

举例：

var obj = {
    color: "red"
}
// 定义特性
Object.defineProperty(obj, "color", {
    // 不可修改
    writable: false
});

// 尝试修改 obj.color
obj.color = "blue";
console.log(obj);

特性—可枚举性

使用方式：

Object.defineProperty(obj,  property, {
    enumerable: false   // 将可修改性设为false  将不能再被枚举
});

举例：

var obj = {
    color: "red",
    width: 200
}

// 默认情况下是可以被枚举的
for (var i in obj){
    console.log(i, obj[i]);
}
// 定义特性
Object.defineProperty(obj, "color", {
    // 不可被枚举
    enumerable: false
    // enumerable: true
});

// 再次使用 for 循环
for (var i in obj){
    console.log(i, obj[i]);
}

console.log(obj);

2.6 特性—可配置性

使用方式：

Object.defineProperty(obj,  property, {
    configurable: false   // 将可修改性设为false  将不能再被修改
});

举例：

var obj = {
    color: "red",
    width: 200
}
// 定义特性
Object.defineProperty(obj, "color", {
    // 配置值
    value: "blue",
    // 不可写入
    writable: false,
    // 不可配置
    configurable: false
});

// 再次配置
Object.defineProperty(obj, "color", {
    // 配置值
    value: "pink",
    // 不可写入
    writable: false
});
// 尝试修改 obj.color
obj.color = "green";
console.log(obj);

修改可配置属性为false之后，再次修改可配置性，会报错，因为已设置color不可配置

2.7 特性方法

• get用来获取属性值的

  • 没有参数

  • 返回值就是要获取的属性值

  • 作用域是当前对象

  • 千万不要在该方法中获取属性值，否则会递归死循环

  • 通常我们获取该属性的一个备用值

• set用来设置值的

  • 参数就是要设置的值

  • 没有返回值

  • 作用域就是当前对象

  • 千万不要在该方法中设置属性值

  • 通常我们设置该属性的一个备用值

举例：

// 定义对象
var obj = {
    color: "red"
}

// 设置特性
// 一旦设置了特性方法 （set ， get ），当 obj.color; 就会触发 get 函数，  当 obj.color = xx; 就会触发 set 函数
Object.defineProperty(obj, "color", {
    // 取值器
    get: function(){
        console.log(111, this, arguments);
        // 千万不要在方法中获取该属性 会陷入死循环
        // return this.color;
        // 通常获取该属性的备用值
        return this._color;
    },
    // 赋值器
    set: function(value){
        console.log(222, this, arguments);
        // 千万不要设置该属性值 会陷入死循环
        // this.color = value;
        // 通常设置该属性的备用值
        this._color = value;
    }
});
console.log(obj.color);  // obj.color; 会触发 get 函数
obj.color = "blue";  // obj.color = xx; 会触发 set 函数

2.7.1 单项绑定

举例：

<div id="box">

</div>
<script>
    // 定义对象
    var obj = {
        color: "red"
    }

    // 获取元素
    var box = document.getElementById("box");
    // 设置内部文本
    box.innerHTML = obj.color;

    // 定义特性
    Object.defineProperty(obj, "color", {
        set: function(value){
            box.innerHTML = value;
        }
    });

2.8 设置多个属性特性

使用方式：

Object.defineProperties(obj, options);
    obj：要设置的对象
    options：特性对象
        key：特性属性
        value：属性特性对象
        设置特性属性和方法

举例：

// 定义对象
var obj = {
    color: "red",
    num: 100
}

// 定义 color 和 num 的特性
Object.defineProperties(obj, {
    color: {
        // 值
        value: "blue",
        // 不可写入
        writable: false,
        // 不可枚举
        enumerable: false
    },
    num: {
        // 取值器
        get: function(){
            return this._num;
        },
        set: function(value){
            this._num = value;
        },
        // 不可枚举
        enumerable:false,
        // 一旦设置了特性方法 （set ， get） ，将无法再次配置 writable 和 value
        // 不可写入
        // writable: false,   // 会报错
        // 配置值
        // value: 300  // 会报错
    }
});

// 修改 obj 中的属性值
obj.color = "green";
obj.num = 500;
console.log(obj);

// 枚举
for (var i in obj ){
    console.log(i, obj[i]);
}