ES6新增语法(三)——面向对象
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新增语法(三)——面向对象的更多相关文章
- ES6新增语法(四)——面向对象
ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 , ...
- ECMAScript简介以及es6新增语法
ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
- 面向对象编程-终结篇 es6新增语法
各位,各位,终于把js完成了一个段落了,这次的章节一过我还没确定下面要学的内容可能是vue也可能是前后端交互,但无论是哪个都挺兴奋的,因为面临着终于可以做点看得过去的大点的案例项目了,先憋住激动地情绪 ...
- ES6新增语法和内置对象(let,const, Array/String/Set 扩展方法(解构赋值,箭头函数,剩余参数))
1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...
- 【ES6新增语法详述】
目录 1. 变量的定义 let const 2. 模版字符串 3. 数据解构 4. 函数扩展 设置默认值 箭头函数 5. 类的定义 class 6. 对象的单体模式 "@ ES6新增了关于变 ...
- ES6新增语法(一)——let、const、var的区别
ES6简介 ES6是ECMAScript 6.0的简称,是javascript语言的下一代标准,已经在2015年6月正式发布上线.目的就是为了统一javascript的语法标准,可以用来开发大型应用程 ...
- 从零开始学 Web 之 ES6(五)ES6基础语法三
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- es6新增语法之`${}`
这是es6中新增的字符串方法 可以配合反单引号完成拼接字符串的功能 1.反单引号怎么打出来?将输入法调整为英文输入法,单击键盘上数字键1左边的按键. 2.用法step1: 定义需要拼接进去的字符串变量 ...
- ES6新增语法(二)——函数和参数
箭头函数 箭头函数:将原来函数的function关键字和函数名都删掉,并使用"=>"连接参数列表和函数体. 箭头函数语法: (参数1,参数2)=>{ 函数体 } 注意点 ...
随机推荐
- Mobileye独创性创新
Mobileye独创性创新 尽管存在相似之处,但Nvidia的SFF无法与Mobileye的RSS相匹配,后者是领先的AV安全模型 迈向无人驾驶的未来,Mobileye继续以新的创新引领行业,不仅将使 ...
- 马斯克如何颠覆航天? 1/5385成本,c++和python编程!
马斯克如何颠覆航天? 1/5385成本,c++和python编程! 5月31日,经历了重重困难,马斯克的SpaceX载人飞船成功发射,这是美国自2011年以来首次发射载人航天飞船,也是美国进入由商业主 ...
- Single Shot Multibox Detection (SSD)实战(下)
Single Shot Multibox Detection (SSD)实战(下) 2. Training 将逐步解释如何训练SSD模型进行目标检测. 2.1. Data Reading and In ...
- Nucleus SE RTOS初始化和启动
Nucleus SE RTOS初始化和启动 Nucleus SE RTOS initialization and start-up 对于任何类型的操作系统,都有某种类型的启动机制.具体的工作方式因系统 ...
- Java基础_循环嵌套_打印乘法口诀、菱形,各种图形,计算二元一次和三元一次方程组_7
循环嵌套 打印乘法口诀 for(int j=1;j<=9;j++){ for(int i=1;i<=j;i++){ System.out.print(i+"*"+j+& ...
- 【NX二次开发】Block UI 选择节点
属性说明 属性 类型 描述 常规 BlockID String 控件ID Enable Logical 是否可操作 Group ...
- NX二次开发-将3X3矩阵修正为正交且长度为单位长度的矩阵
函数:UF_MTX3_ortho_normalize() 函数说明:将矩阵修正为正交且xyz长度为单位长度的矩阵.下图中输入的矩阵为三条线段的端点,经过修正后,生成一个坐标系. 1 #include ...
- Pytest学习笔记2-setup和teardown
前言 我们在做自动化的时候,常常有这样的需求: 执行每一条用例时,都重新启动一次浏览器 每一条用例执行结束时,都清除测试数据 在unittest中,我们可以使用 setUp() 和 tearDown( ...
- zookeeper集群及kafka集群搭建
1.zookeeper集群搭建 1.1 上传安装包 官网推荐至少3个节点,我们这里也用三个节点192.169.2.18 192.169.1.82 192.169.1.95 准备好安装包,zooke ...
- [.NET大牛之路 002] 什么是 .NET
.NET 是一个开发平台,或者叫开发者平台.使用 .NET 你可以创建不同类型的应用程序,使用多种开发语言.编辑器和工具库创建网页.手机.桌面以及游戏等应用.其核心特点是:免费.开源和跨平台. 语言和 ...