JavaScript创建对象的四种方式

来源：动视网责编：小采时间：2020-11-27 19:34:11

JavaScript创建对象的四种方式

JavaScript创建对象的四种方式:这篇文章主要介绍了关于JavaScript创建对象的四种方式，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下关键字Object.create; new Object(); new Fn(); {}背景此段可跳过不读……在平时的使用中，创建对象最常用的方式是使用{}直接创建，里

推荐度：

点击下载本文 文档为doc格式

导读JavaScript创建对象的四种方式:这篇文章主要介绍了关于JavaScript创建对象的四种方式，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下关键字Object.create; new Object(); new Fn(); {}背景此段可跳过不读……在平时的使用中，创建对象最常用的方式是使用{}直接创建，里

这篇文章主要介绍了关于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

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 ==> true
oo.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.name
person['name']
扩展属性时：
person.hairColor = 'black';
person.getName = function(){};

有人做过测试，这种方式比使用new Object()创建对象更快，因为{}是立即求值的，而new Object()本质上是方法，既然是方法，就涉及到在原型中遍历该方法，当找到这个方法时，又会产生调用方法必须的堆栈信息，方法调用结束之后，又要释放堆栈信息，所以会慢一些。