收藏了也不看的JavaScript,面向對象程序設計(下)!

今天接著上一篇庇配,昨天其實因為這周太累了斩跌,趕著上線每天加班。昨天12點的時候讨永,脖子都開始疼了滔驶。好了不廢話了開始了~

繼承

繼承:子類繼承父類中的屬性和方法 , 這些屬性和方法在子類中不需要實現過程

繼承的種類:

單繼承:一個子類只擁有一個父類

多繼承:一個子類可以擁有多個父類

原型鏈

這里真的呼吁學js的小伙伴一定要看紅寶書哦卿闹。

function SuperType(){

this.property = true;

}

SuperType.prototype.getSuperValue = function(){

};

function SubType(){

this.subproperty = false;

}

//SuperType

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){

return this.subproperty;

};

var instance = new SubType();

alert(instance.getSuperValue()); //true

原型鏈的問題

function SuperType(){

this.colors = ["red", "blue", "green"];

alert(instance1.colors); //"red,blue,green,black"

}

function SubType(){}

//SuperType

SubType.prototype = new SuperType();

var instance1 = new SubType();

instance1.colors.push("black");

var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green,black"

原型繼承

var person = {

name: "Nicholas",

friends: ["Shelby", "Court", "Van"]

};

var anotherPerson = object(person);

anotherPerson.name = "Greg";

anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);

yetAnotherPerson.name = "Linda";

yetAnotherPerson.friends.push("Barbie");

alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

var person = {

name: "Nicholas",

friends: ["Shelby", "Court", "Van"]

};

var anotherPerson = Object.create(person);

anotherPerson.name = "Greg";

anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);

yetAnotherPerson.name = "Linda";

yetAnotherPerson.friends.push("Barbie");

alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

繼承方法

繼承方式一揭糕、通過改變構造函數(父類)的執(zhí)行環(huán)境 ---在子類中添加一個特殊屬性,這個屬性值指向父類

function Father(){

this.money = 999999;

this.eat = function(){

console.log("吃肉");

}

this.drink = function(){

console.log("喝酒");

}

}

function Son(){

this.parent = Father; //為子類添加一個特有的屬性 改變父類的執(zhí)行環(huán)境 類似:this.parent = function (){....}

this.parent();//改變了執(zhí)行環(huán)境

}

var son = new Son();

繼承方式二锻霎、通過call方法實現

call方法使用:

父類.call(子類[,子類繼承父類的屬性]);

function Father(firstname){

this.firstname = firstname;

this.money = 200000000;

this.drink = function(){

console.log("喝酒");

}

this.dance = function(){

console.log("跳舞");

}

}

function Son(firstname){

Father.call(this,firstname );

}

繼承方式三著角、通過apply繼承

apply使用方法:

父類.apply(子類對象,數組) 數組中存儲的是從父類繼承過來的屬性

function xiaomi5(price,size,memsize){

this.price = price;

this.size = size;

this.memsize = memsize;

this.phoneCall = function(){

console.log("打電話");

}

this.sendMessage = function(){

console.log("發(fā)短信");

}

}

function xiaomi5Plus(price,size,memsize,color){

this.color = color;//特有屬性

//xiaomi5.apply(this,[price,size,memsize]);

xiaomi5.apply(this,arguments);//通過arguments接收

this.playMusic = function(){

return "播放音樂";

}

this.photo = function(){

console.log("照相");

}

}

var xm = new xiaomi5Plus(789,7,64,"white");

console.log(xm);

組合繼承

這里要摘出來說一下

通過apply或call繼承實例屬性

通過原型方式 繼承 原型方法

function Father(money,firstname){

this.money = money;

this.firstname = firstname;

}

Father.prototype.dance = function(){

console.log("跳舞");

}

Father.prototype.sleep= function(){

console.log("睡覺");

}

function Son(money,firstname){

Father.call(this,money,firstname);

}

//原型繼承

Son.prototype = new Father();

