美文网首页
js继承 es6和es5

js继承 es6和es5

作者: 事在人为s | 来源:发表于2020-04-09 20:38 被阅读0次

    es6 class是个语法糖,本质上是原型链

    class Person {
        constructor(name) {
            this.name = name
        }
    }
    class Student extends Person {
        constructor(name, age) {
            super(name);
            this.age = age;
        }
    }
    let student = new Student('张三', 18);
    console.log(student);
    

    es6之前

    /**
    * 借助构造函数实现继承
    */
    function Parent1 () {
      this.name = 'parent1';
    }
    Parent1.prototype.say = function () {
    
    };
    function Child1 () {
      Parent1.call(this);
      this.type = 'child1';
    }
    console.log(new Child1(), new Child1().say());
    
    /**
    * 借助原型链实现继承
    */
    function Parent2 () {
      this.name = 'parent2';
      this.play = [1, 2, 3];
    }
    function Child2 () {
      this.type = 'child2';
    }
    Child2.prototype = new Parent2();
    
    var s1 = new Child2();
    var s2 = new Child2();
    console.log(s1.play, s2.play);
    s1.play.push(4);
    
    /**
    * 组合方式
    */
    function Parent3 () {
      this.name = 'parent3';
      this.play = [1, 2, 3];
    }
    function Child3 () {
      Parent3.call(this);
      this.type = 'child3';
    }
    Child3.prototype = new Parent3();
    var s3 = new Child3();
    var s4 = new Child3();
    s3.play.push(4);
    console.log(s3.play, s4.play);
    
    /**
    * 组合继承的优化1
    * @type {String}
    */
    function Parent4 () {
      this.name = 'parent4';
      this.play = [1, 2, 3];
    }
    function Child4 () {
      Parent4.call(this);
      this.type = 'child4';
    }
    Child4.prototype = Parent4.prototype;
    var s5 = new Child4();
    var s6 = new Child4();
    console.log(s5, s6);
    
    console.log(s5 instanceof Child4, s5 instanceof Parent4);
    console.log(s5.constructor);
    
    /**
    * 组合继承的优化2  Object.create
    */
    function Parent5 () {
      this.name = 'parent5';
      this.play = [1, 2, 3];
    }
    function Child5 () {
      Parent5.call(this);
      this.type = 'child5';
    }
    Child5.prototype = Object.create(Parent5.prototype);
    

    相关文章

      网友评论

          本文标题:js继承 es6和es5

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