js 继承

作者: 柒轩轩轩轩 | 来源:发表于2018-04-17 11:55 被阅读0次

    js继承有四种方式

    1. 构造函数绑定

    使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:

    function Animal(){
      this.species = "Animal";
    }
    function Cat(name, color){
      Animal.apply(this, arguments);
      this.name = name;
      this. color = color;
    }
    var cat1 = new Cat("mimi","yellow");
    alert(cat1.species);//Animal
    

    缺点:无法实现函数复用

    2. prototype 模式

    Cat.prototype = new Animal();
    Cat.prototype.constructor = Cat;
    var cat1 = new Cat("mimi", "yellow");
    alert(cat1.species);//Animal
    

    3. 组合继承

    function Animal(){}
    Animal.prototype.species = "Animal"
    function Cat(name,color){
      Animal.call(this);
    }
    Cat.prototype = new Animal();
    var cat1 = new Cat("mimi", "yellow");
    alert(cat1.species);//Animal
    

    4. 利用空对象作为中介

    ((function(){
    ler Super = function{};
    super.prototype = Animal.prototype;
    Cat.prototype = new Super();
    })();
    
    Cat.prototype.constructer = Cat;
    var cat1 = new Cat("大毛","黄色"); alert(cat1.species); // 动物
    

    5.ES6实现继承

    class可以通过extends实现继承

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

    子类必须在 constructor方法中调用super方法,否则新建实例时会报错
    另外,在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错

    Object.getPrototypeOf()

    Object.getPrototypeOf(ColorPoint) === Point
    

    因此,可以使用这个方法判断,一个类是否继承了另一个类

    super关键字

    super作为函数调用时,代表父类的构造函数,ES6要求,子类的构造函数必须执行一次super函数

    super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部this指向的是B
    作为函数,super只能用在子类的构造函数中。
    第二种情况,super作为对象时,在普通方法中,指向父类的原型对象(prototype);在静态方法中,指向父类

    class A{
      p(){
          return 2;
      }
    }
    class B extend A{
      constructor(){
        super();
        console.log(super.p());
      }
    }
    let b  = new  B();
    

    上面代码中,子类B当中的super.p(),就是将super当作一个对象使用。这时,super在普通方法之中,指向A.prototype,所以super.p()就相当于A.prototype.p()

    ES6规定,在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例;

    class A {
      constructor() {
        this.x = 1;
      }
      print() {
        console.log(this.x);
      }
    }
    class B extends A {
      constructor() {
        super();
        this.x = 2;
      }
      m() {
        super.print();
      }
    }
    let b = new B();
    b.m() // 2
    
    class A {
      constructor() {
        this.x = 1;
      }
    }
    
    class B extends A {
      constructor() {
        super();
        this.x = 2;
        super.x = 3;
        console.log(super.x); // undefined
        console.log(this.x); // 3
      }
    }
    
    let b = new B();
    

    上面代码中,super.x 赋值为3,这时等同于this.x 赋值为3;而当读取super.x的时候,读的是A.prototype.x, 所以返回undefinded

    class A {}
    A.prototype.x = 2;
    
    class B extends A {
      constructor() {
        super();
        console.log(super.x) // 2
      }
    }
    let b = new B();
    

    上面代码中,属性x是定义在A.prototype上面的,所以super.x可以取得值

    ES6 规定,在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例。

    class A {
      constructor() {
        this.x = 1;
      }
      print() {
        console.log(this.x);
      }
    }
    class B extends A {
      constructor() {
        super();
        this.x = 2;
      }
      m() {
        super.print();
      }
    }
    let b = new B();
    b.m() // 2
    

    上面代码中,super.print()虽然调用的是A.prototype.print(),但是A.prototype.print()内部的this指向子类B的实例,导致输出的是2,而不是1

    如果super作为对象,用在静态方法之中,这时super将指向父类,而不是父类的原型对象

    class Parent {
      static myMethod(msg) {
        console.log('static', msg);
      }
      myMethod(msg) {
        console.log('instance', msg);
      }
    }
    class Child extends Parent {
      static myMethod(msg) {
        super.myMethod(msg);
      }
      myMethod(msg) {
        super.myMethod(msg);
      }
    }
    Child.myMethod(1); // static 1
    var child = new Child();
    child.myMethod(2); // instance 2
    

    相关文章

      网友评论

        本文标题:js 继承

        本文链接:https://www.haomeiwen.com/subject/ejlukftx.html