JavaScript基礎⑤ES6中的面向對象

接續上篇JavaScript基礎④基于原型的面向對象編程

前言

面向對象語言的基本特征:封裝,繼承,多態 。 這是我們在學Java的時候,首先映入眼簾的一句話 。封裝 - 顧名思義就是將一些東西(屬性,方法)藏起來 , 不讓外部調用的人知道 , 防止出現使用不當 。 繼承 - 萬事萬物皆為天地所化 , 同出一門而變化萬千 , 既有相同之處又有差異之所 。繼承就是將共有的特征特質向下傳遞 , 父傳子,子傳孫 , 孫又傳孫 , 子子孫孫無窮盡也 。多態 - 萬物終有始焉 , 而好事者歸為類 , 譬如:鳥類 , 人類 , 然,多態始于繼承 , 子繼承有父之功 , 而可完成父之功也 。

在上篇文章中 , 我們大致了解了JavaScript基于引用的面向對象特征 , 但終歸寫起來比較麻煩 , 在ES6標準中 , 已經可以使用class作為類的關鍵字了 , 有了常規的面向的的寫法了 , 但內部實現原理差不多 , 只是添加了class及一些面向對象的語法糖 。使用的時候 , 需要考慮兼容性。

ES6面向對象

ECMAScript是一種由Ecma國際通過ECMA-262標準化的腳本程序設計語言。這種語言在萬維網上應用廣泛,它往往被稱為JavaScript或JScript,但實際上后兩者是ECMA-262標準的實現和擴展。 -- 百度百科

基于原型的面向對象

// 基于原型 , 創建一個Person類
function Person() {
    // 類的屬性
    Person.prototype.name = "zeno";
    Person.prototype.age = 20;
    Person.prototype.job = "Software Engineer";
    // 類的方法
    Person.prototype.sayHello = function(){
                alert("Hello "+this.name);
            };
}

// 創建Person對象
var person = new Person();
alert(person.name); // out : zeno
person.sayHello(); // out : Hello zeno

基于原型的面向對象 , 寫法上比較繁瑣 , 需要使用原型對象屬性 。

ES6 對象寫法

class Person {
    constructor() {
        var name ;
    }
    doSomthing() {
        console.log('es6面向對象');
    }
}

var p = new Person();
p.doSomthing(); // out : es6面向對象

ES6標準的面向對象語法 ,比較像java的寫法 , 但又有些不同 , JavaScript中不能定義類屬性 。

嘗試類屬性

class Person {
    var name ;
}  // out : es6.html:29 Uncaught SyntaxError: Unexpected identifier

在JavaScript中不支持這種寫法。

繼承 - extends

可以看出和Java的語法有點相像了 , 不過這種寫法好像很多語言都實現了 , 例如PHP

// 父類
class Person {
    constructor() {
        this.name = 'zeno';
    }
    doSomthing() {
        console.log('es6面向對象');
    }
}

// 子類
class Human extends Person {
    constructor() {
        super();
        this.job = 'software enginner' ;
    }
}


var h = new Human();
console.log(h.name); // zeno
console.log(h.job); // software enginner
console.log(h.doSomthing()); // 會調用兩次 ,第一次es6面向對象 , 第二次undefined

調用console.log(h.doSomthing());會調用兩次 , 初步估計是兩個類,各實例化了一次 , 每個對象調用一次doSomthing() , 父類輸出 , 子類因沒有這個方法 , 而產生了undefined 。但我在子類實現了doSomthing()方法 , 結果還是執行了兩次 , 這讓我不明就里 , 暫且擱置 , 希望知道的有心人士解惑之 。

多態

JavaScript天生支持多態 , 因為JavaScript是動態語言,沒有類型的向上向下轉性 , 方便了很多 。

封裝

JavaScript在ES6中貌似支持封裝 , 但實驗了一下 , 并不可以 ,沒有語法上的支持 , 就目前來看 , 這是JavaScript最弱的一部分了 。

不可行的封裝

class Dog {
    constructor() {
        this._name = 'lily';

         this.age = 10 ;
    }

    getDogName() {
        return this._name;
    }

    get Age() {
        return this.age ;
    }

}

var d = new Dog();
console.log(d._name); // out : lily 可以訪問到

JavaScript ES6中 , 默認以下劃線開頭的屬性為私有屬性或方法 , 然而并沒有什么卵用 , 一樣可以訪問 。

結語

JavaScript在不斷的發展 , 尤其這幾年 , 發展尤其迅速 , 各種庫 , 如雨后春筍般迸發 , 并應用于各個行業和領域 ,并一度向全棧發展 。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,321評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,559評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,442評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,835評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,581評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,922評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,931評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,096評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,639評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,374評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,591評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,104評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,789評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,196評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,524評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,322評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,554評論 2 379

推薦閱讀更多精彩內容

  • 面向對象程序設計(英語:Object-oriented programming,縮寫:OOP)是種具有對象概念的程...
    Dimen_閱讀 469評論 0 2
  • 0 寫在前面的話 大多數的面向對象編程語言中,比如C++和Java,在使用他們完成任務之前,必須創建類(class...
    自度君閱讀 1,013評論 0 3
  • 本文先對es6發布之前javascript各種繼承實現方式進行深入的分析比較,然后再介紹es6中對類繼承的支持以及...
    lazydu閱讀 16,717評論 7 44
  • 博客內容:什么是面向對象為什么要面向對象面向對象編程的特性和原則理解對象屬性創建對象繼承 什么是面向對象 面向對象...
    _Dot912閱讀 1,445評論 3 12
  • 我們在十一點的夜里步行這算得上是深夜,年輕人的天黑地面是雨后的地面,小雨沒能洗凈一切泥土和深秋的落葉我們談論工作,...
    羅陸離閱讀 169評論 1 4