JavaScript对象详解

摘要：属性描述符升级打怪必备技能对象有自己的属性和方法，对于我们对象的属性来讲，属性还有自己的属性，又称为属性描述符。这个方法接受三个参数，第一个是指定的对象，第二个是指定的对象参数，第三个当然是要修改的属性描述符了。

对象的声明有俩种：

字面量

通过new一个构造函数Object

两者唯一的区别就是，字面量形式，可以一次赋值多个，通过new Object就得一个一个赋值

数据类型

JS种7种数据类型

number

string

undefined

null

boolean

object

symbol（es6新增，也不算新了，es6都多久了...）

简单数据类型

number

string

undefined

null

boolean

复杂基本类型(内置对象，object子类型)

Number

String

Boolean

Object

Function

Array

RegExp

Date

Error

补充：null为什么是基本类型但是依然会出现，typeof null 会返回 object？这是一个语言的bug，原理如下：原理是这样的，不同的对象在底层都表示为二进制，在 JavaScript 中二进制前三位都为 0 的话会被判
断为 object 类型，null 的二进制表示是全 0，自然前三位也是 0，所以执行 typeof 时会返回“object”。

深入对比基本类型和复杂类型的区别，用string和String对比

var str = "hello world";
var strObj = new String("hello String");

str.length                          // 11
strObj.length                    // 12

// typeof判断属于那种简单数据类型
typeof str;                         // "string"
typeof strObj;                     //"object"

// instanceof判断对象实例的鼻祖是哪个复杂类型
str instanceof String         //  false
strObj instanceof String   // true

这段代码可以分析出，str通过字面量形式声明，其数据类型为基本数据类型，并不是对象，strObj 为复杂数据类型String的实例。我们知道str， strObj的数据类型之后，就要抛出一个问题，为什么str并不是对象，它怎么就能调用length呢？这不是一个简单数据类型该有的呀。js向你丢出一个结论，那就是简单数据类型存在一个隐式转换，它会从简单数据类型转换为复杂数据类型。

首先以对象字面量整一个对象

let obj = {
    name: "hello",
    age: 12
}

访问对象的属性可以通过 圆点运算符 类似于 obj.name， 还可以通过属性运算符 obj["name"]访问。

ES6 定义了Object.assign（）方法实现浅复制，该方法第一个参数是目标对象，之后还可以跟一个或多个原对象，他会遍历一个或多个原对象所有可枚举的自有键并把他们复制（使用 = 操作符赋值，所以这种僵硬的赋值操作，不会将原对象的属性的特性复制过来）到目标对象，最后返回目标对象。

对象有自己的属性和方法，对于我们js对象的属性来讲，属性还有自己的“属性”，又称为属性描述符。不要小看这个属性描述符，可不得了，通过属性描述符，我们不仅仅可以配置属性是读写权限，甚至通过setter，getter实现我们的数据双向绑定。该介绍一下这位调用属性描述符的内置方法了：Object.defineProperty()。这个方法接受三个参数，第一个是指定的对象，第二个是指定的对象参数，第三个当然是要修改的属性描述符了。当对象中不存在指定的属性，Object.defineProperty()就创建这个属性，当描述符中省略某些字段时，这些字段将使用它们的默认值，拥有布尔值的字段的默认值都是false

所以这也就是说，通过Object.defineProperty()创建的属性，描述符是不可配置的，因为configurable：false

// 直接对一个对象使用原点运算符赋值，属性描述符都是true
var o = {};

o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : true,
  configurable : true,
  enumerable : true
});


// 另一方面，使用Object.defineProperty()却将属性修饰符关闭了
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : false,
  configurable : false,
  enumerable : false
});

var obj = {
    name: "hello",
    age: 12
}

Object.defineProperty(obj, "name", {
    value: 2,
    writable: true,
    configurable: true,
    enumerable: true
})

obj.name;       //2 not hello

接下来，我们解释一下属性描述符的四大天王：value, writable, configurable, enumerable

configurable

为啥先要介绍configurable呢，不得不说说他的重要性，这个描述符的值是true/false，它表示属性描述符是否可配置，当值为false时，剩下的描述符都是不可配置的，修改也不会生效，不包括value。简单的说，configurable控制的其他描述符的命运！后面我们讨论的时候，默认configurable为true，不然，讨论也没有意义，根本不会改变嘛

var a = {
    name: "tom",
    age: 22
}

Object.defineProperty(a, "age", {
    enumerable: false,
    writable:false,
    configurable: false,
})
a.age = 12;   // a.age 为12.即使writable 是false，因为configurable是false，所以writable其实还是默认的true

我知道你肯定是不信的，直接上图。Object.getOwnPropertyDescriptor() 与Object.defineProperty()互为一对儿，一个定义，一个查看定义

