object.create与new object的区别,手写一个object.create

来源:程序思维浏览:2740次
Object.create()方法是ECMAScript5中新增的,用来规范化原型式继承的。

这个方法接收两个参数,一个是用作新对象原型的对象,和一个为新对象定义额外属性的(可选)对象。

var person = {
  name : "Nicholas",
  friends : ["John", "Jane"]  // 引用类型值属性共享
}

var onePerson = Object.create(person);  // onePerson继承person对象
onePerson.name = "Greg";
onePerson.friends.push("Mike");
console.log(onePerson.name);  // Greg
console.log(onePerson.friends);  // ["John", "Jane", "Mike"]

var anotherPerson = Object.create(person);
console.log(anotherPerson.name);  // Nicholas
anotherPerson.friends.push("Jacky");
console.log(anotherPerson.friends);  // ["John", "Jane", "Mike", "Jacky"]

// 第二个参数对象格式与Object.defineProperties()方法的第二个参数格式相同
var theOtherPerson = Object.create(person, {
              name : {
                configurable : false,  // 不可修改
                value : "Greg"
              }
});
console.log(theOtherPerson.name);  // Greg
theOtherPerson.name = "Bob";  // 失效
console.log(theOtherPerson.name);  // Greg

object.create(proto, propertiesObject)

object.create() 是使用指定的原型proto对象及其属性propertiesObject去创建一个新的对象。

proto 是必填参数,就是新创建出来的对象的原型 (新对象的 __proto__属性指向的对象),值得注意的是当proto为null的时候创建的新对象完全是一个空对象,没有原型(如图),也就是没有继承Object.prototype上的方法。(如hasOwnProperty() toString() 等)



propertiesObject是可选参数,作用就是给新对象添加新属性以及描述器(图1),需要注意的是新添加的属性是新对象自身具有的属性也就是通过hasOwnProperty() 方法可以获取到的属性,而不是添加在原型对象里(图2)。

图1
图1

 

图2
图2

自己实现一个Object.create() :

具体三个步骤就是:
创建一个对象
继承指定父对象
为新对象扩展新属性

Object.myCreate = function (obj, properties)  {
  var F = function ()  {}
  F.prototype = obj
  if (properties) {
     Object.defineProperties(F, properties)
  }
  return new F()
}

Object.myCreate({}, {a: {value: 1}})     // {a: 1}

new Object()

new 运算符是创建一个自定义对象或者具有构造函数的内置对象的实例。

使用new运算符会创建一个新的对象,它继承自构造函数的prototype,也就是说它的__proto__属性会指向构造函数的prototype,new Object() 也就是具有构造函数的内置Object的实例,新创建的对象的__proto__属性会指向Object的prototype。

扩展:实例复现new的构造过程:

var objectFactory = function ()  {
   var obj = new Object()              // 从Object.prototype上克隆一个空对象 此时 __proto__ 指向Object.prototype
   var Constructor = [].shift.call(arguments)  //取得构造器
   obj.__proto__ = Constructor.prototype  // 指向构造器的prototype
   var ret = Constructor.apply(obj, arguments) 
   return typeof ret === 'object' ? ret : obj
}

function Person (name) {
   this.name = name
}

Person.prototype.getName = function () {
   return this.name
}

var a = objectFactory(Person, 'nancy')
console.log(a.name)  // nancy
console.log(a.getName) //nancy
console.log(Object.getPrototypeOf(a)  === Person.protoType) //true

总结区别

Object.cerate() 必须接收一个对象参数,创建的新对象的原型指向接收的参数对象,new Object() 创建的新对象的原型指向的是Object.prototype。(表述有点啰嗦,简洁点说就是前者继承指定对象, 后者继承内置对象Object)

可以通过Object.create(null) 创建一个干净的对象,也就是没有原型,而 new Object() 创建的对象是 Object的实例,原型永远指向Object.prototype。
精品好课
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
收藏
扫一扫关注我们