functional繼承模式 摘自javascript:the good parts
更新時(shí)間:2011年06月20日 19:53:03 作者:
javascript:the good parts 書中Inheritance部分講到了一種functional的繼承方式, 具體這個(gè)functional該如何翻譯,就不是很清楚了, 就直接意會(huì)一下吧
這種模式的作用在于確保對(duì)象屬性的真正私有化, 我們無(wú)法直接訪問(wèn)對(duì)象的狀態(tài), 只能通過(guò)特權(quán)方法來(lái)進(jìn)行操作.
下面直接來(lái)個(gè)例子吧.
var person = function(cfg) {
var that = {};
that.getName = function() {
return cfg.name || 'unknow name';
};
// 性別 默認(rèn)男性
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',
// 熟悉的語(yǔ)言
langs: ['javascript', 'java', 'php']
});
console.debug(me.getFamiliarLanguage());
console.debug(me.getProfile());
me.setStatus('oh really busy..');
console.debug(me.getStatus());
從代碼中可以看到,我們調(diào)用programmer方法時(shí),沒(méi)用使用new, 而且方法里也沒(méi)有出現(xiàn)this關(guān)鍵字.
如果出現(xiàn)類似this.name = cfg.name這樣的屬性賦值代碼, 再用new去調(diào)用(構(gòu)造函數(shù)調(diào)用方式),這樣產(chǎn)生的對(duì)象的name屬性就不再私有.如:
// 這里方法名的首字母大寫 以表示作為一個(gè)構(gòu)造方法 用new來(lái)調(diào)用
var Person = function(cfg) {
this.name = cfg.name;
this.gender = cfg.gender;
}
// new出一個(gè)person1
var person1 = new Person({
name: 'Andrew',
gender: 'male'
});
// 本來(lái)是想讓name, gender成為私有 用類似setter getter方法來(lái)讀寫 就像javaBean一樣
alert(person1.name); // 'Andrew'
alert(person1.gender); // 'male'
從上面的例子可以看出person1的屬性我們是可以直接訪問(wèn)的,沒(méi)有做到真正的private. 有時(shí)候我們會(huì)用代碼規(guī)范或約定來(lái)表示我們定義的某個(gè)屬性是私有的,比如this._name用這樣的寫法表示name屬性是私有的. 個(gè)人覺(jué)得只要約定統(tǒng)一,這也是一種不錯(cuò)的方式, 在第三方j(luò)s庫(kù)中,這種運(yùn)用的可能比較多,像YUI2
繼續(xù)看最開(kāi)始的代碼, 沒(méi)有用到this, 而是用了that作為載體, 從programmer方法中我們看到that所起到的作用, 調(diào)用person后,返回的that已經(jīng)具有了person所具有的方法getName, getGender, 然后我們根據(jù)programmer具體的需要在that基礎(chǔ)上進(jìn)行擴(kuò)展, 當(dāng)然也可以覆寫原來(lái)的方法, programmer中的share可以用來(lái)集中一些私有變量和方法, 通過(guò)javascript的scope和closure機(jī)制, 可以在that擴(kuò)展的方法中對(duì)它們進(jìn)行處理和調(diào)用, 比如代碼中的that.getStatus和that.setStatus方法, 最后return that.
下面直接來(lái)個(gè)例子吧.
復(fù)制代碼 代碼如下:
var person = function(cfg) {
var that = {};
that.getName = function() {
return cfg.name || 'unknow name';
};
// 性別 默認(rèn)男性
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',
// 熟悉的語(yǔ)言
langs: ['javascript', 'java', 'php']
});
console.debug(me.getFamiliarLanguage());
console.debug(me.getProfile());
me.setStatus('oh really busy..');
console.debug(me.getStatus());
從代碼中可以看到,我們調(diào)用programmer方法時(shí),沒(méi)用使用new, 而且方法里也沒(méi)有出現(xiàn)this關(guān)鍵字.
如果出現(xiàn)類似this.name = cfg.name這樣的屬性賦值代碼, 再用new去調(diào)用(構(gòu)造函數(shù)調(diào)用方式),這樣產(chǎn)生的對(duì)象的name屬性就不再私有.如:
復(fù)制代碼 代碼如下:
// 這里方法名的首字母大寫 以表示作為一個(gè)構(gòu)造方法 用new來(lái)調(diào)用
var Person = function(cfg) {
this.name = cfg.name;
this.gender = cfg.gender;
}
// new出一個(gè)person1
var person1 = new Person({
name: 'Andrew',
gender: 'male'
});
// 本來(lái)是想讓name, gender成為私有 用類似setter getter方法來(lái)讀寫 就像javaBean一樣
alert(person1.name); // 'Andrew'
alert(person1.gender); // 'male'
從上面的例子可以看出person1的屬性我們是可以直接訪問(wèn)的,沒(méi)有做到真正的private. 有時(shí)候我們會(huì)用代碼規(guī)范或約定來(lái)表示我們定義的某個(gè)屬性是私有的,比如this._name用這樣的寫法表示name屬性是私有的. 個(gè)人覺(jué)得只要約定統(tǒng)一,這也是一種不錯(cuò)的方式, 在第三方j(luò)s庫(kù)中,這種運(yùn)用的可能比較多,像YUI2
繼續(xù)看最開(kāi)始的代碼, 沒(méi)有用到this, 而是用了that作為載體, 從programmer方法中我們看到that所起到的作用, 調(diào)用person后,返回的that已經(jīng)具有了person所具有的方法getName, getGender, 然后我們根據(jù)programmer具體的需要在that基礎(chǔ)上進(jìn)行擴(kuò)展, 當(dāng)然也可以覆寫原來(lái)的方法, programmer中的share可以用來(lái)集中一些私有變量和方法, 通過(guò)javascript的scope和closure機(jī)制, 可以在that擴(kuò)展的方法中對(duì)它們進(jìn)行處理和調(diào)用, 比如代碼中的that.getStatus和that.setStatus方法, 最后return that.
您可能感興趣的文章:
- 淺談js對(duì)象的創(chuàng)建和對(duì)6種繼承模式的理解和遐想
- JavaScript繼承模式粗探
- javascript中最常用的繼承模式 組合繼承
- JS繼承--原型鏈繼承和類式繼承
- JavaScript的原型繼承詳解
- JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
- javascript 面向?qū)ο笕吕砭氈屠^承
- JavaScript類的繼承方法小結(jié)【組合繼承分析】
- JavaScript寄生組合式繼承實(shí)例詳解
- JavaScript常見(jiàn)繼承模式實(shí)例小結(jié)
相關(guān)文章
JS實(shí)現(xiàn)的仿淘寶交易倒計(jì)時(shí)效果
這篇文章主要介紹了JS實(shí)現(xiàn)的仿淘寶交易倒計(jì)時(shí)效果,涉及JavaScript針對(duì)時(shí)間與日期的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
JavaScript?ESLint插件保姆級(jí)使用教程
ESLint最初是由Nicholas C. Zakas 于2013年6月創(chuàng)建的開(kāi)源項(xiàng)目。它的目標(biāo)是提供一個(gè)插件化的javascript代碼檢測(cè)工具2022-08-08
淺談javascript控制HTML5的全屏操控,瀏覽器兼容的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談javascript控制HTML5的全屏操控,瀏覽器兼容的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之復(fù)合運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之復(fù)合運(yùn)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
淺談JavaScript超時(shí)調(diào)用和間歇調(diào)用
JavaScript是單線程語(yǔ)言,但它允許通過(guò)設(shè)置超時(shí)值和間歇時(shí)間值來(lái)調(diào)度代碼在特定的時(shí)刻執(zhí)行。前者是在指定的時(shí)間過(guò)后執(zhí)行代碼,而后者則是每隔指定的時(shí)間就執(zhí)行一次代碼。2015-08-08

