第十三章 继承

为何用“继承”为标题,而不用“原型链”?

原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆。而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中的继承又完全是两回事儿。因此,这里把“继承”着重拿出来,就为了体现这个不同。

javascript中的继承是通过原型链来体现的。先看几句代码

function Foo() {};
Foo.prototype.a = 10;
Foo.prototype.b = 20;

var obj = new Foo();
obj.a = 1;

console.log(obj.a); // 1
console.log(obj.b); // 20

以上代码中,obj是Foo函数new出来的对象,obj.a是obj对象的基本属性,obj.b是怎么来的呢?——从Foo.prototype得来,因为obj._proto_指向的是Foo.prototype

访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着_proto_这条链向上找,这就是原型链。

也就是访问一个对象属性的时候,在基本属性中先查找,如果找到了直接返回,找不到的话,顺着原型链继续查找,如果找到了就返回,找不到返回undifined。

那么我们在实际应用中如何区分一个属性到底是基本的还是从原型中找到的呢?大家可能都知道答案了——hasOwnProperty,特别是在for…in…循环中,一定要注意。

for(var key in obj) {
    console.log(key); // a b
}
for(var key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key);  // a
    }
}

For…in循环会将对象原型链上的属性都遍历到,hasOwnProperty这个方法我们没有定义在obj里面啊,从哪里来?对象的原型链是沿着_proto_这条线走的,因此在查找obj.hasOwnProperty属性时,就会顺着原型链一直查找到Object.prototype。

由于所有的对象的原型链都会找到Object.prototype,因此所有的对象都会有Object.prototype的方法。这就是所谓的“继承”。

当然这只是一个例子,你可以自定义函数和对象来实现自己的继承。

说一个函数的例子吧。

我们都知道每个函数都有call,apply方法,都有length,arguments,caller等属性。为什么每个函数都有?这肯定是“继承”的。函数由Function函数创建,因此继承的Function.prototype中的方法。不信可以请微软的Visual Studio老师给我们验证一下:

jicheng1.png

看到了吧,有call、length等这些属性。

那怎么还有hasOwnProperty呢?——那是Function.prototype继承自Object.prototype的方法。有疑问可以看看上一节将instanceof时候那个大图,看看Function.prototype._proto_是否指向Object.prototype。

所以JavaScript的继承也可以说是通过原型链(_proto_)查找到原型(prototype)而实现的。

继承的五种方式

下面我们创建了两个构造函数:

父类

function Parent() {
    this.value = 'Super';
}

子类:

function Child(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        return this.name + ' ' + this.age + 'is runing!';
    };
}

JavaScipt种的继承实际上是使用原型链来实现的。继承的意思,实际上就是让子类可以使用父类上的属性方法。我认为,也就是修改原型链的指向,获得父类prototype的属性集合。

一、原型链方法

这种方法很常见,如果子类的prototype原型指向了,超类(Parent)的实例,那就可以使用所有超类的属性了。

function Child(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        return this.name + ' ' + this.age + 'is runing!';
    };
}
Child.prototype = new Parent();
// 将子类的prototype 赋值为 父类的实例,这样就继承了父类上的属性和方法。

var xiaoming = new Child('xiaoming', 12);
console.log(xiaoming.value);    // Super 可以调用到父类的value属性

这样写会有一个问题:

console.log(Child.prototype.constructor);
// ƒ Parent() { this.value = 'Super'; }
// 这里的构造器指向了父类,这样很怪异,毕竟我们是通过子类创建的实例
// 手动矫正一下
Child.prototype.constructor = Child;
// 指向子类构造函数本身

还有一个问题是引用类型属性共享的问题;

首先父类更改为:

function Parent() {
    this.value = 'Super';
    this.hobby = ['爬山', '学习'];
}

创建两个子类实例,小白和小丽,并输出他们继承父类的爱好属性:

const xiaobai = new Child('小白', 11);
const xiali = new Child('小丽', 15);

console.log(xiaobai.hobby);
// ["爬山", "学习"]
console.log(xiaoli.hobby);
// ["爬山", "学习"]

给小白的爱好增加一项看书,我们会发现:

xiaobai.hobby.push('看书');

console.log(xiaobai.hobby);
// ["爬山", "学习", "看书"]
console.log(xiaoli.hobby);
// ["爬山", "学习", "看书"]

因为两者的prototype指向的是同一个父类实例对象。而对象是引用类型,所以更改其中一项的值,另外一项也会改变。

当然,原型链方法还有一个问题,那就是无法向父类传参。

二、借用构造函数

第一种方法也是最简单的方法,在这里,我们借用call/apply函数可以改变函数作用域的特性,在子类中调用父类构造函数,复制父类的属性。此时没调用一次子类,复制一次。此时,每个实例都有自己的属性,不共享。同时我们可以通过call/apply函数给父类传递参数。

父类:

function Parent(value) {
    this.value = value;
    this.hobby = ['爬山', '学习'];
}

子类:

function Child(value) {
    Parent.call(this, value);
}

使用call/apply这种方式,有效解决了共享属性这个问题(实际上每次新建一个子类的同时,也新建了一个父类此处个人理解,如有问题请指正),也解决了传参问题:

