美文网首页
JavaScript 原型链继承

JavaScript 原型链继承

作者: BlueSkyBlue | 来源:发表于2020-04-28 17:23 被阅读0次

实现继承的关键在于子类型的原型为父类型的实例对象。

//父类型
function Super() {
    this.superProp = 'Super Prop'
}

Super.prototype.showSuper = function () {
    console.log(this.superProp)
}

//子类型
function Sub() {
    this.subProp = 'Sub Prop'
}

Sub.prototype = new Super()
Sub.prototype.showSub = function () {
    console.log(this.subProp)
}

var sub = new Sub()
sub.showSuper()

其中关键的代码在于

Sub.prototype = new Super()

之后是这段代码的内部结构


内部结构

这里有一个问题需要注意,我们创建的是Sub的实例。但是我们查看浏览器的时候发现它的构造函数指向Super。



通过查看上述的原型链我们发现由于Sub函数对象指向了Super实例对象,改变了Sub原有的构造函数的位置。因此我们需要改一下代码:

Sub.prototype.constructor = Sub

借用构造函数继承

定义父类型的构造函数
定义子类型的构造函数
在子类型的构造函数中调用父类型的构造函数

关键:
在子类型的构造函数中通过call调用父类型的构造函数

例如:

function Person(name, age) {
    this.name = name
    this.age = age
}

function Student(name, age, price) {
    Person.call(this, name, age)
    this.price = price
}
var s = new Student('Tom', 12, 100)

原型链加借用构造函数的组合继承

  1. 利用原型链实现对父类型对象的方法的继承。
  2. 利用call()借用父类型构造函数初始化相同的属性。
function Person(name, age) {
    this.name = name
    this.age = age
}

Person.prototype.setName = function (name) {
    this.name = name
}

function Student(name, age, price) {
    Person.call(this, name, age)
    this.price = price
}
Student.prototype = new Person() //为了看到父类型的方法
Student.prototype.constructor = Student //修正构造方法
Student.prototype.setPrice = function (price) {
    this.price = price
}

相关文章

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • javascript原型链及继承的理解

    javascript:void(null)# 原型链及继承的理解 定义函数 继承 继承构造函数 继承静态属性 继承原型链

  • JavaScript的六种继承方式

    JavaScript的几种继承方式 原型链继承 借助构造函数继承(经典继承) 组合继承:原型链 + 借用构造函数(...

  • javaScript原型链

    javaScript原型链概念JavaScript之继承(原型链)数据结构var Person = functio...

  • JavaScript继承方式详解

    JavaScript实现继承的方式主要有两种: 原型链继承和借助构造函数继承 一、原型链继承 原型链继承的主要思想...

  • JS 继承

    1.原型链继承:prototype 2.原型链继承2:prototype 注意:JavaScript的类继承其实本...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

网友评论

      本文标题:JavaScript 原型链继承

      本文链接:https://www.haomeiwen.com/subject/ahpvwhtx.html