JavaScript创建对象的四种方式

2450184176 发布于2019-08-22 18:32 / 3389人阅读

摘要：这种方式和有异曲同工之处，因为是对象的构造函数，它的原型对象也是的方式四这种方式叫做使用对象字面量创建对象，这是最简单的一种方式，也是我经常使用的方法，目的是在于简化创建包含大量属性的对象的过程。

关键字

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 = {};

可以继续进行扩展属性和方法

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()本质上是方法，既然是方法，就涉及到在原型中遍历该方法，当找到这个方法时，又会产生调用方法必须的堆栈信息，方法调用结束之后，又要释放堆栈信息，所以会慢一些。

总结

这是几种常用的创建对象的方式，我比较常用的是方式四和方式二，方式四比较直接快速，方式二经常用来做继承之类；方式一的需要考虑兼容ES5的问题，它可以扩展一些新对象的可枚举属性，总感觉和defineProperty有某些联系吧，但是还不太懂，还烦请各位大神多多指教吧。

GPU云服务器云服务器对数据仓库分析的四种方式 activity的四种状态数据迁移的四种方法 java中线程的四种状态

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95976.html

JavaScript 异步编程的四种方式

摘要：异步编程是每个使用编程的人都会遇到的问题，无论是前端的请求，或是的各种异步。本文就来总结一下常见的四种处理异步编程的方法。利用一种链式调用的方法来组织异步代码，可以将原来以回调函数形式调用的代码改为链式调用。异步编程是每个使用 JavaScript 编程的人都会遇到的问题，无论是前端的 ajax 请求，或是 node 的各种异步 API。本文就来总结一下常见的四种处理异步编程的方法。...

microelec 2019-08-20 17:36 评论0 收藏0
[摘译]js内存泄漏常见的四种情况

摘要：本文主要选取了这篇文章中的一小部分来说明一下中产生内存泄漏的常见情况对于较难理解的第四种情况参考了一些文章来进行说明意外的全局变量中如果不用声明变量该变量将被视为对象全局对象的属性也就是全局变量上面的函数等价于所以你调用完了函数以后变量仍然本文主要选取了4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 这...

Moxmi 2019-08-19 18:04 评论0 收藏0
Javascript获取原型的四种方法

基础代码: function R(){} let obj=new R(); 2：第一种方式 console.log(Object.getPrototypeOf(obj)); 3：第二种方式 console.log(obj.__proto__); 4：第三种方式 console.log(obj.constructor.__proto__); 5:第四种方式: console.log(R.proto...

Jeffrrey 2019-08-23 14:53 评论0 收藏0
react创建组建的四种方式

摘要：原由写这篇文章主要是为了增强自己的记忆，同时也是为了分享一下我们常用的创建组建的方法，主要是四种，启发来自于不知的博客呀，有兴趣的人可以去看看他的博客叙述我们在用的时候考虑最多的其实就是如何策划组建的划分，组建的嵌套，能够做到更省时省力。原由：写这篇文章主要是为了增强自己的记忆，同时也是为了分享一下我们常用的创建组建的方法，主要是四种(createClass, component, ...

XanaHopper 2019-08-20 16:06 评论0 收藏0
ASP.NET 使用 Dispose 释放资源的四种方法

Dispose 和 Finalize 是运行的 .NET 和 .NET Core 应用程序释放占用的资源的两种方法。通常，如果应用程序中有非托管资源，应该显式地释放这些资源占用的资源。由于 Finalize 的非确定性，以及在性能方面的成本很高，因此 Dispose 方法的使用频率远高于 Finalize。其实，我们可以在一个实现了 IDisposable 接口的类型上使用 Dispose 方法。...

bovenson 2021-11-25 09:43 评论0 收藏0