JavaScript 物件導向

JavaScript是一門物件導向的語言，與其他面嚮物件語言相比具有自己的特點。

下面將從總體上對其做一下概述，不會對細節做過多介紹。

本文將解決如下幾個問題：

（1）.什麼是物件導向。

（2）.物件成員有哪些。

（3）.JavaScript實現物件導向。

一.什麼是物件導向：

經常說物件導向的程式設計，但是剛開始可能並不明白麵向物件具體含義是什麼。

通俗的講，就是將程式中的成員看做一個物件，此物件是一個整體。

物件對外會提供一些功能，但是我們並不關心這些功能具體實現細節。

就如同我們一輛汽車，它就是一個物件，它對外提供了各種功能，比如離合、方向盤等。

具體這些功能具體怎麼實現的我們並不關心，就如同jQuery，它具有各種方法：

[JavaScript] 純文字檢視 複製程式碼
$("#ant").fadeIn();
$("#ant").append();

通過$建立一個jQuery物件，然後我們就可以使用此物件提供的各種功能。

二.物件的成員：

JavaScript物件成員有：

（1）.屬性。

（2）.方法。很多時候將方法與函式混淆，嚴格講，它們區別如下：

（1）.函式是獨立存在的。

（2）.方法隸屬於一個物件。

三.JavaScript建立物件：

可以利用Object建立一個簡單物件，然後為其新增一些屬性或者方法。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
let one=new Object();
one.name="螞蟻部落一";
one.show=function(){console.log(this.name)};

let two=new Object();
two.name="螞蟻部落二";
two.show=function(){console.log(this.name)};

上述程式碼建立了兩個物件one與two，但是缺點非常明顯，每一次建立物件，所有的過程都要重新來一遍。

如果常見10個物件，程式碼量會比較大，下面對其進行改造：

[JavaScript] 純文字檢視 複製程式碼
function creatObj(name){
  let obj=new Object();
  obj.name=name;
  obj.show=function(){console.log(this.name)};
  return obj;
}

let one=creatObj("螞蟻部落一");
let two=creatObj("螞蟻部落二");

將程式碼進行一下封裝，建立一個物件只要呼叫一次函式即可。

用術語講就是用工廠方式建立物件，像車間批量生產編號不同，但規格相同的產品。

更多的時候會使用自定義建構函式建立物件，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(name,address){
  this.name=name;
  this.address=address;
  this.show=function(){
    console.log(this.name+"位於"+this.address);
  }
}
let mayi=new Antzone("螞蟻部落","青島市南區");
let baidu=new Antzone("百度","北京");
mayi.show();
baidu.show();

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

通過建構函式Antzone建立兩個物件，呼叫show方法可以列印出相關資訊。

上述程式碼並不是最優形式，改造如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(name,address){
  this.name=name;
  this.address=address;
}

Antzone.prototype.show=function(){
  console.log(this.name+"位於"+this.address);
}
let mayi=new Antzone("螞蟻部落","青島市南區");
let baidu=new Antzone("百度","北京");
mayi.show();
baidu.show();

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

功能完全相同，唯一區別是將show方法置於原型物件之上。

這樣就實現了方法的共享，可以節省一些資源，對大型程式效果更明顯。

更多物件導向的相關內容本文不再介紹，後續的相關文章會有詳細的介紹。

特別說明：ES2015之前，並不存在class類的概念，以建構函式替代。

相關閱讀：

（1）.class 類參閱JavaScript class 類一章節。

（2）.prototype原型參閱JavaScript prototype 原型一章節。