今天接著上一篇庇配,昨天其實因為這周太累了斩跌,趕著上線每天加班。昨天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等學習筆記产徊。覺得有收獲的可以收藏關注,歡迎騷擾蜀细,一起學習舟铜,共同進步
最后推廣一下自己的小程序,如果你也喜歡鍛煉的話在這里尋找你的小伙伴吧奠衔。
自律更自由谆刨,一只喜歡鍛煉的程序猿,嘿嘿归斤。
你都看到這了痊夭,不點個關注就過分了哈~