const xiaobai = new Child('xiaobai');
const xiaoli = new Child('xiaoli');

xiaobai.hobby.push('看书');

console.log(xiaobai.value); // xiaobai
console.log(xiaoli.value);  // xiaoli

console.log(xiaobai.hobby);
// ["爬山", "学习", "看书"]
console.log(xiaoli.hobby);
// ["爬山", "学习"]

上述方法也存在一个问题,共享的方法都在构造函数中定义,无法达到函数复用的效果。也就是如果父类上的一些可以共享的方法属性无法复用,每个子类都是一套单独子类与继承结合。

三、组合继承

根据上述两种方式,我们可以扬长避短,将需要共享的属性使用原型链继承的方法继承,将实例特有的属性,用借用构造函数的方式继承。

父类:

function Parent() {
    this.hobby = ['爬山', '学习'];
}
Parent.prototype.sayHi = function () {
    return 'hello world!';
};

子类:

// 构造函数继承
function Child() {
    Parent.call(this);
}

// 原型链继承
Child.prototype = new Parent();

创建两个实例输出两个实例的hobby:

const xiaobai = new Child('xiaobai');
const xiaoli = new Child('xiaoli');

console.log(xiaobai.hobby);
// ["爬山", "学习"]
console.log(xiaoli.hobby);
// ["爬山", "学习"]

修改其中一个hobby,两者不会相互影响:

xiaobai.hobby.push('看书');

console.log(xiaobai.hobby);
// ["爬山", "学习", "看书"]
console.log(xiaoli.hobby);
// ["爬山", "学习"]

两个实例继承的共同属性:

console.log(xiaobai.sayHi()); // hello world!
console.log(xiaoli.sayHi());  // hello world!

为什么说继承的是同一个属性?我们在这后面修改一下sayHi

Parent.prototype.sayHi = function() {
    return 'hello 2019!';
}

console.log(xiaobai.sayHi()); // hello 2019!
console.log(xiaoli.sayHi());  // hello 2019!

到这里的时候我有一个疑问,构造函数继承和原型链继承同时使用,为什么就会共享同一个属性了?为什么hobby就不被影响了。call方法其实就是将父类的指向改为子类实例对象,而这个函数的prototype上的属性并没有被继承来。而原型链继承,才具有hobby属性和sayHi两个属性。

const xiaobai = new Child('xiaobai');
const xiaoli = new Child('xiaoli');

xiaobai.hobby.push('看书');

console.log(xiaobai);
console.log(xiaoli);
jicheng.png

实例创建的时候有了自己的hobby属性,所以不需要去prototype上查找。蓝色为自己的hobby属性,红色是继承来的属性。

上述方法,虽然综合了原型链和借用构造函数的优点,达到了我们想要的结果,但是它存在一个问题。就是创建一次实例时,两次调用了父类构造函数。

为什么调用两次现在就很清楚了。有两个hobby属性嘛...

// 构造函数继承
function Child(value) {
    Parent.call(this);
    // 第二次创建对象,并创建bobby属性
}

// 原型链继承
Child.prototype = new Parent(); 
// 第一次调用父类构造函数生成实例,获得了hobby属性

四、寄生式继承

与寄生构造函数和工厂模式类似,创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回对象。

function createAnother(original) {
    var clone = new Object(original);
    clone.sayHi = function () {
        console.log('hello world');
    };
    return clone;
}

var xiaoming = {
    name: '小明',
    friend: ['李白', '杜甫']
};

var xiaobai = {
    name: '小白',
    friend: ['李白', '杜甫']
};

createAnother(xiaoming);
xiaoming.friend.push('白居易');
console.log(xiaoming.friend);
// ["李白", "杜甫", "白居易"]
createAnother(xiaobai);
console.log(xiaobai.friend);
// ["李白", "杜甫"]

在上述例子中,createAnother函数接收了一个参数,也就是将要作为新对象基础的对象。

小白和小明是基于createAnother创建的一个新对象,新对象不仅具有自己的所有属性和方法,还有自己的共同的sayHi()方法。

五、寄生组合式继承

寄生组合式继承就是为了解决组合继承种调用两次父类的情况:

// 创建只继承原型对象的函数
    function inheritPrototype(parent, child) {
        // 创建一个原型对象副本
        var prototype = new Object(parent.prototype);
        // 设置constructor属性
        prototype.constructor = child;
        child.prototype = prototype;
    }

    // 父亲类
    function Parent() {
        this.color = ['pink', 'red'];
    }
    Parent.prototype.sayHi = function() {
        console.log('Hi');
    }

    // 儿子类
    function Child() {
        Parent.call(this);
    }

    inheritPrototype(Parent, Child);

六、原型式继承

思想:基于已有的对象创建对象。

function createAnother(o) {
        // 创建一个临时构造函数
        function F() {

        }
        // 将传入的对象作为它的原型
        F.prototype = o;
        // 返回一个实例
        return new F();
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,490评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,581评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,830评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,957评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,974评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,754评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,464评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,847评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,995评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,137评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,819评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,482评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,023评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,149评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,409评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,086评论 2 355

推荐阅读更多精彩内容