面向對象編程

JavaScript的所有數(shù)據(jù)都可以看成對象停巷，但是我們并沒有在使用面向對象編程胖眷。

如果我們只使用Number、Array矫膨、string以及基本的{...}定義的對象差凹，還無法發(fā)揮出面向對象編程的威力。JavaScript的面向對象編程和大多數(shù)其他語言如Java侧馅、C#的面向對象編程都不太一樣危尿。如果你熟悉Java或C#，很好馁痴，你一定明白面向對象的兩個基本概念：

1. 類：類是對象的類型模板谊娇，例如，定義Student類來表示學生，類本身是一種類型济欢，Student表示學生類型赠堵，但不表示任何具體的某個學生；
2. 實例：實例是根據(jù)類創(chuàng)建的對象法褥，例如茫叭，根據(jù)Student類可以創(chuàng)建出xiaoming、xiaohong半等、xiaojun等多個實例揍愁，每個實例表示一個具體的學生，他們全都屬于Student類型杀饵。

所以莽囤，類和實例是大多數(shù)面向對象編程語言的基本概念。

不過切距，在JavaScript中朽缎，這個概念需要改一改。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...');
    }
};

于是我們把它改名為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繼承而來，只要Student有run()方法虏冻，xiaoming也可以調用：

image

JavaScript的原型鏈和Java的Class區(qū)別就在肤粱，它沒有“Class”的概念，所有對象都是實例厨相，所謂繼承關系不過是把一個對象的原型指向另一個對象而已领曼。

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

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

現(xiàn)在xiaoming已經(jīng)無法run()了，他已經(jīng)變成了一只鳥：

xioaming.fly(); //小明 is flying...

在JavaScrip代碼運行時期蛮穿，你可以把xiaoming從Student變成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;
}//這里的name只是一個形參田柔，下面改成了小明


var xiaoming = createStudent('小明');
xiaoming.run();//小明 is running
xiaoming.__proto__ === Student; //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)建一個對象外疚宇，JavaScript還可以用一種構造函數(shù)的方法來創(chuàng)建對象。它的用法是赏殃，先定義一個構造函數(shù)：

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

你會問敷待，咦，這不是一個普通函數(shù)嗎嗓奢？

這確實是一個普通函數(shù)讼撒，但是在JavaScript中，可以用關鍵字new來調用這個函數(shù)，并返回一個對象：

var xiaoming = new Student('小明');
xioaming.name;
xiaoming.hello();

注意根盒，如果不寫new钳幅，這就是一個普通函數(shù)，它返回undefined炎滞。但是敢艰，如果寫了new，它就變成了一個構造函數(shù)册赛，它綁定的this指向新創(chuàng)建的對象钠导，并默認返回this，也就是說森瘪，不需要在最后寫return this;牡属。

新創(chuàng)建的xiaoming的原型鏈是：

xiaoming ----> Student.prototype ----> Object.prototype ----> null

也就是說，xiaoming的原型指向函數(shù)Student的原型扼睬。如果你又創(chuàng)建了xiaohong逮栅、xiaojun，那么這些對象的原型與xiaoming是一樣的：

xiaoming ↘
xiaohong -→ Student.prototype ----> Object.prototype ----> null
xiaojun  ↗

