Javascript 继承

原文链接：

JavaScript面向对象详解（一）
JavaScript面向对象详解（二）
JavaScript面向对象详解（三）
JavaScript面向对象详解（四）
继承的优缺点整理链接

概述

  • 本文只做整理知识

什么是原型链

1.当以读取模式访问一个实例属性时，首先会在实例中搜索该属性。如果没有找到该属性，则会继续搜索实例的原型。在通过原型链实现继承的情况下，搜索过程就得以沿着原型链继续向上。
2.在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。

继承的方式有哪些：

  • 1、原型链继承
  • 2、借用构造函数继承
  • 3、组合继承（组合原型链继承和借用构造函数继承）
  • 4、原型式继承
  • 5、寄生式继承
  • 6、寄生组合式继承

一、原型链继承

  • 代码
// 1.定义Animal的构造函数
function Animal() {
    this.colors = ["red", "green"]
}

// 2.给Animal添加方法
Animal.prototype.animalFunction = function () {
    console.log(this.colors)
}

// 3.定义Person的构造函数
function Person() {
    this.personProperty = "Person"
}

// 4.给Person赋值新的原型对象
Person.prototype = new Animal()

// 5.给Person添加方法
Person.prototype.personFunction = function () {
    console.log(this.personProperty)
}

// 6.创建Person对象, 并且调用方法
var person1 = new Person()
var person2 = new Person()

console.log(person1.colors) // red,green
console.log(person2.colors) // red,green

person1.colors.push("blue")

console.log(person1.colors) // red,green,blue
console.log(person2.colors) // red,green,blue

// 创建Person的实例
var person = new Person();
person.animalFunction(); // red,green,blue
person.personFunction(); //Person

  • 原型链的其他问题:
    1.原型链存在最大的问题是关于引用类型的属性.
    2.通过上面的原型实现了继承后, 子类的person对象继承了(可以访问)Animal实例中的属性(animalProperty).
    3.但是如果这个属性是一个引用类型(比如数组或者其他引用类型), 就会出现问题.
    4.在创建子类型的实例时，不能向父类型的构造函数中传递参数。
    5.实际上，应该说是没有办法在不影响所有对象实例的情况下，给父类型的构造函数传递参数。
    6.从而可以修改父类型中属性的值, 在创建构造函数的时候就确定一个值.

  • 原型链简单总结:
    1.通过实现原型链，本质上扩展了本章前面介绍的原型搜索机制。
    2.当以读取模式访问一个实例属性时，首先会在实例中搜索该属性。如果没有找到该属性，则会继续搜索实例的原型。在通过原型链实现继承的情况下，搜索过程就得以沿着原型链继续向上。
    3.在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。

二、借用构造函数继承（经典继承）

  • 代码
// 创建Animal的构造函数
function Animal() {
    this.colors = ["red", "green"]
}

// 创建Person的构造函数
function Person() {
    // 继承Animal的属性
    Animal.call(this)

    // 给自己的属性赋值
    this.name = "Coderwhy"
}

// 创建Person对象
var person1 = new Person()
var person2 = new Person()

console.log(person1.colors) // red,greem
console.log(person2.colors) // red,greem
person1.colors.push("blue")
console.log(person1.colors) // red,green,blue
console.log(person2.colors) // red,green
  • 代码解析:
    1.我们通过在Person构造函数中, 使用call函数, 将this传递进去.
    2.这个时候, 当Animal中有相关属性初始化时, 就会在this对象上进行初始化操作.
    3.这样就实现了类似于继承Animal属性的效果.
  • 经典继承的问题:
    1.对于经典继承理解比较深入, 你已经能发现: 经典继承只有属性的继承, 无法实现方法的继承.
    2.因为调用call函数, 将this传递进去, 只能将父构造函数中的属性初始化到this中.
    3.但是如果函数存在于父构造函数的原型对象中, this中是不会有对应的方法的.
  • 回顾原型链和经典继承:
    1.原型链存在的问题是引用类型问题和无法传递参数, 但是方法可以被继承
    2.经典继承是引用类型没有问题, 也可以传递参数, 但是方法无法被继承.
    3.怎么办呢? 将两者结合起来怎么样?

三、组合继承

  • 描述：组合继承（原型链和经典继承组合）
  • 组合继承思想:
    1.组合继承就是发挥原型链和经典继承各自的优点来完成继承的实现.
    2.使用原型链实现对原型属性和方法的继承.
    3.通过经典继承实现对实例属性的继承, 以及可以在构造函数中传递参数.
  • 代码
