JavaScript中es6中的class和class的继承（三）

class类的继承

一般这种概念在后端语言会理解的比较 清晰快捷一点 就只要知道 实例化 最后一个继承的子类 就可以了， 这样就会去拓展父类里面的方法 ，相比起es5的继承方法 es6 的继承方法 更能让人 清晰易懂 也更方便去学习

新的改变

class Parent {
    constructor(project) {
        //如果Children的super里面不写project，那么接收的就是undefined
        this.childrenProject = project;
        console.log(this.childrenProject);
    }
    
    print() {
        return 'Parent';
    }
}



class Children extends Parent{
    constructor(project) {  //接收到Children本身传入内容
        super(project);   //可以看做是链接父级类的通道 construct内接收
        //super()是继承类的时候才能用到的关键字 这与React中的接收props一样，super中传入的参数是父类能够接收到的内容
        console.log(super.print() === this.print());// true  此时Parent中的print和Children本身的print()就是一样的了，这与super中的参数无关
        console.log(this);
    }
    
}

const higher = new Children('ReactES6');
//给Children传入内容
console.log(higher);

es5的继承写法

es5 中的继承 只能用原始的，applay 去完成。

(function () {
    var A = function (contents) {
        this.app = document.querySelector('.es5-children');
        this.appClass = this.app.className;
        console.log(contents);  //I am a String
        this.listeners();  // B.listeners()
        this.init();  //这里就相当于 调用了 B.init()
    };
    A.prototype = {
    
    };
    
    var B = function (main) {   //construct(main)
        A.call(this, main);  //需要把内容 传入 父级  相当于 super(main)
        this.main = main;
        // this.init();
    };
    B.prototype = {
        init() {
            console.log(this.app);  //<div class="es5-children"></div>
            console.log(this.appClass);  // es5-children
            console.log(this.main);
        },
        listeners(){
            console.log(this.main);  //undefined
        }
    };
    var result = new B('I am a String');
    console.log(result);
})();

***

这只是其中 继承 的一种 算是比较简单的