1. 属性与属性的差别

js中的对象是属性的集合。换句话说，js中的对象中什么都没有，只有属性。

虽然同样是对象的属性，其实属性与属性之间还是有很多的区别的。

举个例子：

a = 1;
var b = 2;

如上定义的两个变量有什么区别之处吗？你可以先思考一下，然后在往下看。

区别之处：

如果它们写在函数的内部的话，a是不加var就直接定义的全局变量，这种写法已经被鄙视的不行了，因为会导致不可控的全局变量的污染。但并不是不可以使用。b是一个局部变量。以下代码可以证明这一点。

function f(){
    a = 1;
    var b = 2;
}
f();
console.info(a) // 1
console.info(b) // 报错

顺便提一句，如果开启了严格模式,则a=1这中写法就会直接报错了。

"use strict"
function f(){
    a = 1;  // 这里直接报错
    var b = 2;
}
f();

如果他们写在函数的外部的话，它们都是全局变量，都是加在window对象上的属性。但a属性不能删除，b属性可以删除。

a = 1;
var b = 2;
console.info(window.a)
console.info(window.b)

如果上面的代码并不能正常输出1,2。建议你不要使用chrome浏览器。

下面看下可否删除的例子

a = 1;
var b = 2;
delete window.a // true
delete window.b // false

console.info(window.a); // 无法访问
console.info(window.b); // 还可以访问

同样是属性，为什么一个可以删除，一个不可以? 属性之间地位有差别吗？答案是：有区别。

我们可以通过Object.getOwnPropertyDescriptor() 来查看这两个属性之间的区别：

a = 1;
var b = 2;
Object.getOwnPropertyDescriptor(window,"a")
//输出：Object { value: 2, writable: true, enumerable: true, configurable: true }
Object.getOwnPropertyDescriptor(window,"b")
//输出：Object { value: 2, writable: true, enumerable: true, configurable: false }

window.a 的 configurable是true
window.b的configurable是false。这就是区别。

那么其他的三个分别表示：

value：值
writable ：是否可以修改
enumerable ：是否可以枚举

更详细的说明可以看这里

2. 两种定义对象的属性的方式

初始值/ 赋值
Object.defineProperty

1.1 初始值/ 赋值

var obj = {
    name: "fan"
}

这是比较常见的一种做法：对象字面量。

var obj = {}
obj.name = "fan"
// or  obj["name"] = "fan"

这种写法也比较常见。它们产生的效果是一样。

Object.getOwnPropertyDescriptor(obj,"name")

// { value: "fan", writable: true, enumerable: true, configurable: true }

这种方式定义的属性都是：

可删除
可修改
可枚举

1.2 Object.defineProperty

我们可以更加精确地控制属性的特性。例如：让一个属性不能被修改。

使用数据描述符定义对象的属性

var obj = {}; 
Object.defineProperty(obj, 'name', {
  value: 37,
  writable: true,  //如果是false 则不可修改
  enumerable: true,
  configurable: true
});

另一种
使用存取描述符定义对象的属性

var nameValue = "fan";
Object.defineProperty(obj, 'name', {
  get() { return nameValue; },
  set(newValue) {  nameValue = newValue; },
  enumerable: true,
  configurable: true
});

注意，这两种方式不能混在一起使用。以下代码报错：

var obj = {}
var nameValue = "fan";
Object.defineProperty(obj, 'name', {
  value:"abc",
  get() { return nameValue; },
  set(newValue) { nameValue = newValue; },
  enumerable: true,
  configurable: true
});

报错的内容可能是：

Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>
at Function.defineProperty (<anonymous>)

3. Object.defineProperty 的应用

3.1 定义特殊的属性，例如只读的

var obj = {}; 
Object.defineProperty(obj, 'name', {
  value: "fan",
  writable: false
});
obj.name = "jake" // 悄悄地失败
console.info(obj.name)  // fan

当然，如果开启了严格模式，就会抛出错误了。

"use strict"
var obj = {}; 
Object.defineProperty(obj, 'name', {
  value: "fan",
  writable: false
});
obj.name = "jake" // 这里会报错
console.info(obj.name)

// Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'

3.2 特殊的属性的处理

在通过存取描述符定义属性时，我们可以在set，get中添加额外的自定义处理逻辑，以达到特殊的效果。

例如：我们希望在给obj.name赋值时，必须是字符串类型，如果是不字符串，就直接报错。

var obj = {}
var nameValue = "fan";
Object.defineProperty(obj, 'name', {
  get() { return nameValue; },
  set(newValue) {
    if((typeof newValue) === "string")
        nameValue = newValue;
    else
        throw new Error("name 必须是字符串...")
      
  },
  enumerable: true,
  configurable: true
});
obj.name = "jake"
console.info(obj.name)  // jake
obj.name = 123 // 报错

以上。