JavaScript的所有數(shù)據(jù)都可以看成對(duì)象,那是不是我們已經(jīng)在使用面向?qū)ο缶幊塘四兀?/p>
當(dāng)然不是。如果我們只使用Number、Array、string以及基本的{...}定義的對(duì)象,還無(wú)法發(fā)揮出面向?qū)ο缶幊痰耐Α?/p>
JavaScript的面向?qū)ο缶幊毯痛蠖鄶?shù)其他語(yǔ)言如Java、C#的面向?qū)ο缶幊潭疾惶粯印H绻闶煜ava或C#,很好,你一定明白面向?qū)ο蟮膬蓚€(gè)基本概念:
1.類:類是對(duì)象的類型模板,例如,定義Student類來表示學(xué)生,類本身是一種類型,Student表示學(xué)生類型,但不表示任何具體的某個(gè)學(xué)生;
2.實(shí)例:實(shí)例是根據(jù)類創(chuàng)建的對(duì)象,例如,根據(jù)Student類可以創(chuàng)建出xiaoming、xiaohong、xiaojun等多個(gè)實(shí)例,每個(gè)實(shí)例表示一個(gè)具體的學(xué)生,他們?nèi)紝儆赟tudent類型。
所以,類和實(shí)例是大多數(shù)面向?qū)ο缶幊陶Z(yǔ)言的基本概念。
不過,在JavaScript中,這個(gè)概念需要改一改。JavaScript不區(qū)分類和實(shí)例的概念,而是通過原型(prototype)來實(shí)現(xiàn)面向?qū)ο缶幊獭?/p>
原型是指當(dāng)我們想要?jiǎng)?chuàng)建xiaoming這個(gè)具體的學(xué)生時(shí),我們并沒有一個(gè)Student類型可用。那怎么辦?恰好有這么一個(gè)現(xiàn)成的對(duì)象:
var robot = { name: 'Robot', height: 1.6, run: function () { console.log(this.name + ' is running...'); }};
我們看這個(gè)robot對(duì)象有名字,有身高,還會(huì)跑,有點(diǎn)像小明,干脆就根據(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的原型指向了對(duì)象Student,看上去xiaoming仿佛是從Student繼承下來的:
xiaoming.name; // '小明'xiaoming.run(); // 小明 is running...
xiaoming有自己的name屬性,但并沒有定義run()方法。不過,由于小明是從Student繼承而來,只要Student有run()方法,xiaoming也可以調(diào)用:
JavaScript的原型鏈和Java的Class區(qū)別就在,它沒有“Class”的概念,所有對(duì)象都是實(shí)例,所謂繼承關(guān)系不過是把一個(gè)對(duì)象的原型指向另一個(gè)對(duì)象而已。
如果你把xiaoming的原型指向其他對(duì)象:
var Bird = { fly: function () { console.log(this.name + ' is flying...'); }};xiaoming.__proto__ = Bird;
現(xiàn)在xiaoming已經(jīng)無(wú)法run()了,他已經(jīng)變成了一只鳥:
xiaoming.fly(); // 小明 is flying...
在JavaScrip代碼運(yùn)行時(shí)期,你可以把xiaoming從Student變成Bird,或者變成任何對(duì)象。
請(qǐng)注意,上述代碼僅用于演示目的。在編寫JavaScript代碼時(shí),不要直接用obj.__proto__去改變一個(gè)對(duì)象的原型,并且,低版本的IE也無(wú)法使用__proto__。Object.create()方法可以傳入一個(gè)原型對(duì)象,并創(chuàng)建一個(gè)基于該原型的新對(duì)象,但是新對(duì)象什么屬性都沒有,因此,我們可以編寫一個(gè)函數(shù)來創(chuàng)建xiaoming:
// 原型對(duì)象:var Student = { name: 'Robot', height: 1.2, run: function () { console.log(this.name + ' is running...'); }};function createStudent(name) { // 基于Student原型創(chuàng)建一個(gè)新對(duì)象: var s = Object.create(Student); // 初始化新對(duì)象: s.name = name; return s;}var xiaoming = createStudent('小明');xiaoming.run(); // 小明 is running...xiaoming.__proto__ === Student; // true
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注