而且，将configurable修改为false，这是一个单向操作，你想再次修改它的值为true以实现重新配置属性描述符是不可能的，一旦设置false，永远都是false了。听说你还不信，那我再上图

var myObject = {
    a:2
};
myObject.a = 3;
myObject.a; // 3
Object.defineProperty( myObject, "a", {
    value: 4,
    writable: true,
    configurable: false, // 不可配置！
enumerable: true
} );

myObject.a; // 4
myObject.a = 5;
myObject.a; // 5

Object.defineProperty( myObject, "a", {
    value: 6,
    writable: true,
    configurable: true,
    enumerable: true
} ); // TypeError

writable

我们介绍一下控制读写的小伙伴-writable，这个属性描述符控制我们是否可以对属性进行赋值，值为false时，赋值是不管用的。严格模式下，还会抛出错误。至于writable怎么处理属性是否能被赋值，留一个疑问，稍后马上揭晓。

// configurable为true
var myObject = {};

Object.defineProperty( myObject, "a", {
    value: 2,
    writable: false, // 不可写！
    configurable: true,
    enumerable: true
} );

myObject.a = 3;
myObject.a; // 2

Enumerable

这个属性修饰符可能没有那么直观，但是从字面来看，我们应该是能了解到的，这是控制属性是否能出现在对象可枚举属性中。如果将enumerable设置为false，属性就不会出现在可枚举属性中。enumerable定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。

var obj = {
    name: "tom",
    age: 12
}

for(prop in obj) {
    console.log(prop);     // name, age
}

Object.defineProperty(obj, "name", {
    enumerable: false,
})

for(prop in obj) {
    console.log(prop);                //age
}

补充一些可枚举相关的知识，什么叫可枚举属性，就是指那些属性描述符设置为enumerable为true的属性。有很多方法是基于可枚举性的。比如，Object.keys(), in, for in 。对于上面那个例子，就是使用了for in遍历obj对象可枚举属性。

tips: 利用属性修饰符拓展的功能

ES6 实现的常量const
本身JS是没有常量这个概念的，但是我们可以使用writable:false 和 configurable:false，就可以创建一个一次赋值，不能修改的常量

禁止拓展
如果想禁止一个对象添加新属性并且保留已有属性，可以使用Object.preventExtensions()，这样显式赋值就会静默失败，严格模式下，将会抛出TypeError异常

密封，禁止拓展加强版，已有的属性以及属性修饰符都不能改
Object.seal(..) 会创建一个“密封”的对象，这个方法实际上会在一个现有对象上调用
Object.preventExtensions(..) 并把所有现有属性标记为 configurable:false。
所以，密封之后不仅不能添加新属性，也不能重新配置或者删除任何现有属性（虽然可以
修改属性的值）。

冻结，更狠，Object.seal() 加强版，直接修改属性修饰符writable：false，值都不能动了。
Object.freeze(..) 会创建一个冻结对象，这个方法实际上会在一个现有对象上调用
Object.seal(..) 并把所有“数据访问”属性标记为 writable:false，这样就无法修改它们
的值。

ES5可以使用getter和setter部分改写默认操作，但是只能应用在单个属性上，无法应用在整个对象上，getter,setter都是隐藏函数，前者在获取属性值时自动调用，后者是在设置属性值时自动调用。其实现在，我们可以总结一下前文所述。属性描述符其实分为两种

数据修饰符

访问修饰符

而我们前文一直在讲述数据修饰符，那么什么是访问修饰符呢？
当我们给一个属性定义getter和setter或者两者都有时，这个属性会被定义为”访问描述符“，对于访问描述符而言，JavaScript会忽略它们的value和writable特性，取而代之的是关心set/get（还有configurable和enumerable）特性

实例演示：

function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, "temperature", {
    get: function() {
      console.log("get!");
      return temperature;
    },
    set: function(value) {
      temperature = value;
      archive.push({ val: temperature });
    }
  });

  this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // "get!"
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

一言以蔽之，setter/getter无非就是我们在赋值或者读取变量时，预先悄悄调用的一个隐藏方法。
还有一种通过对象文字语法创建的get，set（我也是从《你不知道的js》看到这种用法的，MDN这相关的文档中我并没有看到，学到了），这个不是通过Object.defineProperty()创建的，二者都会在对象中创建一个不包含值的属性，对于这个属性的访问会自动调用一个隐藏函数，它的返回值会被当作属性访问的返回值。

其实可以更细致的观察到，通过对象文字语法创建的变量，他的修饰符按照规则肯定是没有value的，但是其他配置信息是true，这一点很关键

大体上对象的内容就是这么多，后续在做一个补充，MDN实在是前端宝典，看到这里更推荐读者阅读MDN相关文档：https://developer.mozilla.org...