ES6 继承（复习原型链继承）

最新推荐文章于 2025-05-05 13:03:40 发布

转载最新推荐文章于 2025-05-05 13:03:40 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3229305/blog/1648517

文章标签：

#python #javascript #ViewUI

本文介绍了两种JavaScript继承的方法：原型链继承和ES6的class继承。通过具体代码实例展示了如何使用原型链实现属性和方法的继承，并演示了ES6中如何通过class关键字定义父类和子类，实现方法覆盖及新增特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

原型链继承

<script type="text/javascript">
  /* 原型链 继承 */
  function Animal(name){//parent
    this.name = name || "未知";
    this.say = function(){
      console.log(this.name + " says interesting....");
    }
  }
  Animal.prototype.eat = function(){
    console.log(this.name + " can eat...");
  }

  //临时构造函数  这里省略下方的 Dog.prototype = new F();可以替换成Dog.prototype = Object.create(Animal.prototype);
  function F(){}

  function Dog(name){//child
    Animal.apply(this,arguments);
  }

  F.prototype = new Animal()
  Dog.prototype = new F();

  Dog.prototype.run = function(){
    console.log(this.name + " run....");
  }

  var  dog = new  Dog("tom");
  dog.say();
  dog.eat();
  dog.run();
</script>

ES6继承

<script type="text/javascript">
  /* ES6 继承 */
  class Parent{
    constructor(name){
      this.name = name;
    }
    say(){
      console.log("parent has say method. " + this.name);
    }
  }

  class Child extends Parent{
    constructor(name){
      super(name);
    }

    fly(){
      console.log("chid can fly...");
    }
  }
  var p = new Child("tom");
  p.say();
  p.fly();
</script>