var son = new Son("200000","王");

son.dance();

function SuperType(name){

this.name = name;

this.colors = ["red", "blue", "green"];

}

SuperType.prototype.sayName = function(){

alert(this.name);

JavaScript instanceof isPrototypeOf()

function object(o){

function F(){}

object() object()13

};

function SubType(name, age){

//SuperType.call(this, name);

this.age = age;

}

//

SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){

alert(this.age);

};

var instance1 = new SubType("Nicholas", 29);

instance1.colors.push("black");

alert(instance1.colors);

instance1.sayName();

instance1.sayAge();

//"red,blue,green,black"

//"Nicholas";

//29

var instance2 = new SubType("Greg", 27);

alert(instance2.colors);//"red,blue,green"

instance2.sayName();//"Greg";

instance2.sayAge();//27

寄生組合式繼承

這個繼承方式,如果不看紅寶書的情況下旋恼,你很少會知道有這個方法吏口。我曾經面試用這個方法裝了一發(fā)哈哈哈

function SuperType(name){

this.name = name;

this.colors = ["red", "blue", "green"];

}

SuperType.prototype.sayName = function(){

alert(this.name);

};

function SubType(name, age){

SuperType.call(this, name);

this.age = age;

}

SubType.prototype = new SuperType();

SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function(){

alert(this.age);

};

function inheritPrototype(subType, superType){

var prototype = object(superType.prototype);

prototype.constructor = subType;

subType.prototype = prototype;

}

function SuperType(name){

this.name = name;

this.colors = ["red", "blue", "green"];

}

SuperType.prototype.sayName = function(){

alert(this.name);

};

function SubType(name, age){

SuperType.call(this, name);

this.age = age;

}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){

alert(this.age);

}

總結

歡迎大家持續(xù)關注。號內有多個專題冰更,小程序(持續(xù)更新中),Javascript(持續(xù)更新),Vue等學習筆記产徊。覺得有收獲的可以收藏關注,歡迎騷擾蜀细,一起學習舟铜,共同進步

最后推廣一下自己的小程序,如果你也喜歡鍛煉的話在這里尋找你的小伙伴吧奠衔。

自律更自由谆刨,一只喜歡鍛煉的程序猿,嘿嘿归斤。

你都看到這了痊夭,不點個關注就過分了哈~

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市脏里,隨后出現的幾起案子她我,更是在濱河造成了極大的恐慌,老刑警劉巖迫横,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸦难,死亡現場離奇詭異,居然都是意外死亡员淫,警方通過查閱死者的電腦和手機合蔽,發(fā)現死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來介返,“玉大人拴事,你說我怎么就攤上這事沃斤。” “怎么了刃宵?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵衡瓶,是天一觀的道長。 經常有香客問我牲证,道長哮针,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任坦袍,我火速辦了婚禮十厢,結果婚禮上,老公的妹妹穿的比我還像新娘捂齐。我一直安慰自己蛮放,他們只是感情好,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布奠宜。 她就那樣靜靜地躺著包颁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪压真。 梳的紋絲不亂的頭發(fā)上娩嚼,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機與錄音滴肿,去河邊找鬼岳悟。 笑死,一個胖子當著我的面吹牛嘴高,可吹牛的內容都是我干的。 我是一名探鬼主播和屎,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼拴驮,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了柴信?” 一聲冷哼從身側響起套啤,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎随常,沒想到半個月后潜沦,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡绪氛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年唆鸡,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片枣察。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡争占,死狀恐怖燃逻,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情臂痕,我是刑警寧澤伯襟,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站握童,受9級特大地震影響姆怪,放射性物質發(fā)生泄漏。R本人自食惡果不足惜澡绩,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一稽揭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧英古,春花似錦淀衣、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至唠叛,卻和暖如春只嚣,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背艺沼。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工册舞, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人障般。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓调鲸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親挽荡。 傳聞我的和親對象是個殘疾皇子藐石,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內容