js继承(es5和es6)

Posted 天空003

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js继承(es5和es6)相关的知识,希望对你有一定的参考价值。

 es5的继承

1.原型链继承   缺点:创建实例时不能传递参数,所有属性都被实例共享

 function Parent() {
      this.name = kevin;
    }
    Parent.prototype.getName = function () {
      console.log(this.name);
    }
    function Child() { }
    Child.prototype = new Parent();
    var child = new Child();
    child.getName() //kevin

2.借用构造函数  

优点:可以传递参数,避免了引用类型共享

缺点:方法都在构造函数中定义,每次创建实例都会创建一遍方法。 

   function Parent() {
      this.name = [kevin‘];
    }
    function Child() {
      Parent.call(this);
    }
    Child.prototype = new Parent();
    var child1 = new Child();
    var child2 = new Child();
    child1.name.push("cc");
    console.log(child1.name); //["kevin", "cc"]
    console.log(child2.name); //["kevin"]

3.组合继承

优点:融合了原型继承和构造函数继承,是javascript中常用的设计模式

缺点:调用两次父构造函数

  function Parent() {
      this.name = [kevin];
    }
    Parent.prototype.getName = function () {
      console.log(this.name, this.age);
    }
    function Child(age) {
      Parent.call(this);
      this.age = age;
    }
    Child.prototype = new Parent();
    var child1 = new Child(19);
    var child2 = new Child(20);
    child1.name.push("cc");
    child1.getName();  //["kevin", "cc"] 19
    child2.getName();  //["kevin"] 20

4.原型式继承

这是es5中的,Object.create的模拟实现

缺点:创建实例时不能传递参数,所有属性都被实例共享

    function createObj(o) {
      function F() { }
      F.prototype = o;
      return new F();
    }

 5.寄生式继承

  function createObj(o) {
      var clone = Object.create(o);
      clone.say = () => { console.log(this) };
      return clone
    }
    console.log(createObj({}));  //{say: ƒ}

6.寄生组合式继承

优点:开发人员普遍认为寄生组合式继承是最理想的继承范式

   function Parent(name) {
      this.name = name;
    }
    Parent.prototype.getName = function () {
      console.log(this.name, this.age);
    }
    function Child(name, age) {
      Parent.call(this, name);
      this.age = age;
    }
    var F = function () { }
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    var child1 = new Child("cc", 20)
    console.log(child1) //Child {name: "cc", age: 20}

es5之后的(class本质还是函数,只是一个语法糖而已。)

1.class通过extends关键字实现继承。

  class Parent {
      constructor(x, y) {
        this.x = x;
        this.y = y
      }
    }
    class Child extends Parent {
      constructor(x, y, name) {
        super(x, y);//调用父类的constructor(x,y)
        this.name = name;
      }
    }
    var child1 = new Child("x", "y", "ccg");
    console.log(child1);  //Child {x: "x", y: "y", name: "ccg"}

2.super关键字

 如果在子类构造函数中使用this,就要采用super关键字,它表示调用父类的构造函数。这是必须的。
    因为ES6的继承机制和ES5的不同,ES5是先创造子类的实例对象this,再将父类的方法添加
    到this上面(Parent.apply(this)),而ES6是先创建父类的实例对象this,所以必须调用super关键字。
    虽然super代表A的构造函数,但是返回的是子类B的实例,即super中的this指向的B。
  class A {
      constructor() {
        console.log(new.target.name);
      }
    }
    class B extends A {
      constructor() {
        super();
      }
    }
    new A();
    new B();
 作为函数,super只能在子类的构造函数中。但是如果作为对象时,在普通方法中指向父类的原型对象;
    在静态方法中指向父类。(!由于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
使用super,要显式指定使用方法。
    class Parent {
      constructor() {
        super();
        console.log(super);//报错
      }
    }

 

以上是关于js继承(es5和es6)的主要内容,如果未能解决你的问题,请参考以下文章

js继承(es5和es6)

es6继承 vs js原生继承(es5)

js ES5面向对象继承 模仿ES6

ES5和ES6中继承的不同之处

js重新讲解继承,es5的一些继承,es6继承的改变 ----------由浅入深

ES5和ES6中的继承