JS中的类与对象、封装、继承、多态(三)--继承

三、继承

面向对象语言中,继承是一个很优秀的概念。虽然js无法实现接口继承,但是因为它优秀的原型链概念,可以通过原型链来实现继承。js中实现继承的方法一共有6种,我们一一来剖析吧!

3.1原型链式继承

基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法。
实现方法:让原型对象等于另一个类型的实例,可以层层递进,就构成了实例与原型的链条,最终形成原型链

function Father(){
    this.FatherName =  "曹操";
}
Father.prototype.getFatherName = function(){
    return this.FatherName;
};
function Son(){
    this.SonName = "曹植";
}
//继承了Father
Son.prototype = new Father();
Son.prototype.getSonName=function(){
    return this.SonName;
};
var Cao = new Son();
console.log(Cao.getFatherName()); //曹操
console.log(Cao.getSonName()); //曹植

解释:通过创建Father的实例,并将该实例赋给Son.prototype,也就是说,以一个新类型的实例重写了原型对象。把原来存在于Father的实例中的所有属性和方法,现在也存在了Son.prototype中。所有给Son.prototype添加的新方法getSonName()在继承了Father的属性和方法的基础上又添加了一个新方法。

缺点:
  • 父类型的共有属性如果是引用类型,就会在子类型中被所有实例共用,因此一个子类型实例更改子类原型从父类型构造函数中继承来的共有属性就会直接影响到其他子类型
function Father(){
   this.FatherName =  ["曹操"];
}
Son.prototype = new Father();
var Cao1 = new Son();
var Cao2 = new Son();
Cao1.FatherName.push("曹操1");
console.log(Cao1.FatherName); //曹操,曹操1
console.log(Cao2.FatherName); //曹操,曹操1
  • 在创建子类型实例时,没有办法在不影响所有对象实例的情况下,向父类型的构造函数中传递参数

3.2 借用构造函数的继承

基本思想:在子类型构造函数的内部调用父类型构造函数。
实现方法:使用apply()和call()方法在新创建的对象上执行构造函数。把父类构造函数的this指向子构造函数的实例上,所以父级所有属性在子类型上都有

function Father(){
   this.FatherName =  ["曹操"];
}
function Son(){
   // 继承自Father
   Father.call(this)
}
var Cao1 = new Son();
var Cao2 = new Son();
Cao1.FatherName.push("曹操1");
console.log(Cao1.FatherName); //曹操,曹操1
console.log(Cao2.FatherName); //曹操

解释:通过使用call()方法(或者apply()),我们在(未来将要)新创建的子类型实例的环境下调用了父类型的构造函数,这样就在新子类型对象上执行父类型函数中定义的所有对象初始代码。子类型中的每个实例就会拥有自己单独的FatherName属性副本了。

优点——传递参数

相对于原型链而言,借用构造函数可在子类型的构造函数中向父类型构造函数传递参数。

function Father(FatherName){
   this.FatherName =  FatherName;
}
function Son(){
   // 继承自Father,同时还传递了参数
   Father.call(this,"曹操");
   //实例属性
   this.age = "18"
}
var Cao = new Son();
console.log(Cao.FatherName); //曹操
console.log(Cao.age); //18
缺点

由于这种类型的继承没有涉及到原型prototype,所以父类型的原型方法不会被子类型继承,如果想被子类型继承,就必须要放在构造函数中,这样创建出来的每个实例就会单独拥有一份而不能共用,但是这样,就违背了代码复用的原则。


3.3 组合继承

基本思想:组合继承也被称为伪经典继承,指的是将原型链和借用构造函数的技术组合在一块,从而发挥各自优点的一种继承模式。
实现方法:使用原型链实现对原型属性和方法的继承,借用构造函数来实现对实例属性的继承。
这样做的好处是,既通过在原型上定义方法实现了函数的复用,又能保证每个实例都有它自己的属性。

