{}、Object()、new Object()、Object.create()傻傻分不清楚

1.{}、Object()、new Object()

我们平常工作中一般用let obj={}对象字面量的方法来创建对象.但其实创建对象还有一些其它方式,如:Object() new Object() Object.create().下面我们就来具体介绍这些方法的区别.

let test={a:1}
let test1=Object({a:1}) //不传就是空对象{}
let test2=new Object({a:1}) //不传就是空对象{}

我们打印三个结果

image.png

从图中我们可以看出,三个结果一模一样,并且原型都继承了Object.prototype,我们总结下

通过字面量的方式和函数的方式都可以用来创建对象
当以非构造函数形式被调用时(也就是当成函数执行时)，Object 的行为等同于 new Object()。参考mdn官网Object一节. 简单来说, new Object()和Object()是一样的,new可以省略

注意,上面我们调用Object时候传递的参数是个对象,现在我们传递其它类型的参数看看

let test3=new Object(1)
let test4=new Object("1")
let test5=new Object([1])
let test6=new Object(true)

打印4个结果

image.png

我们发现,Object构造函数会根据传入的值的类型返回相应的基本包装类型的实例(对象包装器),我们也可以给其进行操作

let test3=new Object(1)
test3.a=2
console.log(test3 instanceof Number);//true
console.log(test3); //实例,引用类型
let a = Number(1);//这是转型函数，其它的还有String()、 Boolean()、 Array()
a.number=2 //不能操作,属于基本数据类型
console.log(a); //所以结果为1

打印出的test3结果如下

image.png

注意:
上面我们说了对象字面量、构造函数创建对象,下面我们单独来说下Object.create(),因为它比较特别.

2.Object.create()

mdn定义 : Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的proto。

语法:

Object.create(proto，propertiesObject)

proto:新创建对象的原型对象,必填
propertiesObject:可选.参数和 Object.defineProperties() 的descriptor属性描述符一样.

返回结果:是一个新对象，带着指定的原型对象和属性

1.参数proto

如果不理解,我们直接看例子

var test1 = Object.create();
console.log(test1);

报错:

image.png

提示参数必须只能为object或者null,大家可以试下,传递unedfined、数字啥的都会报同样的错
继续更改代码,

let test1 = Object.create(null);
let test2={}
console.log(1,test1); //{} //无原型
console.log(2,test2); //{} 注意:虽然都为空对象,但是test2有原型
test1.a=1
console.log(3,test1); //{a:1}
console.log(4,test1.a); //1
console.log(test1 instanceof Object); //false
console.log(test2 instanceof Object); //true

打印结果

image.png

我们发现,如果传递null,生成的对象,原型是空的,在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如：toString(), hasOwnProperty()等方法

我们现在更改传递参数,

let test1 = Object.create({a:1});
let test2={a:1}
console.log(1,test1); //{} 
console.log(2,test2); //{a:1}
console.log(test1 instanceof Object); //true
console.log(test1.a); //1
console.log(test2 instanceof Object); //true
console.log(test2.a); //1

打印结果如下:

image.png

我们发现,我们传递的对象被赋予到新生成对象的原型上.现在在回过头来看定义,大家应该就能理解了.所以

let test = {};
// 以字面量方式创建的空对象就相当于:
let test = Object.create(Object.prototype);
console.log(test instanceof Object); //true

接下来,我们看第二个参数

2.propertiesObject

我们上面讲了,propertiesObject和Object.defineProperties的属性描述符一致,现在举个例子:

let test1 = Object.create({a:1},{
    // a会成为所创建对象test1的属性
    b:{
        value:1,
    }
});
console.log(test1);

image.png

我们更改代码

 let test1 = Object.create({a:1},{
    // a会成为所创建对象test1的属性
    b:{
        value:1,
    }
});
test1.a=2
test1.b=2
console.log(test1)

image.png

我们发现,

我们无法更改b的值,因为默认writable为false,改为true即可
我们更改a的值,但是test1对象上面没有a属性,实际a属性在原型上,所以相当于新增,所以我们如果更改,test1.__proto__.a=2即可

propertiesObject中定义的对象属性才会适用于属性描述符如writable等,原型上的属性(即第一个参数里的属性)不适用,所以我们可以进行读写操作

  let test1 = Object.create({a:1},{
      // a会成为所创建对象test1的属性
      b:{
          value:1,
          writable:true
          //其它参数和Object.defineProperties一样,就不一一介绍了
      }
  });
  test1.b=2
  console.log(test1)

image.png