JavaScript創建對象的四種方式

2450184176 發布于2019-08-22 18:32 / 3471人閱讀

摘要：這種方式和有異曲同工之處，因為是對象的構造函數，它的原型對象也是的方式四這種方式叫做使用對象字面量創建對象，這是最簡單的一種方式，也是我經常使用的方法，目的是在于簡化創建包含大量屬性的對象的過程。

關鍵字

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中線程的四種狀態

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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