// 1.创建构造函数的阶段
// 1.1.创建Animal的构造函数
function Animal(age) {
    this.age = age
    this.colors = ["red", "green"]
}

// 1.2.给Animal添加方法
Animal.prototype.animalFunction = function () {
    console.log("Hello Animal")
}

// 1.3.创建Person的构造函数
function Person(name, age) {
    Animal.call(this, age)
    this.name = name
}

// 1.4.给Person的原型对象重新赋值
Person.prototype = new Animal(0)

// 1.5.给Person添加方法
Person.prototype.personFunction = function () {
    console.log("Hello Person")
}

// 2.验证和使用的代码
// 2.1.创建Person对象
var person1 = new Person("Coderwhy", 18)
var person2 = new Person("Kobe", 30)

// 2.2.验证属性
console.log(person1.name + "-" + person1.age) // Coderwhy,18
console.log(person2.name + "-" + person2.age) // Kobe,30

// 2.3.验证方法的调用
person1.animalFunction() // Hello Animal
person1.personFunction() // Hello Person

// 2.4.验证引用属性的问题
person1.colors.push("blue")
console.log(person1.colors) // red,green,blue
console.log(person2.colors) // red,green
  • 组合继承存在什么问题呢?
    1.组合继承最大的问题就是无论在什么情况下, 都会调用两次父类构造函数.
    2.一次在创建子类原型的时候
    3.另一次在子类构造函数内部(也就是每次创建子类实例的时候).
    4.所有的子类实例事实上会拥有两份父类的属性
    5.一份在当前的实例自己里面(也就是person本身的), 另一份在子类对应的原型对象中(也就是person.proto里面)
    6.当然, 这两份属性我们无需担心访问出现问题, 因为默认一定是访问实例本身这一部分的.

四、原型式继承

  • 代码
// 使用原生式继承
var person = {
    name: "Coderwhy",
    colors: ["red", "green"]
}

// 封装object()函数
function object(o) {
    function F() {}
    F.prototype = o
    return new F()
}

// 通过person去创建另外一个对象  Object.create(person) 相当于 object(person)
var person1 = Object.create(person)
person1.name = "Kobe"
person1.colors.push("blue")

console.log(person1.name) // Kobe
console.log(person1.colors) // red,green,blue

console.log(person.name) // Coderwhy
console.log(person.colors) // red,green,blue
  • 代码解析:
    1.这种方式和我们传统意义上理解的继承有些不同. 它做的事情是通过一个对象去创建另外一个对象.(利用person去创建person1)
    2.当然, person1中继承过来的属性是放在了自己的原型对象中的.
    3.也可以给person1自己再次添加name属性, 这个时候name才是在实例本身中.
  • 原型式继承的问题：
    1.如果我们只是希望一个对象和另一个对象保持类似的情况下, 原型式继承完全可以胜任, 这是它的优势.
    2.但是, 原型式继承依然存在属性共享的问题, 就像使用原型链一样.

五、寄生式继承

  • 思想：寄生式继承的思路是结合原型类继承和工厂模式的一种方式
  • 代码
// 封装object函数
function object(o) {
    function F() {}
    F.prototype = o
    return new F()
}

// 封装创建新对象的函数
function createAnother(original) {
    var clone = object(original)
    clone.sayHello = function () {
        console.log("Hello JavaScript")
    }
    return clone
}

// person对象
var person = {
    name: "Coderwhy",
    colors: ["red", "green"]
}

// 新的对象
var person1 = createAnother(person)
person1.sayHello()
  • 代码解读:
    1.我们基于person对象, 创建了另外一个对象person1.
    2.在最新的person1对象中, 不仅会拥有person的属性和方法, 而且还有自己定义的方法
  • 寄生式继承存在的问题:
    1.寄生式继承和原型式继承存在一样的问题, 引用类型会共享. (因为是在原型式继承基础上的一种封装)
    2.另外寄生式继承还存在函数无法复用的问题, 因为每次createAnother一个新的对象, 都需要重新定义新的函数.

六、寄生组合式继承

  • 代码
// 定义object函数
function object(o) {
    function F() {}
    F.prototype = o
    return new F()
}

// 定义寄生式核心函数
function inhreitPrototype(subType, superType) {
    var prototype = object(superType.prototype)
    prototype.constructor = subType
    subType.prototype = prototype
}

