面向对象02 继承

3.继承

3.1 原型链

原型链是实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

构造函数、原型和实例的关系

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType(){
    this.subproperty = false;
}
// 使SubType继承SuperType的实例 本质是重写原型对象
SubType.prototype = new SuperType();
SubType.prototype.getValue = function(){
    return this.subproperty;
}
var instance = new SubType();
alert(instance.getSuperValue());//true

image

注意 ：==instance.constructor现在指向的是SuperType,这是因为原来SubType的原型指向了另一个对象--SuperType的原型，而这个原型对象的constructor属性指向的是SuperType==

默认的原型 Object
image
确定原型与实例的关系
  • instanceof：用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回true
alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true
  • 使用isPrototypeOf()方法，只要是原型链中出现的原型，都可以说是该原型链所派生的实例的原型
alert(Object.prototype isPrototypeOf(instance)); //true
alert(SuperType.prototype isPrototypeOf(instance));
alert(SubType.prototype isPrototypeOf(instance));
通过原型链实现继承时，不能使用对象字面量创建原型方法，因为这样会重写原型链
function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType(){
    this.subproperty = false;
}
SubType.prototype = new SuperType();
// 使用对象字面量创建原型方法，会重写原型链
SubType.prototype = {
    getSubValue: function(){
        return this.subproperty;
    }
};
var instance = new SubType();
alert(instance.getSuperValue());//error!!
原型链的问题
  • 包含引用类型值的原型属性会被所有实例共享，因此在构造函数中定义属性而不是在原型对象中定义属性。
    在通过原型来实现继承时，原型实际上会变成另一个类型的实例。于是，原先的实例属性也就变成了现在的原型属性了。
function SuperType(){
    this.color = ["red", "blue", "green"];
    this.name = "Nicholas";
}
function SubType(){
}
SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red","blue","green","black"
instance1.name = "Tom";
alert(instance1.name); //"Tom"

var instance2 = new SubType();
// colors是引用类型，会被所有实例共享
alert(instance2.colors); // "red","blue","green","black"
alert(instance2.name); //"Nicholas"
  • 没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数
function SuperType(name){
    this.name = name;
}
function SubType(name){
}
// ??如何向超类型的构造函数传递参数？？
SubType.prototype = new SuperType();

var instance2 = new SubType(name);
  • 综合以上情况，实践中很少会单独使用原型链

3.2 借用构造函数

在子类型构造函数的内部调用超类型构造函数。

function SuperType(){
    this.colors=["red","blue","green"];
}
function SubType(){
    //
    superType.call(this);
}

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

bar instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"
使用这种方式，可以在子类型构造函数中向超类型构造函数传递参数。
function SuperType(name){
    this.name=name;
}
function SubType(){
    Super.call(this,"Nicholas");
    this.age = 29;
}

var instance = new SubType();
alert(instance.name);//"Nicholas"
  • 相关问题：

会出现与构造函数模式相同的问题——方法都在构造函数中定义，函数复用就无从谈起了。而且在超类型的原型中定义的方法，对于子类型也是不可见的。

3.3 组合继承——JavaScrip最常用的继承模式

使用原型链实现对原型属性和方法的继承(通过在原型上定义方法实现了函数复用)，通过借用构造函数来实现对实例属性的继承(保证每个实例都有自己的属性，而且可以向超类的构造函数传递参数)。

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.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas",29);
instance1.sayName(); //"Nicholas"
instance1.sayAge(); //29

var instance2 = new SubType("Greg",27);
instance2.sayName(); //"Greg"
instance2.sayAge(); //27

3.4 原型式继承

借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。

function object(o){
    // 临时的构造函数
    function F(){}
    // 将传入的对象作为这个构造函数的原型
    F.prototype = o;
    // 返回新实例
    return new F();
}
var person = {
    name:"Nicholas",
    friends:["shelby","court","van"]
};
// 以person为原型创建一个新实例
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"

person.friends不仅属于person所有，而且也会被anotherPerson、yetAnotherPerson共享。

ECMAScript5通过Object.create()方法规范化了原型式继承，这个方法接受两个参数：一个用作新对象原型的对象，另一个(可选的)为新对象定义额外属性的对象。只传入一个参数的情况，和object()方法相同。

// Object.create()只用一个参数
var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = Object.create(person);

