js 面向对象编程(二):构造函数的继承

组合继承

原理:使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。举例:

// 父类
const Person = function(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.sayName = function() {
    console.log(this.name)
}
// 子类
const Male = function(name, age) {
    // 继承属性
    Person.call(this, name, age)
    this.gender = 'male'
}
// 继承方法
Male.prototype = new Person()
// 把新的原型中的 constructor 指回自身
Male.prototype.constructor = Male

// test
const p1 = new Male('whh', 23)
console.log(p1)
// Male {name: "whh", age: 23, gender: "male"}

图解

弊端:调用了两次父类的构造函数,导致原型中产生了无效的属性。

寄生组合式继承

原理:通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。主要就是用一个空的构造函数,来当做桥梁,并且把其原型对象指向父构造函数的原型对象,并且实例化一个temp,temp会沿着这个原型链,去找到父构造函数的原型对象。举例:

// 父类
const Person = function(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.sayName = function() {
    console.log(this.name)
}
// 子类
const Male = function(name, age) {
    // 继承属性
    Person.call(this, name, age)
    this.gender = 'male'
}
// 寄生式组合继承
const extend = function(subType, superType) {
    const Temp = function() {}
    // 把Temp构造函数的原型对象指向superType的原型对象
    Temp.prototype = superType.prototype
    // 用构造函数Temp实例化一个实例temp
    let temp = new Temp()
    // 把子构造函数的原型对象指向temp
    subType.prototype = temp 
    // 把temp的constructor指向subType
    temp.constructor = subType
}
// 使用
extend(Male, Person)

// test
const p1 = new Male('whh', 23)
console.log(p1) 
// Male {name: "whh", age: 23, gender: "male"}

图解

这个例子的高效率体现在它只调用了一次 SuperType构造函数,并且因此避免了在 SubType.prototype上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用instanceofisPrototypeOf()

目前程序猿认为解决继承问题最好的方案

其他继承方式(不完美的)

参考: 掘金地址

原型式继承

// 原型式继承
function createObjWithObj(obj){ // * 传入一个原型对象
    function Temp(){}
    Temp.prototype = obj
    let o = new Temp()
    return o
}

// * 把Person的原型对象当做temp的原型对象
let temp = createObjWithObj(Person.prototype)

// * 也可以使用Object.create实现
// * 把Person的原型对象当做temp2的原型对象
let temp2 = Object.create(Person.prototype)

寄生式继承

// 寄生式继承
// 我们在原型式的基础上,希望给这个对象新增一些属性方法
// 那么我们在原型式的基础上扩展
function createNewObjWithObj(obj) {
    let o = createObjWithObj(obj)
    o.name = "whh"
    o.age = 23
    return o
}

拷贝继承

const extend2(Child, Parent) {
    let p = Parent.prototype
    let c = Child.prototype
        for (var i in p) {
        c[i] = p[i]
        }
  }

这个函数的作用,就是将父对象的prototype对象中的属性,一一拷贝给Child对象的prototype对象。使用的时候,这样写:

extend2(Male, Person)
let p1 = new Male("whh", 23);
console.log(p1.age) // 23
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意...
    霜天晓阅读 2,139评论 0 6
  • 普通创建对象和字面量创建对象不足之处:虽然 Object 构造函数或对象字面量都可以用来创建单个对象,但这些方式有...
    believedream阅读 2,429评论 2 18
  • 博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,447评论 3 12
  • 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化、多态、和封装几种技术。对 JavaSc...
    吴佳浩阅读 520评论 0 4
  • 偶然有那么一天,觉得家里生气太少,跟老婆大人商量买条狗子来养,老婆不同意,并举出了几十条不能养的理由,后来退而求其...
    段筱鱼阅读 275评论 1 1