function Father(FatherName){
    //值类型共有属性
    this.FatherName =  FatherName;
    //引用类型共有属性
    this.fathers = ["曹操","孙权"];
}
//父类原型共有方法
Father.prototype.getFatherName = function(){
    return this.FatherName;
};
//声明子类型
function Son(FatherName,age){
    // 构造函数式继承自Father,同时还继承了父类属性
    Father.call(this,FatherName);
    //子类型中新增共有属性
    this.age = age;
}
//原型链式继承了Father
Son.prototype = new Father();
//子类原型方法
Son.prototype.getAge=function(){
    return this.age;
};

var Cao1 = new Son("曹操1",18);
var Cao2 = new Son("曹操2",28);

Cao1.fathers.push("曹操11");
console.log(Cao1.fathers); //曹操,孙权,曹操11
console.log(Cao2.fathers); //曹操,孙权
console.log(Cao1.getFatherName()); //曹操1
console.log(Cao1.getAge()); //18
console.log(Cao2.getFatherName()); //曹操2
console.log(Cao2.getAge()); //28

解释:子类型的实例中更改了父类型继承下来的引用类型如fathers,没有影响到其他实例,并且子类型实例化过程中又将参数传递给父类型的构造函数中,如FatherName。

缺点:

这种方式在使用构造函数继承时执行了一遍父类的构造函数,而在实现子类型原型链式继承时,又调用了一遍父类型的构造函数。因此在这里,父类型的构造函数被调用了两遍。


3.4 原型式继承

基本思想:借助原型在基于已有的对象创建新对象,同时还不必因此创建自定义类型。
实现方法:在函数内部先创建一个临时的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
    name: "曹操",
    friends:["刘备","孙权"]
};
var person1 = object(person);
person1.name = "曹操1";
person1.friends.push("刘备1");

var person2 = object(person);
person2.name = "曹操2";
person2.friends.push("刘备2");
console.log(person.name); //曹操
console.log(person.friends); //刘备,孙权,刘备1,刘备2
console.log(person1.name); //曹操1
console.log(person1.friends); //刘备,孙权,刘备1,刘备2
console.log(person2.name); //曹操2
console.log(person2.friends); //刘备,孙权,刘备1,刘备2

3.5 寄生式继承

基本思路:是对原型继承的第二次封装,并且在第二次封装的过程中对继承的对象进行拓展。
实现方法:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象对象,最后再像真地是它做了所有工作一样返回对象。

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}

function createObject(father){
    var clone = object(father);
    clone.sayName = function(){
        console.log("你好");
    };
    return clone;
}
var person = {
    name: "曹操",
    friends:["刘备","孙权"]
};
var person1 = createObject(person)
person1.sayName();  //你好
console.log(person.name); //曹操
console.log(person.friends); //刘备,孙权
console.log(person1.name); //曹操
console.log(person1.friends); //刘备,孙权
缺点:

与构造函数式继承类似,由于不能做到函数的复用而降低效率


3.6 寄生组合式继承

基本思想:不必为了指定子类型的原型而调用父类型的构造函数,利用父类型原型的一个副本。
实现方法:使用寄生式继承来继承父类型的原型,然后再将结果指定给子类型的原型。
这种方法被认为是最完美的继承范式。

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function inheritPrototype(son,father){
    var prototype = object(father.prototype); //创建对象
    prototype.constructor = Son; //增强对象
    Son.prototype = prototype; //指定对象
}
function Father(name){
    this.name = name;
    this.friends = ["曹操","刘备"];·
}
Father.prototype.sayName = function(){
    return this.name;
};
function Son(name,age){
    Father.call(this,name)
    this.age = age;
}
inheritPrototype(Son,Father);
Son.prototype.sayAge = function(){
    return this.age;
};
var Cao1 = new Son("曹操1",18);
var Cao2 = new Son("曹操2",28);
console.log(Cao1.friends); //曹操,刘备
console.log(Cao2.friends); //曹操,刘备
console.log(Cao1.sayName()); //曹操1
console.log(Cao1.sayAge()); //18
console.log(Cao2.sayName()); //曹操2
console.log(Cao2.sayAge()); //28
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容