ES6新增语法(三)——面向对象
2023-03-20 14:52:30 时间
ES6中json的2个变化
- 简写:名字和值相同时,json可以可以简写
123456 | let a=12,b=5;let json = { a, b}console.log(json) // { a:12 , b:5 } |
---|
- 省略function:json中的函数可以简写
let persen ={
name:'倩倩',
age:18,
showName(){
alert(this.name)
}
}
persen.showName()
ES6与传统面向对象
传统面向对象:类和构造函数在一起,为对象添加方法时使用prototype。传统面向对象实例如下:
function Person(name,age){
this.name = name;
this.age = age
}
Person.prototype.showName = function(){
console.log('我叫',this.name)
}
Person.prototype.showAge = function(){
console.log('今年',this.age,'岁')
}
var p = new Person('倩倩',18)
p.showName()
p.showAge()
ES6面向对象:将类和构造函数分开。
类:class
构造函数:constructor指生成完实例之后,自己就执行的函数。
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
//给对象添加方法
showName(){
console.log('我叫',this.name)
}
showAge(){
console.log('今年',this.age,"岁")
}
}
var p =new Person('倩倩',18);
p.showName();
p.showAge()
面向对象的继承:
传统面向对象的继承:
- 使用apply方法,子类继承父类全部属性。
- 使用prototype方法,子类继承父类的方法。
传统面向对象的继承实例如下:
function Person(name,age){
this.name = name;
this.age = age
}
Person.prototype.showName = function(){
console.log('我叫',this.name)
}
Person.prototype.showAge = function(){
console.log('今年',this.age,'岁')
}
function Worker(name,age,job){
Person.apply(this,arguments)//继承属性
this.job = job
}
Worker.prototype = new Person();//继承方法
Worker.prototype.showJob = function(){
console.log('工作是',this.job);
}
var w = new Worker('倩倩',18,'打杂');
w.showName();
w.showAge();
w.showJob();
ES6面向对象继承:
使用extends实现子类对父级的继承,super()将父类的属性继承过来。
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
console.log('我叫',this.name)
}
showAge(){
console.log('今年',this.age,"岁")
}
}
class Worker extends Person {
constructor(name,age,job){
super(name,age)
this.job = job
}
showJob(){
console.log('工作是',this.job)
}
}
var w = new Worker('倩倩',18,'打杂');
w.showName();
w.showAge();
w.showJob()
关于super:
子类中有constructor,内部就要有super,因为子类没有自己的this对象,需要继承父类的this对象。
这里的super(name,age)就是调用父类的构造函数。
super虽然代表了Person的构造函数,但是返回的是子类Worker的实例。
ES6面向对象优点
- ES6面向对象相比传统面向对象,语法简化
- ES6语法标准、统一,适合大项目开发,不易产生冲突。
- ES6是系统提供的标准语法,可以忽略兼容性问题。
相关文章
- RestTemplate上传文件
- @DS("slave") 多数据源兼容事务问题解决方案
- “I/O多路复用”和“异步I/O”的前世今生
- Centos8防火墙设置
- pycharm没有免费的么
- pycharm怎么自动排版
- Java-Stream-flatMap
- linux笔记-工作
- pycharm mac怎么汉化
- pycharm的debug怎么用
- 算法与数据结构-06-插值查询
- 算法与数据结构-05-二分查找及拓展
- List对象按属性排序
- 算法刷题手记(2)
- pycharm 如何自动补全
- 算法与数据结构-04-排序算法
- 算法与数据结构-03-八皇后问题(递归回溯)
- IDEA破解(无限重启激活时间版)
- pycharm快捷键怎么用
- 算法与数据结构-01-稀疏数组