主要源于廖雪峰老師的JavaScript教程
面向對象編程
1. 簡介
JavaScript的面向對象編程和大多數(shù)其他語言的面向對象編程都不太一樣驮肉。其他語言的面向對象的兩個基本概念類和實例
:
- 類:類是對象的類型模板全释,例如,定義Student類來表示學生闭翩,類本身是一種類型挣郭,Student表示學生類型,但不表示任何具體的某個學生疗韵;
- 實例:實例是根據(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
繼承而來盗痒,只要Student
有run()
方法,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運行時期稽鞭,你可以把xiaoming
從Studeng
變成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
指向xiaoming
、xiaohong
的原型對象荠割,但是xiaoming
妹卿、xiaohong
這些對象可沒有prototype
這個屬性,不過可以用__proto__
這個非標準用法來查看蔑鹦。
#不過還有一個問題夺克,注意觀察:
xiaoming.name; //'小明'
xiaohong.name; // '小紅'
xiaoming.hello; //function: Student.hello()
xiaohong.hello; //function: Student.hello()
xiaoming.hello === xiaohong.hello; //false
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
:
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;
是不行的赦肋!如果這樣的話块攒,PrimaryStudent
和Student
共享一個原型對象,那還要定義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)方式就是:
- 定義新的構造函數(shù)岭埠,并在內部用
call()
調用希望“繼承”的構造函數(shù)盏混,并綁定this
蔚鸥;
- 借助中間函數(shù)
F
實現(xiàn)原型鏈繼承,最好通過封裝的inherits
函數(shù)完成括饶;
- 繼續(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
需要name
和grade
兩個參數(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這個工具尿这。