• ES6 中关于Class类的继承理解


    ES5 和 ES6 在类和继承的不同,举例如下:

    ES5 的类和继承:
    
    function Person(name){
        this.name = name;
    }
    Person.prototype.showName = function(){
        return this.name;
    };
    var ops = new Person('娃哈哈');
    console.log(ops.showName());  // 娃哈哈
    ES6 的类和继承:
    
    class Person{  // Person类  它也是一个函数
        constructor(name){  // 构造函数
            this.name = name;
        }
        showName(){
            return this.name;
        }
    }
    var p1 = new Person('娃哈哈');
    console.log(p1.showName());  // 娃哈哈
     

    constructor的中文意思就是构造,他在这里代表的就是构造函数,那么class是一个类也是一个函数,只不过ES6标准是把这个函数包装成了一个class的写法而已,在new一个实例的时候,构造函数自动执行。

    Class 可以通过 extends 关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多,举例如下:

    ES5 之前的写法:
    
    function Person(name){  // 父类
        this.name = name;
    }
    Person.prototype.showName = function(){
        return this.name;
    };
    function SubPerson(name,job){  // 子类
        Person.call(this,name);  // 子类继承父类的属性 需要将this指向父类中的name
        this.job = job;  // job是子类自己的属性
    }
    SubPerson.prototype = new Person();  // 子类继承父类的方法
    var p1 = new SubPerson('娃哈哈');
    console.log(p1.name);  // 娃哈哈
    // console.log(p1.showName());  // 娃哈哈
    ES6 有Class类之后的写法:
    
    class Person{
        constructor(name){
            this.name = name;
        }
        showName(){
            return this.name;
        }
    }
    class SubPerson extends Person{
        constructor(name,job){
            super(name);    // 指向父类的构造函数
            this.job = job;
        }
        showJob(){
            return this.job;
        }
    }
    var p1 = new SubPerson('娃哈哈','喜洋洋');
    console.log(p1.name);  // 娃哈哈
    // console.log(p1.showName());  // 娃哈哈
    // console.log(p1.job); // 喜洋洋

    estends 就是继承的意思,super 就是指向父类的构造函数,指代了整个prototype对象或者_proto_指针指向的对象。

    如果在子类中也写入showName方法,和父类中的方法重名,这样就会覆盖父类的,倘若不想覆盖而是想引用父类的showName方法,那么就在子类的showName方法中通过super来调用父类的showName:super.showName
     

    该文引用了https://www.jianshu.com/p/129976ab0015,用作学习记录
  • 相关阅读:
    ZZ 一些有意思的算法代码
    ff 怎样让新打开的标签就放在当前页面的右边
    111
    Windows平台下GO语言编译器(GOwindows)
    My Bookmarks
    使用googleperftools的tcmalloc
    memcached安装及测试
    erlang 入门(1)
    MS UI Automation
    twisted: echo server
  • 原文地址:https://www.cnblogs.com/panic404/p/13086379.html
Copyright © 2020-2023  润新知