object.create,Objectcreate和对象字面量有什么区别
Object.create到底干了啥
可以看到Object.create内部创建了一个新对象newObj,默认情况下newObj. proto == F.prototype,在本例中则重写了构造函数F的原型属性,最终的原型关系链为newObj. proto == F.prototype == o
如果现有的对象是一个构造函数,即var car2=Object.create(Car)会发生什么呢?
京东面试题:
解析:
参考木易杨
详解Object.create(null)
{},new Object()和Object.create()的区别
{},new Object()和Object.create()的区别
创建对象的方法:
? ? 创建一个空对象有以下三个方法:
varobj1 = {};varobj2 = Object.create(null);varobj3 =newObject();
创建空对象的区别:
? ? 要创建一个干净的空对象,应该使用Object.create(null)而不是剩下两种。
? ?通过做Object.create(null),我们可以显式指定null作为它的原型。所以它绝对没有属性,
甚至没有构造函数,toString、hasOwnProperty属性,所以如果需要的话,可以在数据结构中使用这些键,而不需要通过hasOwnProperty进行判断。
1、{} 和 new Object() 除了本身创建的对象,都继承了 Object 原型链上(Object.prototype)的属性或者方法,eg:toString();当创建的对象相同时,可以说 {} 等价于 new Object() 。
2、Object.create() 是将创建的对象继承到原型链上,而本身没有继承 Object.prototype 的属性和方法。
// 对象字面量创建的是对象,而构造函数创建的是函数对象
var a = {x:1, y:2} // 对象字面量
var b = new Object({x:1, y:2}) // 构造函数
var c = Object.create({x:1,y:2}) // 创建一个对象
var d = Object.create(null)
var f = Object.create(Object.prototype)
console.log(a) // {x: 1, y: 2}
console.log(b) // {x: 1, y: 2}
console.log(c, d, f) // {}
console.log(a.x, b.x, c.x) // 1 1 1
console.log(a.__proto__.x, b.__proto__.x, c.__proto__.x) // undefined undefined 1
// a、b、f 继承 Object.prototype 的属性或者方法
console.log(a.__proto__, b.__proto__, f.__proto__) // Object 原型链上(Object.prototype)的属性或者方法
// c 将创建的对象继承到原型链上,本身没有继承 Object.prototype 的属性和方法
console.log(c.__proto__) // {x: 1, y: 2}
// d 创建了一个空的对象,没有继承 Object.prototype 的属性和方法
console.log(d.__proto__) // undefined
console.log(a.__proto__.x === b.__proto__.x) // true
console.log(a.__proto__.x === c.__proto__.x) // false
console.log(a.__proto__ === b.__proto__) // true
console.log(a.__proto__ === c.__proto__) // false
console.log(a.__proto__ === f.__proto__) // true
console.log(d.__proto__ === f.__proto__) // false
console.log(a.__proto__ === Object.prototype) // true
console.log(b.__proto__ === Object.prototype) // true
console.log(c.__proto__ === Object.prototype) // false
console.log(d.__proto__ === Object.prototype) // false
console.log(f.__proto__ === Object.prototype) // true
Object.create()
1)创建对象的方式不同
new Object() 通过构造函数来创建对象, 添加的属性是在自身实例下。
Object.create() es6创建对象的另一种方式,可以理解为继承一个对象, 添加的属性是在原型下。
Object.create()方法创建的对象时,属性是在原型下面的,也可以直接访问 b.rep // {rep: "apple"} ,
此时这个值不是吧b自身的,是它通过原型链 proto 来访问到b的值。
2)创建对象属性的性质不同
Object.create() 用第二个参数来创建非空对象的属性描述符默认是为false的,而构造函数或字面量方法创建的对象属性的描述符默认为true。看下图解析:
3)创建空对象时不同
4) __proto__ 属性
JavaScript 的对象继承是通过原型链实现的。ES6 提供了更多原型对象的操作方法。
__proto__ 属性(前后各两个下划线),用来读取或设置当前对象的prototype对象。目前只有浏览器环境必须部署有这个属性,其他运行环境不一定要部署,因此不建议使用这个属性,而是使用下面这些来 Object.setPrototypeOf() (写操作)、 Object.getPrototypeOf() (读操作)、 Object.create() (生成操作)代替。
如果是不用Object,create()方法,我们是如何给对象原型添加属性和方法的?
------ 通过构造函数或者类,例如:
现在有 Object.create() 就简单的多了
输出结果中看出,添加的方法是在原型上的。就类似于
4.1)原型属性的继承
这里结合一个例子来说说这几个方法的使用:
场景:拷贝一个构造函数的实例。
打印出 实例c 看看结构是怎样的
其中 color 属性在实例上,而其他的原型上。
现在来拷贝一个 实例 c2
因为 Object.assing 是不能拷贝到继承或原型上的方法的。所以 实例c2 没有 a 这个属性。那要怎么要才能拷贝到原型上的方法呢?
4.1.1)第一种方法
这样就实现了原型属性的拷贝。
Object.getPrototypeOf(c) 既 originProto 得到的是原型上的 //{a: 1, b: 2, c: 3};
Object.create(originProto) 既 originProto2 既是创建了一个 {a: 1, b: 2, c: 3} 在原型上的新对象;
Object.assign(originProto2, c) 在源对象originProto2 上合并对象 c;
4.1.2)第二种方法 (推荐)
可以把Object.create()的参数理解为:第一个参数是放在新对象的原型上的,第二个参数是放在新对象的实例上的。
所以上面例子
Object.getPrototypeOf() 得到的是 c 对象的原型,然后作为第一个参数,所以会在新对象c2 的原型上。
Object.getOwnPropertyDescriptors() 得到是 c 对象自身属性(包括可枚举和不可枚举的),作为第二个参数,放在 c2 的实例上。
为什么说推荐这个方法呢? 因为Object.assign() 方法不能正确拷贝 get ,set 属性。
例如,我们给 c 实例添加一个 "colorGet" 属性,并设置该属性的get 描述符:
结果如下:
这里没有拷贝到 "colorGet" 的 get 描述符,而是直接把获取到的值赋值给 "colorGet" 。
那对于 get 描述符要怎么获取呢? Object.getOwnPropertyDescriptors就专为解决这问题而生。
而又因为要拷贝原型上的属性,所以结合Object.create、Object.getPrototypeOf 方法一起使用。即上面的第二种实现方法,如下:
结果如下:
此时已经成功的拷贝到了get描述符啦。
虽然说实际开发上很少会要去修改 get 描述符,但是知道多一种方法,遇到这种情况时就知道该怎么去解决了。
注意: 这些都只是一个层级的深拷贝。
上面实现 原型属性拷贝 中的两种方法中用到了 Object.getOwnPropertyDescriptors 、 Object.assing() 、 Object.create 、 Object.getPrototypeOf() 方法,通常这几种方法都有一起结合使用。
如果上面的例子还不理解,这里把他简单的拿到 对象的继承 来讲解。理解的话就可以忽略啦。
4.2)原型属性的继承
以前,继承另一个对象,常常写成下面这样。
ES6 规定 __proto__ 只有浏览器要部署,其他环境不用部署。如果去除 __proto__ ,可以用 Object.create() 和 Object.assign() 来实现。
但是 Object.assign() 无法正确拷贝get属性和set属性的问题。例如:
上图中,obj 对象的 foo 属性是一个取值函数,Object.assign不会复制这个取值函数,只会拿到值以后,将这个值赋上去。
而 Object.getOwnPropertyDescriptors() 可以解决这个问题 实现get 、set 属性的正确拷贝,即方法3 ,如下:
说了那么多种拷贝方法,怎么去选择呢,还是要看实际应用中的情况:
如果只是拷贝 自身可枚举属性,就可以只用 Object.assign 方法;
如果是要拷贝原型上的属性,就需要 Object.assign , Object.create, Object.getPrototypeOf 方法结合使用
如果是拷贝get /set 属性,就需要 结合 Ojbect.getOwnPropertyDescriptors 方法
参考资料: