JavaScript实现原型继承

最近一直遇到JS继承的问题,在这里分享下JS原型继承:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript原型继承</title>
  </head>
  <body>
    <script type="text/javascript">

      // 使用表达式来定义一个 超类
      var SuperClass = function () {
            // 超类中包含属性:
            this.name = 'default';
            this.age = 0;
            this.sex = 'Notknow';
            this.idCard = 'Unknow';
      }

      /*
          定义超类原型实例
          SuperClass.prototype.xxx = xxx 和 SuperClass.prototype = xxx 这两种写法是有区别的,
          前者仅仅是在原型上添加属性,而后者覆盖了原来的原型实例,这样造成的后果是原构造函数的丢失,需要重新定义构造函数的指向问题
      */
      SuperClass.prototype = {
        constructor: SuperClass,
        // 定义 set 方法
        $set: function (name, age, sex, idCard) {
            throw ReferenceError('请子类覆写该方法');
        },
        // 定义 get 方法
        $get: function () {
            throw ReferenceError('请子类覆写该方法');
        }
      }
      // 使用表达式来定义一个 子类
      var ChildClass = function () {
          // 子类中包含的属性:
          this.touxiang = 'https://www.baidu.com/images/logo.jpg';
      }
      // 使用原型继承超类方法
      ChildClass.prototype = new SuperClass();
      // 这里如果不把构造函数重新指向函数本身则构造函数会指向超类
      ChildClass.prototype.constructor = ChildClass;
      // 覆写超类中的函数
      ChildClass.prototype.$set = function (name, age, sex, idCard, touxiang) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.idCard = idCard;
        this.touxiang = touxiang;
      }
      ChildClass.prototype.$get = function () {
          return {
            name: this.name,
            age: this.age,
            sex: this.sex,
            idCard: this.idCard,
            touxiang: this.touxiang
          }
      }
      var t1 = new ChildClass();
      // t1.touxiang = 'https://360.com/img/logo_360.png';
      t1.$set('My Join', 20, 'Man', '3000000684728X', 'https://360.com/img/logo_360.png');
      console.log(t1.$get());
      t1.$set('Bob', 18, 'Man', '403201020202', 'https://www.baidu.com/img/logo.jpg');
      console.log(t1.$get());
    </script>
  </body>
</html>

以上就是我对JS原型继承的理解,如果有不同的看法请留言告诉我 ^_^。

0条评论