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()本質上是方法，既然是方法，就涉及到在原型中遍歷該方法，當找到這個方法時，又會產生調用方法必須的堆棧信息，方法調用結束以後，又要釋放堆棧信息，因此會慢一些。

總結

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