Object.create(null) 和 {} 的区别

这两天在看vue的源码，发现作者定义映射字典的时候，喜欢用Object.create(null)，而不是直接定义一个对象字面量，那么两者有什么区别呢，又存在什么业务场景呢

   let m = Object.create(null);
   let n = {};
   
   // 猜测下，m和n有什么区别呢
   console.log(m);
   console.log(n);

就是一个纯粹的空对象

继承了对象原型的空对象，也就是说存在n.toString();

Object.create(proto, [propertiesObject]) 方法

• proto 新建对象的原型对象
• propertiesObject 可选，添加到新建对象的属性（不是原型链的属性），默认可枚举，参数对应Object.defineProperties的第二个参数

{} 相当于 Object.create(Object.ptototype), 现在你明白他们之间的区别了吧

for...in可以遍历n的可枚举属性（功能同Object.keys()）

这里要谢谢@IZumi提醒（试了一下发现没有打印toString\get\set方法属性，后来才发现混淆了两个概念，就是__proto__和prototype）

修正之后如下：

   function A() {
       console.log('我是函数A')
   };
   // 定义原型对象
   let protoObj = {};
   protoObj = Object.defineProperty(protoObj, 'a', {
       enumerable: false,   // 不可枚举
       value: 'a属性'
   });
   protoObj.b = 'b属性';
   
   A.prototype = protoObj;
   let a = new A();
   //  这里的let...in 和Object.keys()类似，都能访问可枚举属性
   for (let key in a) {
       console.log(key, a[key]);  // b  b属性 
   }

接下来判断下上文截图上提到的n.__proto__中的toString()方法是否枚举

    // getOwnPropertyNames方法打印所有属性，可枚举的和不可枚举的
    let res1 = Object.getOwnPropertyNames(n.__proto__);
    console.log(res1);
    // 结果如下
    // ["constructor", "__defineGetter__", "__defineSetter__", "hasOwnProperty", "__lookupGetter__", "__lookupSetter__", "isPrototypeOf", "propertyIsEnumerable", "toString", "valueOf", "__proto__", "toLocaleString"]
    
    // 上文我们知道Object.keys()只能访问可枚举属性
    let res2 = Object.keys(n.__proto__);
    console.log(res2);
    // []

结果显而易见，继承Object.prototype而来的父方法，是客观存在、可调用的，不可枚举、不可遍历的

另外这个__proto__属性, 是一个对象的隐式原型，指向构造该对象的构造函数的原型

   console.log(a.__proto__ === A.prototype)  // true

这个以后再做深入讨论。

ps. 刚开始用md语法写文档，用的还不是很熟练，以后有更多跟有内涵的文章给大家分享，加油加油！