• js继承方式


    1.原型链

    • 实现的本质是重写原型对象,代之以一个新类型的实例;
    • 给原型添加方法的代码一定放在替换原型的语句之后;
    • 不能使用对象字面量查收能见原型方法,这样会重写原型链。
    • 缺点:包含引用类型值的原型属性会被所有实例共享;在创建子类型时,不能向超类型的构造函数中传递参数。

    2.借用构造函数

    • 在子类型构造函数的内部调用超类型构造函数;
    • 可以在子类型构造函数中向超类型构造函数传递参数;
    • 缺点:方法都在构造函数中定义,无法函数复用,且在超类型的原型中定义的方法对子类型不可见的。

    3.组合继承

    • 使用原型链实现对原型属性和方法的继承,借用构造函数实现对实例属性的继承;
    • 缺点:无论什么情况下都会调用两次超类型构造函数(一次在查收能见子类型原型时,一次是在子类型构造函数内部)
    • function Parent(name) {
          this.name = name;
          this.arr = [1, 2, 3];
      }
      Parent.prototype.sayName = function(){
          console.log(this.name);
      };
      function Child(name, age) {
          Parent.call(this, name);           // 第二次调用Parent
          this.age = age;
      }
      Child.prototype = new Parent();        // 第一次调用Parent
      Child.prototype.constructor = Child;
      Child.prototype.sayAge = function() {
          console.log(this.age);
      };
      var a = new Child('cc', 20);

    4.原型式继承

    • Object.create()规范了原型式继承,可以接收两个参数(用作新对象原型的对象,为新对象定义额外属性的对象);
    • 缺点:包含引用类型值的属性始终会共享相应的值。

    5.寄生式继承

    • 创建一个仅用于封装继承过程的函数,在函数内部增强对象,最后返回对象;
    • 缺点:不能函数复用而降低效率。

    6.寄生组合式继承

    • 通过借用构造函数继承属性,通过原型链继承方法;
    • 不必为了指定子类型的原型调用超类型的构造函数,我们只需要超类型原型的一个副本即可;使用寄生式继承来继承超类型原型,再将结果指定给子类型原型;
    • 只调用了一次超类型构造函数。
    • function inheritPrototype(child, parent) {
          var prototype = Object.create(parent.prototype);
          prototype.constructor = child;
          child.prototype = prototype;
      }
      function Parent(name) {
          this.name = name;
          this.arr = [1, 2, 3];
      }
      Parent.prototype.sayName = function(){
          console.log(this.name);
      };
      function Child(name, age) {
          Parent.call(this, name);           
          this.age = age;
      }
      inheritPrototype(Chid, Parent);
      Child.prototype.sayAge = function() {
          console.log(this.age);
      };
      var a = new Child('cc', 20);

                                                                                                  --摘自《javascript高级程序设计》

    补充(es6中的继承):

    class Sup{
        constructor(x, y) {
            this.x= x;
            this.y=y;
        }
        toString() {
            return this.x+' '+this.y; 
        }
    }
    
    class Sub extends Sup {
        constructor(x, y, color) {
            super(x, y); // 调用父类的constructor(x, y)
            this.color = color;
        }
        toString() {
            return this.color + ' ' + super.toString(); // 调用父类的toString()
        }
    }

  • 相关阅读:
    vux 局部注册组件
    vux 全局注册组件
    axios请求本地json
    vux报错 this指针问题
    Vue如何引入远程JS文件
    报错 ERROR in static/js/vendor.b3f56e9e0cd56988d890.js from UglifyJs
    封装axios
    js判断手机型号
    js判断是否在微信浏览器打开
    nginx+tomcat实现负载均衡以及session共享(linux centos7环境)
  • 原文地址:https://www.cnblogs.com/colima/p/6023350.html
Copyright © 2020-2023  润新知