詳解javascript的類

前言

生活有度，人生添壽。

原文地址：詳解javascript的類

博主部落格地址：Damonare的個人部落格

  Javascript從當初的一個“彈窗語言”，一步步發展成為現在前後端通吃的龐然大物。javascript的受歡迎程度也是與日俱增，今年最受歡迎程式設計語言又是花落javascript，這實在是一個充滿了活力的語言。如今，隨隨便一個網頁javascript代碼量都不下數千行，要是node後端那更不止幾千行了。（WTF）代碼量的增加給編程帶來的首要的問題就是如何去編寫和維護如此龐大的代碼呢。答案就是模組化思想，其實就是物件導向（OOP）編程，如今比較流行的三大前端架構（angular,react,vue）基本都實現了組件化編程，但組件化和我們所說的模組化又有所不同，應該可以這麼理解，組件化是模組化的升級版，模組化是組件化的基礎。那麼，問題來了，javascript怎麼物件導向編程呢。我想這很多老鳥也不定說的清楚吧，前端雜而活躍的各種社區，很多前端er一度依賴各種外掛程式，根本不需要去瞭解這些深層的東西卻照樣能完成任務。但我想作為一個有追求的前端er還是很有必要去學習這些看似用不著的東西的，別的不說，就單單因為我們是前端er,只會用jquery一個稍微厲害的後端都能代替你。好吧，廢話不多說，到底如何物件導向coding呢…..

  很不幸，es5中並沒有給出明確的定義‘類’的概念，所以傳統的物件導向編程似乎是行不通的，那麼又該腫麼辦呢。值得慶幸的是，前輩們通過不斷探索總結，成功的用javascript類比出了“類”。那麼，javascript的類又該怎麼定義呢。

在物件導向編程中，類（class）是對象（object）的模板，定義了同一組對象（又稱”執行個體”）共有的屬性和方法。 本文

說到javascript中的“類”就不得不說原型鏈和繼承了，因為javascript是沒有真正意義上的類的，所謂的類就是基於原型鏈和繼承來實現的，即使ES6中加入了class,extends關鍵字實作類別和繼承，但實際上還是基於原型鏈和繼承， ES6 類（class）是 JavaScript 現有的原型繼承的文法糖。 1. 原型鏈和繼承

“
在 javaScript 中，每個對象都有一個指向它的原型（prototype）對象的內部連結。這個原型對象又有自己的原型，直到某個對象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最後一環。這種一級一級的鏈結構就稱為原型鏈（prototype chain）。
”
原型鏈

實際上在定義一個對象的時候原型鏈本身就已經產生了，javascript處處皆對象的思想放在這裡理解起來就很容易了，看完後你會發現萬物始於Object.prototype。那麼我們都是如何定義一個對象的呢，博主總結的方法如下幾個：

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

//someObject.[[Prototype]] 符號是用於指派 someObject 的原型。這個等同於 JavaScript 的 __proto__  屬性（現已棄用）。。從 ES6 開始, [[Prototype]] 可以用Object.getPrototypeOf()和Object.setPrototypeOf()訪問器來訪問。這個方法可以放心使用博主親測，主流瀏覽器已經支援了// 假定有一個對象 o, 其自身的屬性（own properties）有 a 和 b：// {a: 1, b: 2}// o 的原型 o.[[Prototype]]有屬性 b 和 c：// {b: 3, c: 4}// 最後, o.[[Prototype]].[[Prototype]] 是 null.// 這就是原型鏈的末尾，即 null，// 根據定義，null 沒有[[Prototype]].// 綜上，整個原型鏈如下:// {a:1, b:2}---> {b:3, c:4} ---> null

來來來，擼袖子搞出個對象。。。（馬上狗節，單身狗請自覺閱讀完此篇部落格） 使用普通方法來建立一個對象

demo如下:

var o={    a:0,    b:function(){        console.log(this.a)    }}//建立一個對象//原型鏈如下：//o--->Object.prototype--->nullvar a = ["yo", "whadup", "?"];//建立一個數組對象//(indexOf, forEach等方法都是從它繼承而來).//原型鏈如下：//a--->Array.prototype ---> Object.prototype ---> nullfunction f(){  return 1;}//建立一個函數對象//(call, bind等方法都是從它繼承而來)://原型鏈如下：//f ---> Function.prototype ---> Object.prototype ---> nullvar date=new Date();//建立一個日期對象//原型鏈如下：//date--->Date.prototype--->Object.pprototype--->null

使用建構函式的方法

在 JavaScript 中，構造器其實就是一個普通的函數。當使用 new 操作符 來作用這個函數時，它就可以被稱為構造方法（建構函式）。——MDN

demo如下：

function fun(){    this.propA='prop';    this.propB=3;}fun.prototype={    methodA:function(){        console.log(this.propA)    }}var o=new fun();o.methodA();//prop// o是產生的對象,他的自身屬性有'propA'和'propB'.// 在o被執行個體化時,o.[[Prototype]]指向了fun.prototype.

使用Object.create建立對象

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