// 定义Animal构造函数
function Animal(age) {
    this.age = age
    this.colors = ["red", "green"]
}

// 给Animal添加方法
Animal.prototype.animalFunction = function () {
    console.log("Hello Animal")
}

// 定义Person构造函数
function Person(name, age) {
    Animal.call(this, age)
    this.name = name
}

// 使用寄生组合式核心函数
inhreitPrototype(Person, Animal)

// 给Person添加方法
Person.prototype.personFunction = function () {
    console.log("Hello Person")
}
  • 优点：
    1.这种方式的高效体现在现在它只调用了一次Animal的构造函数.
    2.并且也避免了在原型上面多出的多余属性, 而且原型之间不会产生任何的干扰(子类型原型和父类型原型之间).
    3.在ES5中, 普遍认为寄生组合式继承是最理想的继承范式.

全部继承的总结

一、原型链继承

  • 重点：
    • 1、让子实例的原型等于父类的实例。
  • 优点：
    • 1、实例可继承的属性有：实例的属性和方法，父类实例的属性和方法，父类原型的属性和方法。
  • 缺点：
    • 1、子实例无法向父类构造函数传参。
    • 2、继承单一。
    • 3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）

二、借用构造函数继承

  • 重点：
    • 用.call()和.apply()将父类构造函数引入子类构造函数（在子类函数中做了父类函数的自执行（复制））
  • 优点：
    • 1、只继承了父类构造函数的属性和方法，没有继承父类原型的属性和方法。
    • 2、在子实例中可向父实例传参。
    • 3、解决了原型链继承缺点1、2、3。
    • 4、可以继承多个构造函数属性（call多个）。
  • 缺点：
    • 1、只能继承父类构造函数的属性。

三、组合继承

  • 重点：
    • 结合了两种模式的优点（原型链继承和借用构造函数继承），传参和复用
  • 优点：
    • 1、可以继承父类原型上的属性，可以传参，可复用。
    • 2、每个新实例引入的构造函数属性是私有的。
  • 缺点：
    • 1、会调用两次父类构造函数，一次在创建子类原型的时候，另一次在子类构造函数内部(也就是每次创建子类实例的时候).
    • 2、所有的子类实例事实上会拥有两份父类的属性
      一份在当前的实例自己里面(也就是person本身的), 另一份在子类对应的原型对象中(也就是person.proto里面)

四、原型式继承

  • 重点：
    • 1、用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。
  • 优点：
    • 1、类似于复制一个对象，用函数来包装。
  • 缺点：
    • 1、所有实例都会继承原型上的属性。
    • 2、原型式继承依然存在属性共享的问题, 就像使用原型链一样.

五、寄生式继承

  • 重点：
    • 1、寄生式继承的思路是结合原型类继承和工厂模式，封装继承过程的函数, 该函数在内部以某种方式来增强对象, 最后再将这个对象返回.
  • 优点：
    • 1、没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。
  • 缺点：
    • 1、寄生式继承和原型式继承存在一样的问题, 引用类型会共享. (因为是在原型式继承基础上的一种封装)
    • 2、寄生式继承还存在函数无法复用的问题, 因为每次createAnother一个新的对象, 都需要重新定义新的函数.

六、寄生组合式继承（完美）

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

推荐阅读更多精彩内容

  • Javascript的继承与多态
    本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较，然后再介绍es6中对类继承的支持以及...
    lazydu阅读 16,661评论 7赞 44
  • 深入JavaScript继承原理
    javascript继承 ES6之前，JavaScript本质上不能算是一门面向对象的语言，因为它对于封装，继承，...
    程序员不存在的阅读 616评论 1赞 0
  • JavaScript 继承
    JavaScript 继承机制的设计思想就是，原型对象的所有属性和方法，都能被实例对象共享。所以我们只要改变对象的...
    Kevin丶CK阅读 276评论 0赞 1
  • JavaScript继承
    前言  在面向对象编程中，对象的继承是很重要的一个概念。A 对象通过继承 B 对象，就能直接拥有 B 对象的所有属...
    agamgn阅读 119评论 0赞 1
  • 对JavaScript继承的理解
    本篇文章会分别从ES5和ES6的角度上来学习JS的继承。 由于js不像java那样是真正面向对象的语言，js是基于...
    充满正能量的灰灰阅读 443评论 0赞 2