本文實例講述了JavaScript設(shè)計模式之原型模式。分享給大家供大家參考,具體如下:
從設(shè)計模式的角度講,原型模式是用于創(chuàng)建對象的一種模式,若需要創(chuàng)建一個對象,一種方法是先指定其類型,然后通過類來創(chuàng)建這個對象,另一種方法是通過原型來創(chuàng)建,不必關(guān)心對象的具體類型,而是找到一個對象,然后通過克隆來創(chuàng)建一個一模一樣的對象。
ES5提供了Object.create(obj)
方法來克隆對象,在不支持Object.create(obj)
方法的瀏覽器中,可以使用以下代碼:
Object.create = Object.create || function(obj) { function Func() {}; Func.prototype = obj; return new Func(); }
一、JavaScript中的原型繼承:
1. 大部分的數(shù)據(jù)都是對象;
JavaScript有兩種類型機(jī)制:基本類型和對象類型。基本類型包括undefined
、number
、boolean
、string
、function
、object
。
JavaScript設(shè)計者的本意在于,除了undefined,一切都應(yīng)該是對象,為了實現(xiàn)這一目標(biāo),number、boolean、string這幾種基本數(shù)據(jù)類型通過對應(yīng)的包裝類Number、Boolean、String來變成對象類型數(shù)據(jù)。
JavaScript中的根對象是Object.prototype
對象,Object.prototype
對象是一個空的對象。JavaScript的每個對象,實際上都是從Object.prototype
對象克隆而來的,Object.prototype
對象就是它們的原型。
ES5提供了getPrototypeOf
來查看對象的原型,Object.getPrototypeOf(任何對象) == Object.prototype
都會返回true。
2. 要得到一個對象,不是通過實例化類,而是找到一個對象作為原型并克隆它;
JavaScript沒有類的概念,new運算符后面的不是類,而是構(gòu)造器。當(dāng)使用new運算符來創(chuàng)建對象時,實際上也是先克隆Object.prototype
對象,再進(jìn)行一些額外操作的過程。
3. 對象會記住它的原型;
其實不能說對象有原型,而只能說對象的構(gòu)造器有原型。JavaScript給對象提供了一個名為__proto__
屬性,默認(rèn)指向它的構(gòu)造器的原型,__proto__
屬性是對象與構(gòu)造器的原型聯(lián)系起來的紐帶,如:person.__proto__ == Person.prototype
。
4. 若對象無法響應(yīng)某個請求,它會把該請求委托給它自己的原型。
這是原型繼承的精髓,當(dāng)一個對象無法響應(yīng)某個請求時,會順著原型鏈把請求傳遞下去,直到遇到一個可以處理該請求的對象為止。但是,原型鏈并不是無限長的,只會查找到Object.prototype
對象為止,由于Object.prototype
的原型是null
,因此請求無法找到可以處理的對象,返回undefined
。
二、原型繼承的未來
使用Object.create來實現(xiàn)原型繼承似乎更能體現(xiàn)原型模式的精髓,但是,通過Object.create
創(chuàng)建對象的效率并不高,通常要比通過構(gòu)造函數(shù)創(chuàng)建對象慢。
ES6帶來了新的Class語法,這讓JavaScript看起來像是一門基于類的語言,但背后仍然是通過原型機(jī)制來創(chuàng)建對象。
class Person { constuctor(name) { this.name = name; } getName() { return this.name; } } class Student extends Person { constuctor(name) { super(name); } sayHello() { alert(“Hello”); } } var student = new Student(“Alice”); student.sayHello();
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com