如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

前言

生活有度，人生添壽。

Javascript從當初的一個“彈窗語言”，一步步發(fā)展成為現(xiàn)在前后端通吃的龐然大物。javascript的受歡迎程度也是與日俱增，今年編程語言又是花落javascript，這實在是一個充滿了活力的語言。如今，隨隨便一個網(wǎng)頁javascript代碼量都不下數(shù)千行，要是node后端那更不止幾千行了。（WTF）代碼量的增加給編程帶來的首要的問題就是如何去編寫和維護如此龐大的代碼呢？答案就是模塊化思想，其實就是面向?qū)ο螅∣OP）編程，如今比較流行的三大前端框架（angular,react,vue）基本都實現(xiàn)了組件化編程，但組件化和我們所說的模塊化又有所不同，應(yīng)該可以這么理解，組件化是模塊化的升級版，模塊化是組件化的基礎(chǔ)。那么，問題來了，javascript怎么面向?qū)ο缶幊棠兀课蚁脒@很多老鳥也不定說的清楚吧，前端雜而活躍的各種社區(qū)，很多前端er一度依賴各種插件，根本不需要去了解這些深層的東西卻照樣能完成任務(wù)。但我想作為一個有追求的前端er還是很有必要去學習這些看似用不著的東西的，別的不說，就單單因為我們是前端er,只會用jquery一個稍微厲害的后端都能代替你。好吧，廢話不多說，到底如何面向?qū)ο骳oding呢…..

很不幸，es5中并沒有給出明確的定義‘類’的概念，所以傳統(tǒng)的面向?qū)ο缶幊趟坪跏切胁煌ǖ?，那么又該腫么辦呢？值得慶幸的是，前輩們通過不斷探索總結(jié)，成功的用javascript模擬出了“類”。那么，javascript的類又該怎么定義呢？

在面向?qū)ο缶幊讨?，類（class）是對象（object）的模板，定義了同一組對象（又稱”實例”）共有的屬性和方法。

正文

說到j(luò)avascript中的“類”就不得不說原型鏈和繼承了，因為javascript是沒有真正意義上的類的，所謂的類就是基于原型鏈和繼承來實現(xiàn)的，即使ES6中加入了class,extends關(guān)鍵字實現(xiàn)類和繼承，但實際上還是基于原型鏈和繼承， ES6 類（class）是 JavaScript 現(xiàn)有的原型繼承的語法糖。

1. 原型鏈和繼承

“ 在 javaScript 中，每個對象都有一個指向它的原型（prototype）對象的內(nèi)部鏈接。這個原型對象又有自己的原型，直到某個對象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環(huán)。這種一級一級的鏈結(jié)構(gòu)就稱為原型鏈（prototype chain）。 ”

原型鏈

實際上在定義一個對象的時候原型鏈本身就已經(jīng)生成了，javascript處處皆對象的思想放在這里理解起來就很容易了，看完后你會發(fā)現(xiàn)萬物始于Object.prototype。那么我們都是如何定義一個對象的呢，博主總結(jié)的方法如下幾個：

先初步來個demo具體解釋下原型鏈是咋回事吧：

來來來，擼袖子搞出個對象?。。。R上狗節(jié)，單身狗請自覺閱讀完此篇博客）

• 使用普通方法來創(chuàng)建一個對象

demo如下:

使用構(gòu)造函數(shù)的方法

在 JavaScript 中，構(gòu)造器其實就是一個普通的函數(shù)。當使用 new 操作符 來作用這個函數(shù)時，它就可以被稱為構(gòu)造方法（構(gòu)造函數(shù)）?！狹DN

demo如下：

使用Object.create創(chuàng)建對象

ECMAScript 5 中引入了一個新方法：Object.create()。可以調(diào)用這個方法來創(chuàng)建一個新對象。新對象的原型就是調(diào)用 create 方法時傳入的第一個參數(shù)：

var a = {a: 1};

// a ---> Object.prototype ---> null

 

var b = Object.create(a);

// b ---> a ---> Object.prototype ---> null

console.log(b.a); // 1 (繼承而來)繼承概念下面會講

 

var c = Object.create(b);

// c ---> b ---> a ---> Object.prototype ---> null

 

var d = Object.create(null);

// d ---> null

console.log(d.hasOwnProperty); // undefined, 因為d沒有繼承Object.prototype

使用 class 關(guān)鍵字

ECMAScript6 引入了一套新的關(guān)鍵字用來實現(xiàn) class。使用基于類語言的開發(fā)人員會對這些結(jié)構(gòu)感到熟悉，但它們是不一樣的。 JavaScript 仍然是基于原型的。這些新的關(guān)鍵字包括 class, constructor, static, extends, 和 super.

"use strict";

 

class Polygon {

  constructor(height, width) {

    this.height = height;

    this.width = width;

  }

}

//定義一個類Polygon

class Square extends Polygon {

  constructor(sideLength) {

    super(sideLength, sideLength);

  }//使用super引用父類

  get area() {

    return this.height * this.width;

  }

  set sideLength(newLength) {

    this.height = newLength;

    this.width = newLength;

  }

}

//使用extends定義Squeare繼承父類Polygon

var square = new Square(2);//實例對象

 

//此時的原型鏈為：

//square--->Square.prototype--->Polygon.prototype--->Object.prototype--->null

//如果不理解為什么是這樣，不要緊接著往下看類的說明

繼承

其實在上面講原型鏈的時候難以避免的也提到了繼承，比如來自MDN的這個實例：

—-以上內(nèi)容來自MDN繼承與原型鏈

我想看到這里還是有些似懂非懂吧，那么來個例子吧：

我想現(xiàn)在應(yīng)該是明白了吧，再不明白博主也是無能為力了，表達能力實在有限。

2. 類

總算說到類了，由于javascript的類基于原型鏈和繼承，因此在上面的內(nèi)容中就已經(jīng)定義了很多的類。咱們javascript的類同樣能實現(xiàn)傳統(tǒng)類的多態(tài)，封裝，繼承等特性，這里主要講解了繼承這個概念，但實際上很多時候不經(jīng)意可能就用了這三個特性。很好玩不是么

首先，我們先看下在ES5中定義一個類的形式：

    }

}

好的，然后我們看下在ES6中改寫上面的類：

定義一個類的方法實際上也是上面所說的定義一個對象的方法，類本身就是一個對象，只不過這個對象里面的方法和屬性可以供許多實例對象調(diào)用而已。

后記

總的來說對于類的理解還是需要不斷探索的，路漫漫其修遠兮，吾將上下而求索。

藍藍設(shè)計( www.alimai.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)