這篇文章主要介紹了關於JavaScript創建物件的四種方式，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
# Object.create; new Object(); new Fn(); {}
#此段落可跳過不讀…
在平時的使用中，創建物件最常用的方式是使用{}直接創建，裡面直接寫方法和屬性即可；但是在一次實踐中，將這種方式創建的物件寫在另外的js文件中，在HTML中就不知道怎麼使用了，百度許久之後使用了Object.create的方式，想不到遇到了新的坑，這種方式只支持ES5以上，在低版本中，需要進行兼容處理，現在將這幾種建立物件的方式進行整理，以便日後翻閱。
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
對於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的第一個參數
附贈兩張圖，也許有用，錵鍶~~~~
#好吧，萬一打不開圖，圖一是說，ES5新增的物件方法有create&keys、defineProperty，String的方法有trim，陣列的方法有indexOf、filter&map、foreach。
圖二是支援ES5的瀏覽器，其中Chrome支援還可以，IE只能到IE11才能比較好的支援；
這種方式也很常用，尤其是做繼承什麼的，擴展性和封裝性比較好
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**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有某些聯繫吧，但是還不太懂，還煩請各位大神多多指教吧。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是JavaScript創建物件的四種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
