ES6面向对象和继承：基础

最新推荐文章于 2023-06-03 20:31:49 发布

原创最新推荐文章于 2023-06-03 20:31:49 发布 · 171 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ES6面向对象和继承——基础

ES6 专栏收录该内容

8 篇文章

订阅专栏

本文对比了ES6中面向对象编程的传统写法与新写法。介绍了如何使用class关键字定义类，通过constructor构造器初始化对象属性，并直接在类中添加方法。同时，探讨了如何利用extends关键字实现类的继承，以及super调用父类构造器。

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

ES6面向对象和继承——基础：
1、传统写法

<script>
  function User(name, pass) {
      // 弊端：User既是一个构造函数，也是一个类
      this.name = name;
      this.pass = pass;
  }

  // 原型加载
  User.prototype.showName = function() {
      alert(this.name);
  }

  User.prototype.showPass = function() {
      alert(this.pass);
  }

  // 继承
  function VipUser(name, pass, level) {
      User.call(this, name, pass);

      this.level = level;
  }

  VipUser.prototype = new User();
  VipUser.prototype.constructor = VipUser;

  VipUser.prototype.showLevel = function() {
      alert(this.level);
  };

  var user1 = new User('hr226', '123456');
  var vipUser1 = new VipUser('hr226', '123456', 5)

  user1.showName();
  user1.showPass();

  vipUser1.showName();
  vipUser1.showPass();
  vipUser1.showLevel();
</script>

2、ES6新写法：
1、关键字class、构造器和类分开了
2、class里边可以直接加方法

<script>
  class User {
      // User是一个构造函数或构造器
      // constructor构造器
      constructor(name, pass) {
          this.name = name;
          this.pass = pass;
      }

      // 注意：请不要加上function
      // 如：这样的格式：showName:function(){}，这是错误的
      showName() {
          alert(this.name);
      }

      // 注意：请不要在两个函数之间（即在showName(){}, ;的函数结尾处）加上逗号或分号，
      showPass() {
          alert(this.pass);
      }
  }

  // 继承
  class VipUser extends User {
      constructor(name, pass, level) {
          // super：超类、父类、基类
          super(name, pass);

          this.level = level;
      }

      showLevel() {
          alert(this.level);
      }
  }

  var vipUser1 = new VipUser('hr226', '123456', 5)

  vipUser1.showName();
  vipUser1.showPass();
  vipUser1.showLevel();
</script>