var a = {a: 1};// a ---> Object.prototype ---> nullvar b = Object.create(a);// b ---> a ---> Object.prototype ---> nullconsole.log(b.a); // 1 (繼承而來)繼承概念下面會講var c = Object.create(b);// c ---> b ---> a ---> Object.prototype ---> nullvar d = Object.create(null);// d ---> nullconsole.log(d.hasOwnProperty); // undefined, 因為d沒有繼承Object.prototype

使用 class 關鍵字

ECMAScript6 引入了一套新的關鍵字用來實現 class。使用基於類語言的開發人員會對這些結構感到熟悉，但它們是不一樣的。 JavaScript 仍然是基於原型的。這些新的關鍵字包括 class, constructor, static, extends, 和 super.

"use strict";class Polygon {  constructor(height, width) {    this.height = height;    this.width = width;  }}//定義一個類Polygonclass 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繼承父類Polygonvar square = new Square(2);//執行個體對象//此時的原型鏈為：//square--->Square.prototype--->Polygon.prototype--->Object.prototype--->null//如果不理解為什麼是這樣，不要緊接著往下看類的說明

繼承

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

// 假定有一個對象 o, 其自身的屬性（own properties）有 a 和 b：// {a: 1, b: 2}// o 的原型 o.[[Prototype]]有屬性 b 和 c：（someObject.[[Prototype]] 符號是用於指派 someObject 的原型。這個等同於 JavaScript 的 __proto__  屬性（現已棄用）。。從 ES6 開始, [[Prototype]] 可以用Object.getPrototypeOf()和Object.setPrototypeOf()訪問器來訪問。）// {b: 3, c: 4}// 最後, o.[[Prototype]].[[Prototype]] 是 null.// 這就是原型鏈的末尾，即 null，// 根據定義，null 沒有[[Prototype]].// 綜上，整個原型鏈如下:// {a:1, b:2} ---> {b:3, c:4} ---> nullconsole.log(o.a); // 1// a是o的自身屬性嗎。是的，該屬性的值為1console.log(o.b); // 2// b是o的自身屬性嗎。是的，該屬性的值為2// o.[[Prototype]]上還有一個'b'屬性,但是它不會被訪問到.這種情況稱為"屬性遮蔽 (property shadowing)".console.log(o.c); // 4// c是o的自身屬性嗎。不是，那看看o.[[Prototype]]上有沒有.// c是o.[[Prototype]]的自身屬性嗎。是的,該屬性的值為4console.log(o.d); // undefined// d是o的自身屬性嗎。不是,那看看o.[[Prototype]]上有沒有.// d是o.[[Prototype]]的自身屬性嗎。不是，那看看o.[[Prototype]].[[Prototype]]上有沒有.// o.[[Prototype]].[[Prototype]]為null，停止搜尋，// 沒有d屬性，返回undefined

—-以上內容來自MDN繼承與原型鏈

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

var object1={    a:1,    b:function(){        console.log(this.a+1);    }}//定義一個對象var object2=Object.create(object1);//調用Object.create來建立一個新對象,新對象的原型就是調用 create 方法時傳入的第一個參數,現在的原型鏈是：//object2--->object1--->object1.prototype--->nullobject2.d=4;object2.a;//1//繼承了object1的屬性aobject2.b();//2//繼承了object1的方法bObject.getPrototypeOf(object2);//object1得到object2的原型object1

我想現在應該是明白了吧，再不明白博主也是無能為力了，表達能力實在有限。 2. 類

總算說到類了，由於javascript的類基於原型鏈和繼承，因此在上面的內容中就已經定義了很多的類。咱們javascript的類同樣能實現傳統類的多態，封裝，繼承等特性，這裡主要講解了繼承這個概念，但實際上很多時候不經意可能就用了這三個特性。很好玩不是麼

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

function Animal(name) {    this.name = name;    this.sleep = function() {        console.log(this.name+'正在睡覺');    }}//定義Animal類Animal.prototype = {    eat: function(food) {        console.log(this.name+"正在吃"+food);    }}function Cat() {}Cat.prototype = new Animal('Tom');var Tom = new Cat('Tom');/Cat執行個體對象Tom.eat('貓糧');//Tom正在吃貓糧//繼承Animal方法Tom.sleep();//Tom正在睡覺//繼承Animal方法//現在的原型鏈：//Tom(Cat執行個體對象)--->Cat.prototype(Animal執行個體對象)--->Animal.prototype--->Object.prototype--->null

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

class Animal {  constructor(name) {    this.name = name;  }  sleep() {    console.log(this.name + ' 正在睡覺');  }  eat(food){    console.log(this.name+'正在吃'+food)    }}class Cat extends Animal {}const Tom = new Cat('Tom');Tom.eat('貓糧');//Tom正在吃貓糧//繼承Animal方法Tom.sleep();//Tom正在睡覺//繼承Animal方法//現在的原型鏈：//Tom(Cat執行個體對象)--->Cat.prototype(Animal執行個體對象)--->Animal.prototype--->Object.prototype--->null

定義一個類的方法實際上也是上面所說的定義一個對象的方法，類本身就是一個對象，只不過這個對象裡面的方法和屬性可以供許多執行個體對象調用而已。 後記

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