今天接着上一篇,昨天其实因为这周太累了,赶着上线每天加班。昨天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"
继承方法
继承方式一、通过改变构造函数(父类)的执行环境 ---在子类中添加一个特殊属性,这个属性值指向父类
function Father(){
this.money = 999999;
this.eat = function(){
console.log("吃肉");
}
this.drink = function(){
console.log("喝酒");
}
}
function Son(){
this.parent = Father; //为子类添加一个特有的属性 改变父类的执行环境 类似:this.parent = function (){....}
this.parent();//改变了执行环境
}
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("发短信");
}
}
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
寄生组合式继承
这个继承方式,如果不看红宝书的情况下,你很少会知道有这个方法。我曾经面试用这个方法装了一发哈哈哈
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);
}
总结
欢迎大家持续关注。号内有多个专题,小程序(持续更新中),Javascript(持续更新),Vue等学习笔记。觉得有收获的可以收藏关注,欢迎骚扰,一起学习,共同进步
最后推广一下自己的小程序,如果你也喜欢锻炼的话在这里寻找你的小伙伴吧。
自律更自由,一只喜欢锻炼的程序猿,嘿嘿。
你都看到这了,不点个关注就过分了哈~