在ES5的时候,生成实例对象的方式是通过构造函数,如下:
```
function Student (name, age){
this.name = name;
this.age = age;
}
Student.prototype.study = function () {
console.log("做作业");
}
var s = new Student("小明",8);
s.study();
```
ES6 引入了 Class(类)这个概念,作为对象的模板。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。所以上面的示例换成ES6的写法就是:
```
class Student {
constructor(name, age){
this.name = name;
this.age = age;
}
study () {
console.log("做作业");
}
}
let s = new Student("小明",8);
s.study();
```
而在继承方面,ES5是采用了原型链继承的方式,示例如下:
```
function SmallStudent(name,age) {
Student.call(this,name,age);
this.playGame = function () {
console.log("玩游戏");
}
}
SmallStudent.prototype = new Student();
```
显然这种方式不是很好理解,所以ES6中可以通过extends关键字来实现继承就好理解多了。如下:
```
class SmallStudent extends Student{ //SmallStudent 继承自 Student
constructor(name,age,sex){
//继承的子类没有自己的this
super(name,age);//调用父类的构造方法
this.sex = sex;
}
study (){
return super.study()+"抄了50遍听写";
}
playGame () {
console.log("玩游戏");
}
}
```
最后,父类的静态方法,也会被子类继承。
- JS系列
- jQuery和axios的同步请求
- FormData和文件上传
- Http请求参数系列
- 面向对象:JS中的类与继承
- super关键字总结
- import和require语法的报错解决
- 常用的N个JS函数
- ES6新增的Set和Map
- 关于this的学习
- 人人都要会的防抖和节流
- AJAX的简单实现
- Vue
- nuxt
- 在nuxt中引入qrcode或者其他依赖包
- iVew
- 树形控件Tree的render函数
- 自定义组件:Upload封装
- React
- antd自适应高度表格
- 两个常用生命周期函数总结
- antd表格跨行处理(动态数据)
- antd中表单自定义验证踩坑
- Form+Upload实现文件上传全步骤
- 在react中实现Excel导出
- 表格嵌套和子表展开的处理
- 关于表格打印的一点思路
- Select组件中的模糊筛选
- echarts使用与总结
- echarts在react中的使用
- 简单的双层上下钻
- 复杂的多层上下钻(多次请求)
- 复杂的多层上下钻(单次请求)
- Git使用
- git基础一:安装git以及基本命令
- git基础二:add和commit
- 地图API
- 手动绘制点来实现驾车导航
- 地图自定义控件的使用
- 利用自定义标注实现头像展示
- 杂谈与总结
- 谈代码的可读性
- 简单总结判断代码质量的维度
- 3W模型看面向对象