用new Student()創(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

image

紅色箭頭是原型鏈措伐。注意，Student.prototype指向的對象就是xiaoming军俊、xiaohong的原型對象侥加，這個原型對象自己還有個屬性constructor，指向Student函數(shù)本身粪躬。

另外担败，函數(shù)Student恰好有個屬性prototype指向xiaoming、xiaohong的原型對象镰官，但是xiaoming氢架、xiaohong這些對象可沒有prototype這個屬性，不過可以用__proto__這個非標準用法來查看朋魔。

現(xiàn)在我們就認為xiaoming、xiaohong這些對象“繼承”自Student卿操。

不過還有一個小問題警检，注意觀察：

xiaoming.name; // '小明'
xiaohong.name; // '小紅'
xiaoming.hello; // function: Student.hello()
xiaohong.hello; // function: Student.hello()
xiaoming.hello === xiaohong.hello; // false

xiaoming和xiaohong各自的name不同，這是對的害淤，否則我們無法區(qū)分誰是誰了扇雕。

xiaoming和xiaohong各自的hello是一個函數(shù)，但它們是兩個不同的函數(shù)窥摄，雖然函數(shù)名稱和代碼都是相同的镶奉！

如果我們通過new Student()創(chuàng)建了很多對象，這些對象的hello函數(shù)實際上只需要共享同一個函數(shù)就可以了，這樣可以節(jié)省很多內存哨苛。

要讓創(chuàng)建的對象共享一個hello函數(shù)鸽凶，根據(jù)對象的屬性查找原則，我們只要把hello函數(shù)移動到xiaoming建峭、xiaohong這些對象共同的原型上就可以了玻侥，也就是Student.prototype：

image

修改代碼如下：

function Student(name) {
    this.name = name;
}

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

用new創(chuàng)建基于原型的JavaScript的對象就是這么簡單！

忘記寫new怎么辦

如果一個函數(shù)被定義為用于創(chuàng)建對象的構造函數(shù)亿蒸，但是調用時忘記了寫new怎么辦凑兰？

在strict模式下，this.name = name將報錯边锁，因為this綁定為undefined姑食，在非strict模式下，this.name = name不報錯茅坛，因為this綁定為window音半，于是無意間創(chuàng)建了全局變量name，并且返回undefined灰蛙，這個結果更糟糕祟剔。

所以，調用構造函數(shù)千萬不要忘記寫new摩梧。為了區(qū)分普通函數(shù)和構造函數(shù)物延，按照約定，構造函數(shù)首字母應當大寫仅父，而普通函數(shù)首字母應當小寫叛薯，這樣，一些語法檢查工具如jslint將可以幫你檢測到漏寫的new笙纤。

最后耗溜，我們還可以編寫一個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

如果創(chuàng)建的對象有很多屬性阿宅，我們只需要傳遞需要的某些屬性，剩下的屬性可以用默認值笼蛛。由于參數(shù)是一個Object洒放，我們無需記憶參數(shù)的順序。如果恰好從JSON拿到了一個對象滨砍，就可以直接創(chuàng)建出xiaoming往湿。

練習

請利用構造函數(shù)定義Cat妖异，并讓所有的Cat對象有一個name屬性，并共享一個方法say()领追，返回字符串'Hello, xxx!'：

'use strict';
//答案如下
function Cat(name) {
    this.name = name;
}
Cat.prototype.say = function () {
    return ('Hello, ' + this.name + '!');
}

// 測試:
var kitty = new Cat('Kitty');
var doraemon = new Cat('哆啦A夢');
if (kitty && kitty.name === 'Kitty' && kitty.say && typeof kitty.say === 'function' && kitty.say() === 'Hello, Kitty!' && kitty.say === doraemon.say) {
    console.log('測試通過!');
} else {
    console.log('測試失敗!');
}

原型繼承

在傳統(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 + '!');
}

以及Student的原型鏈：

image

現(xiàn)在葬燎，我們要基于Student擴展出PrimaryStudent误甚，可以先定義出PrimaryStudent：

function PrimaryStudent(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

這樣，原型鏈對了壕探，繼承關系就對了冈钦。新的基于PrimaryStudent創(chuàng)建的對象不但能調用PrimaryStudent.prototype定義的方法，也可以調用Student.prototype定義的方法李请。

如果你想用最簡單粗暴的方法這么干：

PrimaryStudent.prototype = Student.prototype;

是不行的瞧筛！如果這樣的話，PrimaryStudent和Student共享一個原型對象导盅，那還要定義PrimaryStudent干啥较幌？

我們必須借助一個中間對象來實現(xiàn)正確的原型鏈，這個中間對象的原型要指向Student.prototype白翻。為了實現(xiàn)這一點乍炉，參考道爺（就是發(fā)明JSON的那個道格拉斯）的代碼，中間對象可以用一個空函數(shù)F來實現(xiàn)：

//PrimaryStudent構造函數(shù)滤馍；
function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

//空函數(shù)F:
function F () {
}

//把F的原型指向Student.prototype:
F.protoype = 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)建xiaoming:
var xiaoming = new PrimaryStudent({
    name: '小明',
    grade: 2
});
xiaoming.name;
xiaoming.grade;

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

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

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

