首頁 >web前端 >js教程 >JavaScript創建物件的四種方式

JavaScript創建物件的四種方式

不言原創: 2018-07-07 17:25:321826瀏覽

這篇文章主要介紹了關於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.彩蛋

附贈兩張圖，也許有用，錵鍶~~~~
JavaScript創建物件的四種方式

#好吧，萬一打不開圖，圖一是說，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()本質上是方法，既然是方法，就涉及到在原型中遍歷該方法，當找到這個方法時，又會產生調用方法必須的堆疊信息，方法調用結束之後，又要釋放堆疊信息，所以會慢一些。

總結

這是幾種常用的創建物件的方式，我比較常用的是方式四和方式二，方式四比較直接快速，方式二經常用來做繼承之類；方式一的需要考慮兼容ES5的問題，它可以擴展一些新對象的可枚舉屬性，總感覺和defineProperty有某些聯繫吧，但是還不太懂，還煩請各位大神多多指教吧。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！