zoukankan      html  css  js  c++  java
  • Javascript的继承

    引用infoQ的一片文章《JavaScript的实例化与继承:请停止使用new关键字》一段话:

    "

    传统的实例化与继承

    假设我们有两个类,Class:function Class() {}SubClass:function SubClass(){},SubClass需要继承自Class。传统方法一般是按如下步骤来组织和实现的:

    • Class中被继承的属性和方法必须放在Class的prototype属性中

    • SubClass中自己的方法和属性也必须放在自己prototype属性中
    • SubClass的prototype对象的prototype(__proto__)属性必须指向的Class的prototype

    "

    Class中被继承的属性和方法必须放在Class的prototype属性中

    // 声明一个class
    function Class() {}
    
    // 给class的prototype添加一个类方法method1
    Class.prototype.method1 = function() {
      console.log('class method1 called!');
    }
    
    // 创建实例
    var instance = new Class();
    // 调用类方法
    instance.method1();

    上面的Class既声明为一个类, 并且给Class添加两个类方法,类方法也是一个Function,但不能通过Class.prototype.method的方式直接调用,但是可以通过Class.prototype.method.call的方式调用或者实例调用。

    SubClass中自己的方法和属性也必须放在自己prototype属性中

    SubClass 也是一样通过prototype来添加自己的类方法

    SubClass的prototype对象的prototype(__proto__)属性必须指向的Class的prototype

    function Class() {}
    
    Class.prototype.print = function(s) {
      console.log('class print>' + s);
    }
    
    function SubClass() {
    Class.call(this);
    }
    // 通过Object.create来实现继承 SubClass.prototype = Object.create(Class.prototype) SubClass.prototype.add = function(a, b) { return (a+b); }

    // SubClass添加类成员变量
    SubClass.prototype.name = 'abc';
    // 创建subclass实例 var b = new SubClass();
    // 调用subclass类方法 var r = b.add(1, 20);
    // 调用父类Class的方法 b.print(r);

    理解prototype链对实现继承很关键:

    当实例b调用print方法时,先查找实例b(Object)有没有这样的function成员, 如果有则调用,没有则在SubClass的prototype(Object) 中查找,如果没有则在prototype.prototype(Object)中查找,顺着prototype链一直到找到为止,找不到就会报错。

    上面的示例代码是实现继承的基本原理。

  • 相关阅读:
    vue-loader
    slot内容分发
    单向数据流
    vue父子组件(1.0)
    vue组件
    vue过渡
    vue之自定义组件
    jquery下拉菜单
    vue之过滤器
    【数学】数学归纳法
  • 原文地址:https://www.cnblogs.com/lovelylife/p/3724817.html
Copyright © 2011-2022 走看看