詳解 javascript 的類

2016-11-3    藍(lán)藍(lán)設(shè)計的小編

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

前言

生活有度,人生添壽。

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

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

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

正文

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

1. 原型鏈和繼承

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

原型鏈

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

先初步來個demo具體解釋下原型鏈?zhǔn)钦厥掳桑?

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




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

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

demo如下:


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


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

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

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被實(shí)例化時,o.[[Prototype]]指向了fun.prototype.


使用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, 因?yàn)閐沒有繼承Object.prototype



使用 class 關(guān)鍵字

ECMAScript6 引入了一套新的關(guān)鍵字用來實(shí)現(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);//實(shí)例對象
 
//此時的原型鏈為:
//square--->Square.prototype--->Polygon.prototype--->Object.prototype--->null
//如果不理解為什么是這樣,不要緊接著往下看類的說明


繼承

其實(shí)在上面講原型鏈的時候難以避免的也提到了繼承,比如來自MDN的這個實(shí)例:

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




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

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


var object1={
    a:1,
    b:function(){
        console.log(this.a+1);
    }
}
//定義一個對象
var object2=Object.create(object1);
//調(diào)用Object.create來創(chuàng)建一個新對象,新對象的原型就是調(diào)用 create 方法時傳入的第一個參數(shù),現(xiàn)在的原型鏈?zhǔn)牵?/span>
//object2--->object1--->object1.prototype--->null
object2.d=4;
object2.a;
//1
//繼承了object1的屬性a
object2.b();
//2
//繼承了object1的方法b
Object.getPrototypeOf(object2);
//object1得到object2的原型object1


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

2. 類

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

首先,我們先看下在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實(shí)例對象
Tom.eat('貓糧');
//Tom正在吃貓糧
//繼承Animal方法
Tom.sleep();
//Tom正在睡覺
//繼承Animal方法
//現(xiàn)在的原型鏈:
//Tom(Cat實(shí)例對象)--->Cat.prototype(Animal實(shí)例對象)--->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方法 
//現(xiàn)在的原型鏈: 
//Tom(Cat實(shí)例對象)--->Cat.prototype(Animal實(shí)例對象)--->Animal.prototype--->Object.prototype--->null 


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

后記

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



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

分享本文至:

日歷

鏈接

個人資料

存檔