携手创作,共同成长!这是我参与「掘金日新计划 · 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这个工具
有点深奥,还是多看廖大神以上的思路和例题~
写在最后
以上习题&笔记从大佬们的论坛学习而来,特感谢大佬们的知识分享~ (学习技术知识,果然要看大佬们的技术博客,大家有好的推荐也欢迎指引我这个小白哈,感恩!)
附上学习链接,感谢这些大佬出题和解答: