JavaScript_原型链继承

1.原型链继承

<script type="text/javascript">
  function Supper() {
    this.supProp = "Supper"
  }
  Supper.prototype.showSupperProp = function () {
    console.log(this.supProp)

  }
  function Sub() {
    this.subProp = "Sub"

  }
  Sub.prototype.showSubProp = function () {
    console.log(this.subProp)
  }
  //子类的原型等于父类的实例对象
  //想看到谁的实例的方法就等于谁的实例
  //以前是Sub.prototype = new Object() /{}
  Sub.prototype = new Supper()
  //让子类型的原型的contructor指向子类型
  Sub.prototype.constructor = Sub
  var s = new Sub()
  s.showSupperProp()
script>
      

下面的图为内存的图

Supper和Sub都创造了其函数对象和对应的实例对象Object,由于

Sub.prototype = new Supper()      

这句话即创造了Supper的实例对象也使得Sub的函数对象指向了Supper的实例对象,然后原来Sub函数对象指向的Object实例对象就成了废弃的。

下面的

Sub.prototype.constructor = Sub      

是为了使得子类型的原型的contructor指向子类型

不然就会引发一些不必要的错误

2.借用构造函数继承

这是假的继承,其实没有继承，只是为了获取其属性

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", 22, 100)
  console.log(s.name, s.age, s.price)      

通过call的方法获取其属性

但是实际上没有发生继承关系

3.组合继承

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

  }