面向?qū)ο缶幊?/h1>

面向?qū)ο缶幊?/h3>
Paste_Image.png

一段完整的創(chuàng)建類的示例

// 如何創(chuàng)建一個類肪康,包含有:靜態(tài)屬性方法名扛,公有私有屬性方法陈醒?
var Book = (function(){
    // 靜態(tài)私有變量 
    var bookNum = 0; 
    // 靜態(tài)私有方法
    function checkName(name){} 
    var _book = function(id, newName, newPrice){ 
        // 安全模式抚岗,防止未使用new操作符
            if(this instanceof _book){ 
            // 私有變量 方法 
            var name, price; function checkID(){} 
            // 共有屬性,方法 
            this.id = id; 
            this.getName = function(){ return name; }; 
            this.getPrice = function(){ return price; }; 
            this.setName = function(name){ name = name; };
            this.setPrice = function(price){ price = price; }; 
            console.log(++bookNum); 
            this.setName(newName); 
            this.setPrice(newPrice);  
    } 
    else{ 
        return new _book(id, name, price); 
    } 
};
_book.prototype = { 
    // 靜態(tài)公有屬性 
    isJSBook: false,
    // 靜態(tài)共有方法 
    displayName: function(){ 
        console.log(this.getName());
    } 
};
return _book;
}());

使用關(guān)閉包定義靜態(tài)私有變量與方法鱼鼓,所有實例創(chuàng)建過程中都能訪問到

Paste_Image.png

創(chuàng)建實例時孝常,打印出累加之后的bookNum

當(dāng)替換Book(即_book)的原型之后,之前創(chuàng)建的實例指向的原型并不會改變蚓哩,之后在之后創(chuàng)建Book實例時運用新的原型

Paste_Image.png

觀察b3构灸、b4的原型

當(dāng)在原來的原型上變更之后,通過該原型創(chuàng)建的實例都能應(yīng)用變更之后的原型

Paste_Image.png

這里定義重復(fù)了,原型上的getPrice方法將會被實例自身擁有的getPrice方法掩蓋住

繼承

  • 方式一:類式繼承: 通過將子類的原型指定為父類的實例
function SuperClass(){ 
this.superValue = true;
}
SuperClass.prototype.getSuperValue = function(){ 
return this.superValue;
};
function SubClass(){
 this.subValue = true;
}
SubClass.prototype = new SuperClass();
SubClass.prototype.getSubValue = function(){ return this.subValue;};
Paste_Image.png

缺點:
1喜颁、如果父類中存在引用類型屬性稠氮,則會被所有子類共用,一個子類修改之后將會影響到所有子類
2半开、無法在實例化時為父類傳遞初始化參數(shù)

  • 方式二: 構(gòu)造函數(shù)繼承: 在子類構(gòu)造函數(shù)中通過call或者apply調(diào)用父類的構(gòu)造函數(shù)隔披,實現(xiàn)繼承父類定義的屬性方法
function SuperClass(id){
 this.books = ['js', 'css', 'html'];
 this.id = id;
}
SuperClass.prototype.showBooks = function(){
 console.log(this.books.join());
};
function SubClass(id){
 SuperClass.call(this, id);
}
Paste_Image.png

缺點:
1、子類沒有繼承父類的原型
2寂拆、每個實例化出來的子類對象都會單獨擁有一份父類上定義的屬性方法奢米,無法復(fù)用父類的屬性或者方法

  • 方式三: 組合繼承: 方式一與方式二的組合模式
function SuperClass(name){
 this.name = name;
 this.books = ['js', 'css','html'];
}
SuperClass.prototype.getName = function(){
 console.log(this.name);
};
function SubClass(name, time){
 SuperClass.call(this, name);
 this.time = time;
}
SubClass.prototype = new SuperClass();
SubClass.prototype.getTime = function(){ console.log(this.time);}
Paste_Image.png

缺點:
1、父類構(gòu)造函數(shù)執(zhí)行了兩遍
2纠永、子類實例化出來的對象原型中重復(fù)了一次父類構(gòu)造函數(shù)中的屬性方法

  • 方式四: 原型式繼承: 使用過渡函數(shù)作為構(gòu)造函數(shù)鬓长,傳入的對象作為過渡函數(shù)的原型
function inheritObject(o){
 function F(){}
 F.prototype = o;
 return new F();
}

缺點:
跟方式一有相同的缺點

  • 方式五: 寄生式繼承: 在方式四的基礎(chǔ)上進(jìn)行二次封
function createBook(obj){
 var o = inheritObject(obj);
 o.getName = function(){
 console.log(this.name); 
};
 return o;
}
Paste_Image.png
  • 方式六: 寄生組合式繼承: 寄生式繼承跟夠構(gòu)造函數(shù)繼承的組合
function inheritPrototype(SubClass, SuperClass){
 var p = inheritObject(SuperClass.prototype);
 p.constructor = SubClass;
 SubClass.prototype = p;
}
function SuperClass(name){
 this.name = name;
 this.books = ['js', 'css','html'];
}
SuperClass.prototype.getName = function(){
 console.log(this.name);
};
function SubClass(name, time){
 SuperClass.call(this, name);
 this.time = time;
}
inheritPrototype(SubClass, SuperClass);
SubClass.prototype.getTime = function(){ console.log(this.time);
}
Paste_Image.png

子類添加原型方法只能在現(xiàn)有原型上一個添加

整個過程:先定義子類及父類與父類原型,然后子類原型引用父類的原型對象尝江,然后子類在添加自己的原型方法涉波,最后調(diào)用父類構(gòu)造函數(shù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

  • 序言:七十年代末,一起剝皮案震驚了整個濱河市炭序,隨后出現(xiàn)的幾起案子啤覆,更是在濱河造成了極大的恐慌,老刑警劉巖惭聂,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件窗声,死亡現(xiàn)場離奇詭異,居然都是意外死亡辜纲,警方通過查閱死者的電腦和手機(jī)笨觅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來侨歉,“玉大人,你說我怎么就攤上這事揩魂∮牡耍” “怎么了?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵火脉,是天一觀的道長牵舵。 經(jīng)常有香客問我,道長倦挂,這世上最難降的妖魔是什么畸颅? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮方援,結(jié)果婚禮上没炒,老公的妹妹穿的比我還像新娘。我一直安慰自己犯戏,他們只是感情好送火,可當(dāng)我...
    茶點故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布拳话。 她就那樣靜靜地躺著,像睡著了一般种吸。 火紅的嫁衣襯著肌膚如雪弃衍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天坚俗,我揣著相機(jī)與錄音镜盯,去河邊找鬼。 笑死猖败,一個胖子當(dāng)著我的面吹牛速缆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播辙浑,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼激涤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了判呕?” 一聲冷哼從身側(cè)響起倦踢,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎侠草,沒想到半個月后辱挥,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡边涕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年晤碘,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片功蜓。...
    茶點故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡园爷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出式撼,到底是詐尸還是另有隱情童社,我是刑警寧澤,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布著隆,位于F島的核電站扰楼,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏美浦。R本人自食惡果不足惜弦赖,卻給世界環(huán)境...
    茶點故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望浦辨。 院中可真熱鬧蹬竖,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至劈榨,卻和暖如春访递,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背同辣。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工拷姿, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人旱函。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓响巢,卻偏偏與公主長得像,于是被迫代替她去往敵國和親棒妨。 傳聞我的和親對象是個殘疾皇子踪古,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內(nèi)容