functional繼承模式 摘自javascript:the good parts
更新時間:2011年06月20日 19:53:03 作者:
javascript:the good parts 書中Inheritance部分講到了一種functional的繼承方式, 具體這個functional該如何翻譯,就不是很清楚了, 就直接意會一下吧
這種模式的作用在于確保對象屬性的真正私有化, 我們無法直接訪問對象的狀態(tài), 只能通過特權(quán)方法來進行操作.
下面直接來個例子吧.
var person = function(cfg) {
var that = {};
that.getName = function() {
return cfg.name || 'unknow name';
};
// 性別 默認男性
that.getGender = function() {
return cfg.gender || 'male';
};
return that;
};
var programmer = function(cfg) {
var that = person(cfg),
share = {};
share.status = 'normal';
that.getFamiliarLanguage = function() {
return (cfg.langs || []).join(' ');
};
that.getProfile = function() {
return 'hi,my name is ' + that.getName();
};
that.getStatus = function() {
return share.status;
};
that.setStatus = function(status) {
share.status = status;
};
return that;
};
var me = programmer({
name: 'AndyZhang',
gender: 'male',
// 熟悉的語言
langs: ['javascript', 'java', 'php']
});
console.debug(me.getFamiliarLanguage());
console.debug(me.getProfile());
me.setStatus('oh really busy..');
console.debug(me.getStatus());
從代碼中可以看到,我們調(diào)用programmer方法時,沒用使用new, 而且方法里也沒有出現(xiàn)this關(guān)鍵字.
如果出現(xiàn)類似this.name = cfg.name這樣的屬性賦值代碼, 再用new去調(diào)用(構(gòu)造函數(shù)調(diào)用方式),這樣產(chǎn)生的對象的name屬性就不再私有.如:
// 這里方法名的首字母大寫 以表示作為一個構(gòu)造方法 用new來調(diào)用
var Person = function(cfg) {
this.name = cfg.name;
this.gender = cfg.gender;
}
// new出一個person1
var person1 = new Person({
name: 'Andrew',
gender: 'male'
});
// 本來是想讓name, gender成為私有 用類似setter getter方法來讀寫 就像javaBean一樣
alert(person1.name); // 'Andrew'
alert(person1.gender); // 'male'
從上面的例子可以看出person1的屬性我們是可以直接訪問的,沒有做到真正的private. 有時候我們會用代碼規(guī)范或約定來表示我們定義的某個屬性是私有的,比如this._name用這樣的寫法表示name屬性是私有的. 個人覺得只要約定統(tǒng)一,這也是一種不錯的方式, 在第三方j(luò)s庫中,這種運用的可能比較多,像YUI2
繼續(xù)看最開始的代碼, 沒有用到this, 而是用了that作為載體, 從programmer方法中我們看到that所起到的作用, 調(diào)用person后,返回的that已經(jīng)具有了person所具有的方法getName, getGender, 然后我們根據(jù)programmer具體的需要在that基礎(chǔ)上進行擴展, 當然也可以覆寫原來的方法, programmer中的share可以用來集中一些私有變量和方法, 通過javascript的scope和closure機制, 可以在that擴展的方法中對它們進行處理和調(diào)用, 比如代碼中的that.getStatus和that.setStatus方法, 最后return that.
下面直接來個例子吧.
復(fù)制代碼 代碼如下:
var person = function(cfg) {
var that = {};
that.getName = function() {
return cfg.name || 'unknow name';
};
// 性別 默認男性
that.getGender = function() {
return cfg.gender || 'male';
};
return that;
};
var programmer = function(cfg) {
var that = person(cfg),
share = {};
share.status = 'normal';
that.getFamiliarLanguage = function() {
return (cfg.langs || []).join(' ');
};
that.getProfile = function() {
return 'hi,my name is ' + that.getName();
};
that.getStatus = function() {
return share.status;
};
that.setStatus = function(status) {
share.status = status;
};
return that;
};
var me = programmer({
name: 'AndyZhang',
gender: 'male',
// 熟悉的語言
langs: ['javascript', 'java', 'php']
});
console.debug(me.getFamiliarLanguage());
console.debug(me.getProfile());
me.setStatus('oh really busy..');
console.debug(me.getStatus());
從代碼中可以看到,我們調(diào)用programmer方法時,沒用使用new, 而且方法里也沒有出現(xiàn)this關(guān)鍵字.
如果出現(xiàn)類似this.name = cfg.name這樣的屬性賦值代碼, 再用new去調(diào)用(構(gòu)造函數(shù)調(diào)用方式),這樣產(chǎn)生的對象的name屬性就不再私有.如:
復(fù)制代碼 代碼如下:
// 這里方法名的首字母大寫 以表示作為一個構(gòu)造方法 用new來調(diào)用
var Person = function(cfg) {
this.name = cfg.name;
this.gender = cfg.gender;
}
// new出一個person1
var person1 = new Person({
name: 'Andrew',
gender: 'male'
});
// 本來是想讓name, gender成為私有 用類似setter getter方法來讀寫 就像javaBean一樣
alert(person1.name); // 'Andrew'
alert(person1.gender); // 'male'
從上面的例子可以看出person1的屬性我們是可以直接訪問的,沒有做到真正的private. 有時候我們會用代碼規(guī)范或約定來表示我們定義的某個屬性是私有的,比如this._name用這樣的寫法表示name屬性是私有的. 個人覺得只要約定統(tǒng)一,這也是一種不錯的方式, 在第三方j(luò)s庫中,這種運用的可能比較多,像YUI2
繼續(xù)看最開始的代碼, 沒有用到this, 而是用了that作為載體, 從programmer方法中我們看到that所起到的作用, 調(diào)用person后,返回的that已經(jīng)具有了person所具有的方法getName, getGender, 然后我們根據(jù)programmer具體的需要在that基礎(chǔ)上進行擴展, 當然也可以覆寫原來的方法, programmer中的share可以用來集中一些私有變量和方法, 通過javascript的scope和closure機制, 可以在that擴展的方法中對它們進行處理和調(diào)用, 比如代碼中的that.getStatus和that.setStatus方法, 最后return that.
相關(guān)文章
javascript的tab切換原理與效果實現(xiàn)方法
這篇文章主要介紹了javascript的tab切換原理與效果實現(xiàn)方法,實例分析了簡單的tab切換實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01layui 實現(xiàn)二級彈窗彈出之后 關(guān)閉一級彈窗的方法
今天小編就為大家分享一篇layui 實現(xiàn)二級彈窗彈出之后 關(guān)閉一級彈窗的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript高階API數(shù)組reduce函數(shù)使用示例
這篇文章主要為大家介紹了JavaScript數(shù)組高階API?reduce函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼
為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼,學習js的朋友可以參考下。2011-06-06js將table的每個td的內(nèi)容自動賦值給其title屬性的方法
下面小編就為大家?guī)硪黄猨s將table的每個td的內(nèi)容自動賦值給其title屬性的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10