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

  }