JavaScript學習筆記(五)

主要源于廖雪峰老師的JavaScript教程

面向對象編程

1. 簡介

JavaScript的面向對象編程和大多數(shù)其他語言的面向對象編程都不太一樣驮肉。其他語言的面向對象的兩個基本概念類和實例

  1. 類:類是對象的類型模板全释,例如,定義Student類來表示學生闭翩,類本身是一種類型挣郭,Student表示學生類型,但不表示任何具體的某個學生疗韵;
  2. 實例:實例是根據(jù)類創(chuàng)建的對象兑障,例如,根據(jù)Student類可以創(chuàng)建出xiaoming伶棒、xiaohong旺垒、xiaojun等多個實例彩库,每個實例表示一個具體的學生肤无,他們全都屬于Student類型。

但是在JavaScript中骇钦,不區(qū)分類和實例的概念宛渐,而是通過原型(prototype)來實現(xiàn)面向對象編程。

原型是指當我們想要創(chuàng)建xiaoming這個具體的學生時眯搭,我們并沒有一個Student類型可用窥翩。那怎么辦?恰好有這么一個現(xiàn)成的對象:

var robot = {
    name: 'Robot',
    height: 1.6,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

我們看這個robot對象有名字鳞仙,有身高寇蚊,還會跑,有點像小明棍好,干脆就根據(jù)它來“創(chuàng)建”小明得了仗岸!
于是我們把它改名為Student,然后創(chuàng)建出xiaoming

var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

var xiaoming = {
    name: '小明'
};

xiaoming.__proto__ = Student;

注意最后一行代碼把xiaoming的原型指向了對象Student借笙,看上去xiaoming仿佛是從Student繼承下來的:

xiaoming.name;  //'小明'
xiaoming.run();  // 小明 is running...

xiaoming有自己的name屬性扒怖,但并沒有定義run()方法。不過业稼,由于小明是從Student繼承而來盗痒,只要Studentrun()方法,xiaoming也可以調用:

JavaScript的原型鏈和Java的Class區(qū)別就在低散,它沒有“Class”的概念俯邓,所有對象都是實例骡楼,所謂繼承關系不過是把一個對象的原型指向另一個對象而已。

如果你把xiaoming的原型指向其他對象:

var Bird = {
    fly: function () {
        console.log(this.name + ' is flying...');
    }
};

xiaoming.__proto__ = Bird;
#現(xiàn)在xiaoming已經(jīng)無法run(),他已經(jīng)變成一只鳥:
xiaoming.fly();  //小明 is flying...

在JavaScript運行時期稽鞭,你可以把xiaomingStudeng變成Bird君编,或者任何對象。

請注意川慌,上述代碼僅用于演示目的吃嘿。在編寫JavaScript代碼時,不要直接用obj.__proto__去改變一個對象的原型梦重,并且兑燥,低版本的IE也無法使用__proto__Object.create()方法可以傳入一個原型對象琴拧,并創(chuàng)建一個基于該原型的新對象降瞳,但是新對象什么屬性都沒有,因此蚓胸,我們可以編寫一個函數(shù)來創(chuàng)建xiaoming

// 原型對象:
var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

function createStudent(name) {
    // 基于Student原型創(chuàng)建一個新對象:
    var s = Object.create(Student);
    // 初始化新對象:
    s.name = name;
    return s;
}

var xiaoming = createStudeng('小明');
xiaoming.run();
xiaoming.__proto__ === Studeng;  //true

2. 創(chuàng)建對象

JavaScript對每個創(chuàng)建的對象都會設置一個原型挣饥,指向它的原型對象。
當我們用obj.xxx訪問一個對象的屬性沛膳,JavaScript先在當前對象上查找該屬性扔枫,如果沒有找到,就到其原型對象上找锹安,如果還沒有找到短荐,就一直上溯到Object.prototype對象,最后如果還沒有找到叹哭,就只能返回undefined忍宋。

#創(chuàng)建一個Array對象
var arr = [1, 2, 3];
#其原型鏈是:
arr ---> Array.prototype ---> Object.prototype ---->null
#Array.prototype定義了indexOf(),shift()等方法,因此可以在所有的Array對象上直接調用這些方法风罩。
#創(chuàng)建一個函數(shù)
function foo() {return 0;}
#函數(shù)也是一個對象糠排,它的原型鏈是:
foo ---> Function.prototype ---> Object.prototype ---> null
#由于Function.prototype定義了apply()等方法,因此超升,所有的函數(shù)都可以調用apply()方法入宦。
  • 構造函數(shù)
    除了直接用{...}創(chuàng)建一個對象外,還可以用一種構造函數(shù)的方法來創(chuàng)建對象廓俭。先定義一個構造函數(shù):
function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
#這是一個普通函數(shù)云石,但是在JavaScript中,可以用關鍵字'new'來調用這個函數(shù)研乒,并返回一個對象
var xiaoming = new Student('小明');
xiaoming.name;  //‘小明’
xiaoming.hello();  // Hello儿奶, 小明同衣!

注意:如果不寫new承疲,就是一個普通的函數(shù)晾腔,返回undefined。但是寫了new,就變成一個構造函數(shù),綁定this指向新創(chuàng)建的對象,并默認返回this继谚,不需要在最后寫return this;.
xiaoming ------> Studeng.prototype ------> Object.prototype -----> null
new Studeng()創(chuàng)建的對象還從原型上獲得了一個constructor屬性,它指向函數(shù)Student本身:

xiaoming.constructor === Student.prototype.constructor;  //true
Student.prototype.constructor == Student;  //true
Object.getPrototypeOf(xiaoming) == Student.prototype;//true
xiaoming instanceof Student;  //true


紅色箭頭是原型鏈阵幸。注意:Student.prototype指向的對象就是xiaoming花履、xiaohong的原型對象,這個原型對象自己還有個屬性constructor,指向Student函數(shù)本身挚赊。
另外诡壁,函數(shù)Student恰好有個屬性prototype指向xiaomingxiaohong的原型對象荠割,但是xiaoming妹卿、xiaohong這些對象可沒有prototype這個屬性,不過可以用__proto__這個非標準用法來查看蔑鹦。

#不過還有一個問題夺克,注意觀察:
xiaoming.name;  //'小明'
xiaohong.name; // '小紅'
xiaoming.hello;  //function: Student.hello()
xiaohong.hello;  //function: Student.hello()
xiaoming.hello === xiaohong.hello;  //false

xiaomingxiaohong各自的hello是一個函數(shù),但它們是兩個不同的函數(shù)嚎朽,雖然函數(shù)名稱和代碼都是些相同的!
如果我們通過new Student()創(chuàng)建了很多對象铺纽,這些對象的hello函數(shù)實際上只需要共享同一個函數(shù)就可以了,這樣可以節(jié)省很多內存火鼻。
要讓創(chuàng)建的對象共享一個hello函數(shù)室囊,根據(jù)對象屬性查找原則,我們只要把hello函數(shù)移動到xiaoming魁索、xiaohong這些對象共同的原型上就可以了,也就是Student.prototype:

function Student(name) {
    this.name = name;
}
Student.prototype.hello = function() {
    alert('Hello, ' + this.name + '!');
};
  • 忘記寫new怎么辦
    strict模式下盼铁,this.name = name將報錯粗蔚,因為this綁定為undefined,在非strict模式下饶火,this.name = name不報錯鹏控,因為this綁定為window,于是無意間創(chuàng)建了全局變量name,并且返回'undefined',這個結果更糟糕。
    所以肤寝,調用構造函數(shù)千萬不要忘記寫new当辐。為了區(qū)分普通函數(shù)和構造函數(shù),按照約定鲤看,構造函數(shù)首字母應當大寫缘揪,而普通函數(shù)首字母應當小寫。
    最后,我們還可以編寫一個createStudent()函數(shù)找筝,在內部封裝所有的new操作蹈垢。一個常用的編程模式如下:
function Student(props) {
    this.name = props.name || '匿名'; // 默認值為'匿名'
    this.grade = props.grade || 1; // 默認值為1
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

function createStudent(props) {
    return new Student(props || {})
}

#這個createStudent()函數(shù)有幾個巨大的優(yōu)點:一是不需要new來調用,二是參數(shù)非常靈活袖裕,可以不傳曹抬,也可以這么傳:

var xiaoming = createStudent({
    name: '小明'
});

xiaoming.grade; // 1

3. 原型繼承

在傳統(tǒng)的基于Class的語言如Java、C++中急鳄,繼承的本質是擴展一個已有的Class谤民,并生成新的Subclass。
由于這類語言嚴格區(qū)分類和實例疾宏,繼承實際上是類型的擴展赖临。但是,JavaScript由于采用原型繼承灾锯,我們無法直接擴展一個Class兢榨,因為根本不存在Class這種類型。
先回顧Student構造函數(shù):

function Student(props) {
    this.name = props.name || 'Unnamed';
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

現(xiàn)在顺饮,我們要基于Student擴展出PrimaryStudent吵聪,可以先定義出PrimaryStudent:

function PrimaryStuent(props) {
    //調用Student構造函數(shù),綁定this變量:
    Student.call(this, props);
    this.grade = props.grade || 1;
}

但是調用了Student構造函數(shù)不等于繼承了Student兼雄,PrimaryStudent創(chuàng)建的對象的原型是:
new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ---> null
必須想辦法把原型鏈修改為:
new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null
新的基于PromaryStudent創(chuàng)建的對象不但能調用PrimaryStudent.prototype定義的方法吟逝,也可以調用Student.prototype定義的方法。

如果你想用最簡單粗暴的方法這么干:
PrimaryStudent.prototype = Student.prototype;
是不行的赦肋!如果這樣的話块攒,PrimaryStudentStudent共享一個原型對象,那還要定義PrimaryStudent干啥佃乘?

我們必須借助一個中間對象來實現(xiàn)正確的原型鏈囱井,這個中間對象的原型要指向Student.prototype。為了實現(xiàn)這一點趣避,參考道爺(就是發(fā)明JSON的那個道格拉斯)的代碼庞呕,中間對象可以用一個空函數(shù)F來實現(xiàn):

function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}
//空函數(shù)F:
function F () {
}

//把F的原型指向Student.prototype:
F.prototype = Student.prototype;

//把PrimaryStudent的原型指向一個新的F對象,F(xiàn)對象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F();

//把PrimaryStudent原型的構造函數(shù)修復為PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent;

//繼續(xù)在PrimaryStudent原型(也就是new F() 對象)上定義方法:
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

//創(chuàng)建小明
var xiaoming = new PrimaryStudent ({
    name: '小明',
    grade: 2
});

xiaoming.name;    //‘小明’
xiaoming.grade;    // 2

//驗證原型
xiaoming.__proto__ === PrimaryStudent.prototype;  //true
xiaoming.__proto__.__proto__ === Student.prototype;  //true

//驗證繼承關系:
xiaoming instanceof PrimaryStudent;  //true
xiaoming instanceof Student;  //true

用一張圖來表示新的原型鏈:


注意:函數(shù)F僅用于橋接程帕,我們僅創(chuàng)建了一個new F()實例住练,而且,沒有改變原有的Student定義的原型鏈愁拭。
如果把這個動作用一個inherits()函數(shù)封裝起來讲逛,還可以隱藏F的定義,并簡化代碼:

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child; 
}

這個inherits()函數(shù)可以復用:

function Student(props) {
    this.name = props.name || 'Unnamed';
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

//實現(xiàn)原型繼承鏈
inherits(PrimaryStudent, Student);

//綁定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

JavaScript的原型繼承實現(xiàn)方式就是:

  1. 定義新的構造函數(shù)岭埠,并在內部用call()調用希望“繼承”的構造函數(shù)盏混,并綁定this蔚鸥;
  1. 借助中間函數(shù)F實現(xiàn)原型鏈繼承,最好通過封裝的inherits函數(shù)完成括饶;
  1. 繼續(xù)在新的構造函數(shù)的原型上定義新方法株茶。

4. class繼承

在上面的章節(jié)中我們看到了JavaScript的對象模型是基于原型實現(xiàn)的,特點是簡單图焰,缺點是理解起來比傳統(tǒng)的類-實例模型要困難启盛,最大的缺點是繼承的實現(xiàn)需要編寫大量代碼,并且需要正確實現(xiàn)原型鏈技羔。

  • class簡介
    ES6開始僵闯,新的關鍵字class正式被引入到JavaScript中。class的目的就是讓定義類更簡單藤滥。
class Student {
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

class定義包含了構造函數(shù)constructor和定義在原型對象上的函數(shù)hello()(注意沒有function關鍵字),這樣就避免了Student.prototype.hello = funciton () {...}這樣分散的代碼鳖粟。

var xiaoming = new Student('小明');
xiaoming.hello();
  • class繼承
    直接通過extends來實現(xiàn):
class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name);  //記得用super調用父類的構造方法!
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

注意PrimaryStudent的定義也是class關鍵字實現(xiàn)的,而extends則表示原型鏈對象來自Student拙绊。子類的構造函數(shù)可能會和父類不太相同向图,例如,PrimaryStudent需要namegrade兩個參數(shù)标沪,并且需要通過super(name)來調用父類的構造函數(shù)榄攀,否則父類的name屬性無法正常初始化。

ES6引入的class和原有的JavaScript原型繼承有什么區(qū)別呢金句?實際上它們沒有任何區(qū)別檩赢,class的作用就是讓JavaScript引擎去實現(xiàn)原來需要我們自己編寫的原型鏈代碼。簡而言之违寞,用class的好處就是極大地簡化了原型鏈代碼贞瞒。

你一定會問,class這么好用趁曼,能不能現(xiàn)在就用上军浆?

現(xiàn)在用還早了點,因為不是所有的主流瀏覽器都支持ES6的class彰阴。如果一定要現(xiàn)在就用上瘾敢,就需要一個工具把class代碼轉換為傳統(tǒng)的prototype代碼,可以試試Babel這個工具尿这。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市庆杜,隨后出現(xiàn)的幾起案子射众,更是在濱河造成了極大的恐慌,老刑警劉巖晃财,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叨橱,死亡現(xiàn)場離奇詭異典蜕,居然都是意外死亡,警方通過查閱死者的電腦和手機罗洗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門愉舔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人伙菜,你說我怎么就攤上這事轩缤。” “怎么了贩绕?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵火的,是天一觀的道長。 經(jīng)常有香客問我淑倾,道長馏鹤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任娇哆,我火速辦了婚禮湃累,結果婚禮上,老公的妹妹穿的比我還像新娘碍讨。我一直安慰自己治力,他們只是感情好,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布垄开。 她就那樣靜靜地躺著琴许,像睡著了一般。 火紅的嫁衣襯著肌膚如雪溉躲。 梳的紋絲不亂的頭發(fā)上榜田,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機與錄音锻梳,去河邊找鬼箭券。 笑死,一個胖子當著我的面吹牛疑枯,可吹牛的內容都是我干的辩块。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼荆永,長吁一口氣:“原來是場噩夢啊……” “哼废亭!你這毒婦竟也來了?” 一聲冷哼從身側響起具钥,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤豆村,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后骂删,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體掌动,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡四啰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了粗恢。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柑晒。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖眷射,靈堂內的尸體忽然破棺而出匙赞,到底是詐尸還是另有隱情,我是刑警寧澤凭迹,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布罚屋,位于F島的核電站,受9級特大地震影響嗅绸,放射性物質發(fā)生泄漏脾猛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一鱼鸠、第九天 我趴在偏房一處隱蔽的房頂上張望猛拴。 院中可真熱鬧,春花似錦蚀狰、人聲如沸愉昆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽跛溉。三九已至,卻和暖如春扮授,著一層夾襖步出監(jiān)牢的瞬間芳室,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工刹勃, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留堪侯,地道東北人。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓荔仁,卻偏偏與公主長得像伍宦,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子乏梁,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內容

  • avaScript對每個創(chuàng)建的對象都會設置一個原型次洼,指向它的原型對象。 當我們用obj.xxx訪問一個對象的屬性時...
    源大俠閱讀 253評論 0 1
  • JavaScript 快速入門 面向對象編程創(chuàng)建對象構造函數(shù)忘記寫new怎么辦遇骑?原型繼承class繼承 面向對象編...
    染微言閱讀 263評論 0 0
  • 本文是大神廖雪峰的JavaScript教程學習筆記滓玖。并不是教程,如有需要质蕉,請前往廖雪峰大神大博客. JavaScr...
    0o凍僵的企鵝o0閱讀 328評論 0 0
  • 何倩1601342 白詩纓1601341 王汐杰1601346 龐騰睿1601344 陸小玉1601333李艷文1...
    荷小花閱讀 236評論 0 0
  • 君莫笑势篡,蒼髯白發(fā)亦匆匆 君不見,末班地鐵已敲鐘 君莫悔模暗,年華輕許他鄉(xiāng)月 君可知禁悠,涓滴汗水不是空 想當年,老子騎牛經(jīng)...
    四夕山人閱讀 262評論 0 3