image

注意，函數(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；

2. 借助中間函數(shù)F實現(xiàn)原型鏈繼承倦炒，最好通過封裝的inherits函數(shù)完成显沈；

3. 繼續(xù)在新的構造函數(shù)的原型上定義新方法。

class繼承

在上面的章節(jié)中我們看到了JavaScript的對象模型是基于原型實現(xiàn)的逢唤，特點是簡單拉讯，缺點是理解起來比傳統(tǒng)的類－實例模型要困難，最大的缺點是繼承的實現(xiàn)需要編寫大量代碼鳖藕，并且需要正確實現(xiàn)原型鏈魔慷。

有沒有更簡單的寫法？有著恩！

新的關鍵字class從ES6開始正式被引入到JavaScript中院尔。class的目的就是讓定義類更簡單。

我們先回顧用函數(shù)實現(xiàn)Student的方法：

function Student(name) {
    this.name = name;
}

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

如果用新的class關鍵字來編寫Student喉誊，可以這樣寫：

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

比較一下就可以發(fā)現(xiàn)邀摆，class的定義包含了構造函數(shù)constructor和定義在原型對象上的函數(shù)hello()（注意沒有function關鍵字），這樣就避免了Student.prototype.hello = function () {...}這樣分散的代碼伍茄。

最后栋盹，創(chuàng)建一個Student對象代碼和前面章節(jié)完全一樣：

var xiaoming = new Student('小明')；
xiaoming.hello();

class繼承

用class定義對象的另一個巨大的好處是繼承更方便了幻林。想一想我們從Student派生一個PrimaryStudent需要編寫的代碼量≌甓ⅲ現(xiàn)在，原型繼承的中間對象沪饺，原型對象的構造函數(shù)等等都不需要考慮了躏敢，直接通過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需要name和grade兩個參數(shù)遭居，并且需要通過super(name)來調用父類的構造函數(shù)啼器，否則父類的name屬性無法正常初始化。

PrimaryStudent已經(jīng)自動獲得了父類Student的hello方法俱萍，我們又在子類中定義了新的myGrade方法端壳。

ES6引入的class和原有的JavaScript原型繼承有什么區(qū)別呢？實際上它們沒有任何區(qū)別枪蘑，class的作用就是讓JavaScript引擎去實現(xiàn)原來需要我們自己編寫的原型鏈代碼损谦。簡而言之岖免，用class的好處就是極大地簡化了原型鏈代碼。

你一定會問照捡，class這么好用颅湘，能不能現(xiàn)在就用上？

現(xiàn)在用還早了點栗精，因為不是所有的主流瀏覽器都支持ES6的class闯参。如果一定要現(xiàn)在就用上，就需要一個工具把class代碼轉換為傳統(tǒng)的prototype代碼悲立，可以試試Babel這個工具鹿寨。

練習

請利用class重新定義Cat，并讓它從已有的Animal繼承级历，然后新增一個方法say()释移，返回字符串'Hello, xxx!'：

'use strict';

class Animal {
    constructor(name) {
        this.name = name;
    }
}

//在下方寫出代碼
class Cat extends Animal{
    constructor(name){
        super(name);
    }
    say(){
        return 'Hello, '+this.name+'!';
    }

}
    
// 測試:
var kitty = new Cat('Kitty');
var doraemon = new Cat('哆啦A夢');
if ((new Cat('x') instanceof Animal) && kitty && kitty.name === 'Kitty' && kitty.say && typeof kitty.say === 'function' && kitty.say() === 'Hello, Kitty!' && kitty.say === doraemon.say) {
    console.log('測試通過!');
} else {
    console.log('測試失敗!');
}