JavaScript 建立物件的方式

建立物件是JavaScript中最為基礎的操作之一。

隨著ES版本的演化，建立物件的方式也不斷增加。

下面將通過程式碼例項總結一下JavaScript中建立物件的幾種方式。

一.物件直接量方式：

此方式最為簡單，也最容易被學習者所接受。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let obj={
  webName:"螞蟻部落",
  age:4,
  address:"青島市南區"
}
console.log(obj.webName);

程式碼執行效果截圖如下：

程式碼建立一個物件直接量，使用方式非常的簡單。

二.建構函式建立物件：

通過建構函式可以建立基於它的物件例項。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(webName,age){
  this.webName=webName;
  this.age=age;
  this.show=function(){
    console.log(this.webName+"成立"+this.age+"年了");
  }
}
let antzone=new Antzone("螞蟻部落",6);
antzone.show();

程式碼執行效果截圖如下：

上面程式碼通過建構函式建立一個物件例項antozne。

建構函式中的this都會指向物件例項，更多內容參閱如下兩篇文章：

（1）.JavaScript 建構函式一章節。

（2）.JavaScript new 運算子一章節。

三.Object.create方法建立物件：

此方法使用的頻率相對較少，因為它是ES5新增，具有一定的相容性問題。

或者說不少朋友還沒有習慣於使用它，使用它同樣可以建立物件。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let protObj={
  url:"http://www.softwhy.com"
}
let obj=Object.create(protObj);
console.log(obj.url);

程式碼執行效果截圖如下：

Object.create方法可以建立一個以protObj為圓形的物件。

於是上面的程式碼可以列印出url屬性值。

關於Object.create方法可以參閱Object.create()一章節。

四.通過class類建立物件：

類是ES2015新增，如果有其他面嚮物件語言基礎，將會對它很熟悉。

與Object.create方法類似，當前它的使用頻次相對較少。

但是當前ES中的class類依然是基於prototype原型，可以認為是語法糖。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
class Antzone {
  constructor(webName, age) {
    this.webName = webName;
    this.age = age;
  }
}
let antzone=new Antzone("螞蟻部落",6);
console.log(antzone.webName);

程式碼執行效果截圖如下：

上面僅是一個簡單的程式碼演示，更多內容參閱JavaScript class 類一章節。