es6+最佳入门实践(12)
12.class基础用法和继承
12.1.class基础语法
在es5中,面向对象我们通常写成这样
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.showName = function () {
console.log(this.name);
};
let p = new Person("xiaoqiang", 10);
p.showName();
上面这种写法与传统的面向对象写法有很大的不同,让学习过其他面向对象语言的同学感到很别扭,因此,在ES6中,增加了语法糖,使用class关键字来定义类,这里说的语法糖的意思简单的理解就是另一种更便捷的写法,编译后的功能实际上是一样的
下面是ES6中定义类的语法:
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
showName(){
console.log(this.name)
}
}
let p = new Person("xiaoqiang2", 10);
p.showName();
注意1: constructor是默认添加的方法,当new 关键字去调用类的时候,constructor会默认被执行,即使不写这个constructor方法,也会默认添加一个空方法
constructor(name, age){
console.log("开始执行了")
this.name = name;
this.age = age;
}
注意2: 在类中写的方法之间不能加逗号,否则会报错
class Person{
constructor(name, age){
console.log("开始执行了")
this.name = name;
this.age = age;
}
showName(){
console.log(this.name)
},
showAge(){
console.log(this.age);
}
}
let p = new Person("xiaoqiang2", 10);
p.showName();
12.2.继承
在ES6中使用extends关键字来实现继承
class Parent{
constructor(name, age){
console.log("开始执行了");
this.name = name;
this.age = age;
}
showName(){
console.log(this.name)
}
}
//Child去继承 Parent
class Child extends Parent{
}
let c = new Child('nodeing', 20);
console.log(c);
上面代码就是继承的基本写法,只是我们并没有在子类中去增加方法,此时,子类相当于去拷贝了父类
注意1: 在子类中如果重写父类的constructor方法,需要首先调用supper方法
class Parent{
constructor(name, age){
console.log("开始执行了");
this.name = name;
this.age = age;
}
showName(){
console.log(this.name)
}
}
class Child extends Parent{
constructor(name, age, gender){
super(name, age);
this.gender = gender
}
}
let c = new Child('nodeing', 20);
console.log(c);
注意2: 如果这样写会报错:
class Child extends Parent{
constructor(name, age, gender){
this.gender = gender
super(name, age);
}
}
视频教程地址:http://edu.nodeing.com/course/50
es6+最佳入门实践(12)的更多相关文章
- es6+最佳入门实践(7)
7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = ...
- es6+最佳入门实践(5)
5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...
- es6+最佳入门实践(14)
14.模版字符串 模版字符串(template string)是增强版的字符串,定义一个模版字符串需要用到反引号 let s = `这是一个模版字符串` console.log(s) 14.1.模版字 ...
- es6+最佳入门实践(10)
10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator ...
- es6+最佳入门实践(9)
9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有 ...
- es6+最佳入门实践(8)
8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...
- es6+最佳入门实践(6)
6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.nu ...
- es6+最佳入门实践(4)
4.函数扩展 4.1.参数默认值 默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现 function Fn(a, b) { b = b || "n ...
- es6+最佳入门实践(3)
3.数组扩展 3.1.扩展运算符 扩展运算符用三个点(...)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下: let arr = [1, 2, 3]; console.log(...a ...
随机推荐
- Sql Server 游标概念与实例
引言 先不讲游标的什么概念,看如下Sql Server2008 图例: 需求:两张表的O_ID是一一对应的,现在求将加薪的工资+原来的工资=现在的工资,也就是O_Salary=O_Salary+A_S ...
- git的关于测试的相关的内容
今天,我们来讲一下git的分支的一些内容,在以前的时候,我一直都以为,对于一个项目,这个时候,我们把这个项目叫做项目a项目,这个a项目有master,staging,以及我自己的分支xxx,当我想上测 ...
- MSSQL如何查看当前数据库的连接数 【转】
- [SQL Server]版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://ai51av.blogbus.com/logs/52955622.html 如果我们发布 ...
- OBS源码编译开发
本文来自网易云社区 作者:梁敏 OBS简介 OBS(Open Broadcaster Software)是免费开源的视频录制和直播软件,支持运行在windows,Mac和linux平台.官方链接 ht ...
- ionic 向路由中的templateUrl(模板页)传值
.state('product', { url: '/product/:id', templateUrl: function ($routeParams) { return '/Product/Ind ...
- Jmeter中传递cookie值
场景:用户登陆后会本地会保存cookie,cookie是用来跟服务端验证此用户已经登陆过的重要信息,但是如何获取并在其他请求时将此cookie传递给服务器呢? 在线程组下面之直接添加HTTP Cook ...
- Python 中的容器 collections
写在之前 我们都知道 Python 中内置了许多标准的数据结构,比如列表,元组,字典等.与此同时标准库还提供了一些额外的数据结构,我们可以基于它们创建所需的新数据结构. Python 附带了一个「容器 ...
- Python网络编程(socketserver、TFTP云盘、HTTPServer服务器模型)
HTTP协议? HTTP是一个应用层协议,由请求和响应构成,是一个标准的客户端服务器模型.HTTP是一个无状态的协议. 通常承载于TCP协议之上,有时也承载于TLS或SSL协议层之上,这个时候,就成了 ...
- Halcon17无法加载"hdevenginecpp":找不到指定的模块
Halcon17无法加载"hdevenginecpp":找不到指定的模块 在C#和Halcon17混合编程中,当执行private HDevEngine MyEngine = ne ...
- tensorflow学习笔记(1)-基本语法和前向传播
tensorflow学习笔记(1) (1)tf中的图 图中就是一个计算图,一个计算过程. 图中的constant是个常量 计 ...