这篇文章主要介绍了关于javascript创建对象的四种方式 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
关键字
Object.create; new Object(); new Fn(); {}
背景
此段可跳过不读……
在平时的使用中，创建对象最常用的方式是使用{}直接创建，里面直接写方法和属性即可；但是在一次实践中，将这种方式创建的对象写在另外的js文件中，在HTML中就不知道怎么使用了，百度许久之后使用了Object.create的方式，想不到遇到了新的坑，这种方式只支持ES5以上，在低版本中，需要进行兼容处理，现在将这几种创建对象的方式进行整理，以便日后翻阅。
方式一： Object.create
1. 语法
var newObj = Object.create(proto, propertyObject);
参数：
proto：新创建对象的原型对象
propertyObject： 新创建对象的可枚举属性，相当于Object.defineProperty()中的第二个参数一样
返回值： 新创建的对象
var aa = { valA:1, fnA: function(){console.log(this.valA)}};var bb = Object.create(aa, { // foo会成为所创建对象的数据属性 foo: { writable:true, configurable:true, value: "hello" }, // bar会成为所创建对象的访问器属性 bar: { configurable: false, get: function() { return 10 }, set: function(value) { console.log("Setting `o.bar` to", value); } }});
登录后复制
结果是：bb可以访问的属性有：
（1）它自身的foo和bar
（2）aa的valA和fnA
且，bb.__proto__ == aa
立即学习“Java免费学习笔记（深入）”；
2.polyfill
对于ES5以下不支持这种方式的浏览器来说，可以用以下方式进行兼容，这也是Object.create的polyfill；
if (typeof Object.create !== "function") { Object.create = function (proto, propertiesObject) { if (typeof proto !== 'object' && typeof proto !== 'function') { throw new TypeError('Object prototype may only be an Object: ' + proto); } else if (proto === null) { throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument."); } if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument."); function F() {} F.prototype = proto; return new F(); };}
登录后复制
总之，记住一句话，新对象的原型是proto，proto是Object.create的第一个参数
3.彩蛋
附赠两张图，也许有用，锵锵锵~~~~
好吧，万一打不开图，图一是说，在ES5中新增的对象方法有create&keys、defineProperty，String的方法有trim，数组的方法有indexOf、filter&map、foreach。
图二是支持ES5的浏览器，其中Chrome支持还可以，IE只能到IE11才能比较好的支持；
方式二：new 构造函数
这种方式也很常用，尤其是做继承什么的，扩展性和封装性比较好
function Person(){ this.name = '****'; this.age = 11, this.getAge = function(){}}
登录后复制
可以使用
var p = new Person();
登录后复制
将p打印出来就是
{ name: '****'; age: 11, getAge: function(){}, __proto__: Object}pp.constructor == Person ==> **true**Person.__proto__ == Function.prototype ==> **true**
登录后复制
方式三：new Object()
1.创建一个空对象
var obj = new Object();
登录后复制
等价于
var obj = {};
登录后复制
可以继续进行扩展属性和方法
2.
var aa = { valA:1, fnA: function(){console.log(this.valA)}};var oo = new Object(aa);
登录后复制
结果是：
oo === aa ==> trueoo.valA = 2;console.log(aa.valA) ==> 2
登录后复制
说明oo是aa的浅拷贝，和对象直接复制一样，我也不知道为什么我要这么测试。。。。
这种方式和new Person有“异曲同工”之处，因为：
Object.__proto__ == Function.protoType
Person.__proto__ == Function.protoType
Object是对象的构造函数，它的原型对象也是Function的prototype
方式四：{}
这种方式叫做：使用对象字面量创建对象，这是最简单的一种方式，也是我经常使用的方法，目的是在于简化创建包含大量属性的对象的过程。
var person = { name: '*****', age: 11, getAge: function(){ return this.age; }, setAge: function(newAge){ this.age = newAge; } }调用时：person.nameperson['name']扩展属性时：person.hairColor = 'black';person.getName = function(){};
登录后复制
有人做过测试，这种方式比使用new Object()创建对象更快，因为{}是立即求值的，而new Object()本质上是方法，既然是方法，就涉及到在原型中遍历该方法，当找到这个方法时，又会产生调用方法必须的堆栈信息，方法调用结束之后，又要释放堆栈信息，所以会慢一些。
总结
这是几种常用的创建对象的方式，我比较常用的是方式四和方式二，方式四比较直接快速，方式二经常用来做继承之类；方式一的需要考虑兼容ES5的问题，它可以扩展一些新对象的可枚举属性，总感觉和defineProperty有某些联系吧，但是还不太懂，还烦请各位大神多多指教吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
浏览器与NodeJS的EventLoop异同以及部分机制
利用javascript判断浏览器类型
以上就是JavaScript创建对象的四种方式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2746955.html
