js繼承實現，包括es6的class繼承

本文轉載自查看原文 2017-04-17 00:13 10254 JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>繼承</title>
</head>

<body>
  <script>
  /**
   * [使用對象冒充實現繼承（多繼承）]
   */
  function Parent(name) {
    this.name = name
    this.sayName = function() {
      console.log(this.name)
    }
  }
  var iParent = new Parent('james')
  iParent.sayName()

  function Child(name) {
    this.parent = Parent
    this.parent(name)
    delete this.parent
    this.saySome = function() {
      console.log('my name: ' + this.name)
      this.sayName()
    }
  }

  var iChild = new Child('kobe')
  iChild.saySome()
  console.log(iChild.constructor)

  /** 
   * Call/Apply方法改變函數上下文實現繼承（該種方式不能繼承原型鏈，若想繼承原型鏈，則采用混合模式）
   * 實現原理：改變函數內部的函數上下文this，使它指向傳入函數的具體對象
   */
  function Parent(firstname) {
    this.fname = firstname;
    this.age = 28;
    this.sayAge = function() {
      console.log(this.age);
    }
  }

  function Child(firstname) {
    Parent.call(this, firstname); // 將this傳給父構造函數
    //Parent.apply(this, [firstname]); // 與call作用相同
    this.saySomeThing = function() {
      console.log(this.fname);
      this.sayAge();
    }
    this.getName = function() {
      return firstname;
    }
  }
  var myChild = new Child('Lee');
  myChild.saySomeThing();
  console.log(myChild.constructor)
  myChild.constructor == Child; // true

  /**
   * 原型鏈實現繼承
   * 實現原理：使子類原型對象指向父類的實例以實現繼承，即重寫類的原型，弊端是不能直接實現多繼承
   */
  function Parent() {
    this.sayAge = function() {
      console.log(this.age);
    }
  }

  function Child(firstname) {
    this.fname = firstname;
    this.age = 28;
    this.saySomeThing = function() {
      console.log(this.fname);
      this.sayAge();
    }
  }
  Child.prototype = new Parent();
  var myChild = new Child('Lee');
  myChild.saySomeThing(); // Lee 28

  /**
   * 混合模式
   */
  function Parent() {
    this.sayAge = function() {
      console.log(this.age);
    }
  }
  Parent.prototype.sayParent = function() {
    alert('This is parent!');
  }

  function Child(firstname) {
    Parent.call(this);
    this.fname = firstname;
    this.age = 28;
    this.saySomeThing = function() {
      console.log(this.fname);
      this.sayAge();
    }
  }
  Child.prototype = new Parent();
  var myChild = new Child('Lee');
  myChild.saySomeThing();
  myChild.sayParent();
  console.log(myChild.constructor)

  function Parent(hello) {
    this.hello = hello;
  }
  Parent.prototype.sayHello = function() {
    alert(this.hello);
  }

  function Child(hello, world) {
    Parent.call(this, hello); //將父類的屬性繼承過來 
    this.world = world; //新增一些屬性 
  }
  Child.prototype = new Parent(); //將父類的方法繼承過來 
  Child.prototype.sayWorld = function() { //新增一些方法 
    alert(this.world);
  }
  var c = new Child("zhangsan", "lisi");
  c.sayHello();
  c.sayWorld();

  /**
   * es6繼承
   */
  class Animal {
    //構造函數
    constructor(props) {
      this.name = props.name || '未知';
    }

    eat() {
      alert(this.name + "在吃東西...");
    }
  }

  //class繼承
  class Bird extends Animal {
    //構造函數
    constructor(props) {
      //調用實現父類的構造函數
      super(props);
      this.type = props.type || "未知";
    }

    fly() {
      alert(this.name + "在飛...");
    }
  }
  var myBird = new Bird({
    name: '鸚鵡'
  })
  myBird.eat()
  myBird.fly()
  </script>
</body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 理解 es6 中class構造以及繼承的底層實現原理 JS的ES6的class JS創建對象、繼承原型、ES6中class繼承 es6的class繼承和es5的繼承有啥區別？ ES6 | 關於class類繼承總結 ES6中class的使用+繼承 es6實現繼承詳解 js之ES6的Class類 ES6新特性5：類(Class)和繼承(Extends) ES6繼承語法