首页 > 其他 > 详细

ES6新增语法(四)——面向对象

时间:2021-07-19 14:40:43      阅读:16      评论:0      收藏:0      [点我收藏+]

ES6中json的2个变化

  • 简写:名字和值相同时,json可以可以简写
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是系统提供的标准语法,可以忽略兼容性问题。

ES6新增语法(四)——面向对象

原文:https://www.cnblogs.com/web-learn/p/15029718.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!