【前端入门】class继承可以更方便处理继承问题!

64 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第5天,点击查看活动详情

回顾:之前我们看到了JS的对象模型是基于原型实现的,特点是简单。最大的缺点是继承的实现需要写大量代码,并且需要正确实现原型链。逻辑复杂且容易出错,那有没有更方便简单的办法呢?

class继承

新的关键字class从ES6开始正式被引入到JS中,能更简单!

class Student { 
        constructor(name) { 
            this.name = name;
   } 
   
   hello() { 
       alert('Hello, ' + this.name + '!'); 
   } 
}          
var xiaoming = new Student('小明');
xiaoming.hello();

比较一下就可以发现,class的定义包含了构造函数constructor和定义在原型对象上的函数hello()(注意没有function关键字),这样就避免了Student.prototype.hello = function () {...}这样分散的代码

class定义对象的另一个巨大的好处是继承更方便了!可以直接通过extends来实现~

例如:

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
    }
    
    myGrade() {
        alert('i am at grade ' + this.grade);
    }
}

tips:因为不是所有的主流浏览器都支持ES6的class。可以通过一个工具把class代码转换为传统的prototype代码,可以试试Babel这个工具

有点深奥,还是多看廖大神以上的思路和例题~

写在最后

以上习题&笔记从大佬们的论坛学习而来,特感谢大佬们的知识分享~ (学习技术知识,果然要看大佬们的技术博客,大家有好的推荐也欢迎指引我这个小白哈,感恩!)

附上学习链接,感谢这些大佬出题和解答:

www.liaoxuefeng.com/wiki/102291…

wangdoc.com/javascript/…

developer.mozilla.org