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新增语法(三)——面向对象的更多相关文章

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

    ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 , ...

  2. ECMAScript简介以及es6新增语法

    ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...

  3. 面向对象编程-终结篇 es6新增语法

    各位,各位,终于把js完成了一个段落了,这次的章节一过我还没确定下面要学的内容可能是vue也可能是前后端交互,但无论是哪个都挺兴奋的,因为面临着终于可以做点看得过去的大点的案例项目了,先憋住激动地情绪 ...

  4. ES6新增语法和内置对象(let,const, Array/String/Set 扩展方法(解构赋值,箭头函数,剩余参数))

    1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...

  5. 【ES6新增语法详述】

    目录 1. 变量的定义 let const 2. 模版字符串 3. 数据解构 4. 函数扩展 设置默认值 箭头函数 5. 类的定义 class 6. 对象的单体模式 "@ ES6新增了关于变 ...

  6. ES6新增语法(一)——let、const、var的区别

    ES6简介 ES6是ECMAScript 6.0的简称,是javascript语言的下一代标准,已经在2015年6月正式发布上线.目的就是为了统一javascript的语法标准,可以用来开发大型应用程 ...

  7. 从零开始学 Web 之 ES6(五)ES6基础语法三

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. es6新增语法之`${}`

    这是es6中新增的字符串方法 可以配合反单引号完成拼接字符串的功能 1.反单引号怎么打出来?将输入法调整为英文输入法,单击键盘上数字键1左边的按键. 2.用法step1: 定义需要拼接进去的字符串变量 ...

  9. ES6新增语法(二)——函数和参数

    箭头函数 箭头函数:将原来函数的function关键字和函数名都删掉,并使用"=>"连接参数列表和函数体. 箭头函数语法: (参数1,参数2)=>{ 函数体 } 注意点 ...

随机推荐

  1. Mobileye独创性创新

    Mobileye独创性创新 尽管存在相似之处,但Nvidia的SFF无法与Mobileye的RSS相匹配,后者是领先的AV安全模型 迈向无人驾驶的未来,Mobileye继续以新的创新引领行业,不仅将使 ...

  2. 马斯克如何颠覆航天? 1/5385成本,c++和python编程!

    马斯克如何颠覆航天? 1/5385成本,c++和python编程! 5月31日,经历了重重困难,马斯克的SpaceX载人飞船成功发射,这是美国自2011年以来首次发射载人航天飞船,也是美国进入由商业主 ...

  3. Single Shot Multibox Detection (SSD)实战(下)

    Single Shot Multibox Detection (SSD)实战(下) 2. Training 将逐步解释如何训练SSD模型进行目标检测. 2.1. Data Reading and In ...

  4. Nucleus SE RTOS初始化和启动

    Nucleus SE RTOS初始化和启动 Nucleus SE RTOS initialization and start-up 对于任何类型的操作系统,都有某种类型的启动机制.具体的工作方式因系统 ...

  5. Java基础_循环嵌套_打印乘法口诀、菱形,各种图形,计算二元一次和三元一次方程组_7

    循环嵌套 打印乘法口诀 for(int j=1;j<=9;j++){ for(int i=1;i<=j;i++){ System.out.print(i+"*"+j+& ...

  6. 【NX二次开发】Block UI 选择节点

    属性说明 属性   类型   描述   常规           BlockID    String    控件ID    Enable    Logical    是否可操作    Group    ...

  7. NX二次开发-将3X3矩阵修正为正交且长度为单位长度的矩阵

    函数:UF_MTX3_ortho_normalize() 函数说明:将矩阵修正为正交且xyz长度为单位长度的矩阵.下图中输入的矩阵为三条线段的端点,经过修正后,生成一个坐标系. 1 #include ...

  8. Pytest学习笔记2-setup和teardown

    前言 我们在做自动化的时候,常常有这样的需求: 执行每一条用例时,都重新启动一次浏览器 每一条用例执行结束时,都清除测试数据 在unittest中,我们可以使用 setUp() 和 tearDown( ...

  9. zookeeper集群及kafka集群搭建

    1.zookeeper集群搭建 1.1 上传安装包 官网推荐至少3个节点,我们这里也用三个节点192.169.2.18  192.169.1.82  192.169.1.95 准备好安装包,zooke ...

  10. [.NET大牛之路 002] 什么是 .NET

    .NET 是一个开发平台,或者叫开发者平台.使用 .NET 你可以创建不同类型的应用程序,使用多种开发语言.编辑器和工具库创建网页.手机.桌面以及游戏等应用.其核心特点是:免费.开源和跨平台. 语言和 ...