// Object.create()用两个参数
var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = Object.create(person, {
    name:{
        value: "Greg"
    }
});
alert(anotherPerson.name); //Greg

var yetAnotherPerson = Object.create(person, {
    // 为新对象定义新的friends属性，该属性会覆盖原型属性中的friends
    friends:{
        value: ["1","2","3"]
    }
});
alert(yetAnotherPerson.friends); //"1,2,3"
// 但是原型对象中的friends属性仍然被共享
alert(person.friends); //"shelby,court,van"
alert(anothorPerson.friends); //"shelby,court,van"

3.5 寄生式继承

function createAnother(original){
    var clone = object(original);
    // 不能做到函数复用，导致效率降低
    // 添加新函数，增强对象
    clone.sayHi = function(){
        alert("hi");
    }
    return clone;
}

var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

经试验
使用原型式继承方式出现如下问题

function object(o){
    function F(){}
    F.sayHi = function(){
        alert("Hi");
    };
    F.prototype = o;
    return new F();
}
var person = {
    name:"Nicholas",
    friends:["shelby","court","van"]
};

var anotherPerson = object(person);
anotherPerson.sayHi(); 
会输出错误 VM6988:18 Uncaught TypeError: anotherPerson.sayHi is not a function

但是这种方式没有问题

function object(o){
    function F(){}
    F.prototype = o;
    // 返回新实例
    F.prototype.sayHi=function(){
        alert("Hi");
    }
    return new F();
}
var person = {
    name:"Nicholas",
    friends:["shelby","court","van"]
};
// 以person为原型创建一个新实例
var anotherPerson = object(person);
anotherPerson.sayHi(); //"Hi"

function object(o){
    function F(){
        this.sayHi = function(){
            alert("Hi");
        }
    }
    F.prototype = o;
    // 返回新实例
    
    return new F();
}
var person = {
    name:"Nicholas",
    friends:["shelby","court","van"]
};
// 以person为原型创建一个新实例
var anotherPerson = object(person);
anotherPerson.sayHi(); //"Hi"

原因分析

function F(){}
F.sayHi = function(){
        alert("Hi");
    };

2017.03.15 F.sayHi是定义了“类”方法，因此创建的对象是没有该方法的

3.6 寄生组合式继承

组合继承无论在什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。

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);   //第二次调用SuperType()
    this.age=age;
}
SubType.prototype = new SuperType(); //第一次调用SuperType()

第一次调用SuperType构造函数时，SubType.prototype(SubType的原型)会得到两个属性：name和colors。当调用SubType构造函数时，又会调用一次SuperType构造函数，这一次又在新对象上创建了实例属性name和colors。于是这两个属性就屏蔽了原型中的两个同名属性

Markdown

为了避免创建两次相同的属性，解决方法——寄生组合式继承。其基本思想是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。

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);
};

上诉例子只调用了一次SuperType构造函数，因此避免了在SubType.prototype上面创建不必要的、多余的属性。寄生组合式继承是引用类型最理想的继承范式
相比之下，第二段程序少了SubType.prototype = new SuperType();这使得SubType.prototype中没有了name和colors属性，实现了避免了在SubType.prototype上面创建不必要的、多余的属性的目的。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,254评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,875评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,682评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,896评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,015评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,152评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,208评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,962评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,388评论 1赞 304
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,551评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,186评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2赞 351

推荐阅读更多精彩内容

  • 面向对象之继承详解（三）
    1.继承（接口继承和实现继承） 继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式...
    believedream阅读 945评论 0赞 3
  • 面向对象：创建对象&继承
    博客内容：什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,405评论 3赞 12
  • 6 面向对象的程序设计
    本章内容 理解对象属性 理解并创建对象 理解继承 面向对象语言有一个标志，那就是它们都有类的概念，而通过类可以创建...
    闷油瓶小张阅读 847评论 0赞 1
  • 天真的存在
    天真，天真？ 什么时候，大家对于天真是何其的赞赏，又如今，天真似乎开始变成了“傻B”的代名词 你有被别人评价过吗？...
    心在baby路上阅读 186评论 0赞 0
  • 十四行诗《情人节私语》
    在那遥远的地方 有位美丽的女郎 哦，我心爱的姑娘 我梦见你的脸庞 瞧瞧你的衣裳 你不是我的新娘 我不是你的情郎 不...
    狼吻与蝶花阅读 125评论 0赞 1