ES6中的类

4.1、class基本语法

在之前的javascript语法中是不存在class这样的概念,如果要通过构造函数生成一个新对象代码

function Shape(width,height){
this.width = width;
this.height = height;
} Point.prototype.toString = function () {
return '(' + this.width + ', ' + this.height + ')';
}

ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”改写,就是下面这样。

//定义类
class Shape { constructor(width, height) {
this.height = height;
this.width = width;
} toString() {
return '(' + this.width + ', ' + this.height + ')';
} }

通过class定义类名,constructor关键字定义构造函数。

4.2、继承与多态

继承与多态是面向对象最重要的两个特性,通过继承可以实现代码的重构,在之前的javascript中继承需要通过原型链来实现,而在ES6中可以通过extends关键字直观的实现继承。首先定义基类Shape,定义子类Rect集成与基类并重写方法toArea实现多态。

'use strict'
class Shape {
constructor(width,height){
this.width=width;
this.height=height;
}
/***
* 获取面积
* @returns {number}
*/
toArea(){
return this.width*this.height
}
}
module.exports = Shape;
'use strict'
var Shape = require('./Shape');
class Rect extends Shape {
constructor(width, height) {
super(width, height);
}
toArea() {
return this.width*this.height*2
}
}
module .exports = Rect;

子类Rect集成与基类Shape,拥有了基类的方法toArea,和属性width与height,而子类通过相同的方法名重写了方法toArea。

var sharp = new Sharp(1,2);
var rect = new Rect(1,2);
console.log(sharp.toArea());
console.log(rect.toArea());
====
2
4

4.3、类的静态方法

ES6中的类提供静态方法,静态方法只能在类成员下调用,如果类实例化后再调用会抛出异常。同样的基类定义的静态方法能被子类所继承。静态方法通过static关键字定义。

'use strict'
class Shape {
constructor(width,height){
this.width=width;
this.height=height;
}
/***
* 获取面积
* @returns {number}
*/
toArea(){
return this.width*this.height
}
/**
* 静态方法
* @returns {string}
*/
static toName(){
return 'shape'
}
}
module.exports = Shape;
console.log(Rect.toName());
===
shape

值得注意的是在ES6的类中并没有静态属性的概念。静态属性可以通过Shape.name这样来定义。

Nodejs与ES6系列4:ES6中的类的更多相关文章

  1. ES6系列之项目中常用的新特性

    ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...

  2. 《深入理解ES6》笔记—— JavaScript中的类class(9)

    ES5中的近类结构 ES5以及之前的版本,没有类的概念,但是聪明的JavaScript开发者,为了实现面向对象,创建了特殊的近类结构. ES5中创建类的方法:新建一个构造函数,定义一个方法并且赋值给构 ...

  3. [ES6系列-03]ES6中关于参数相关特性详解(参数默认值与参数解构赋值与剩余参数)

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 今天总结一下 ES6 中跟参数相关的内容. 欢迎补充斧正.留言交流. 让我们互相学习一起进步. 1. ES6 参数默认值( ...

  4. ts中的类的定义,继承和修饰符

    自己搞一个ts文件 里面写代码如下,试一下就行了 /* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": &q ...

  5. 大白话,讲编程之《ES6系列连载》汇总

    如果你经历过2,3年前的前端开发,你一定感受过兼容IE6,7的痛苦,一定用过网页三剑客的dreamweaver编写html,面试的时候面试官一定会问你:会用PS切图吗? 刚开始的时候你发现,web前端 ...

  6. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  7. [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

    接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...

  8. ES6 系列之 Babel 是如何编译 Class 的(下)

    前言 ES5 寄生组合式继承 function Parent (name) { this.name = name; } Parent.prototype.getName = function () { ...

  9. ES6 系列之异步处理实战

    前言 我们以查找指定目录下的最大文件为例,感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变. API 介绍 为了实现这个功能,我 ...

随机推荐

  1. mac本用WTG(Windows To Go)安装Win10到移动硬盘

    准备工作: 一个空的 USB 3.0 移动硬盘(在安装 WTG 时候会将这个硬盘清空重新并分区,注意备份好数据.USB 3.0 的优盘是不行的,即使安装成功,系统的运行速度会奇慢) 原版Windows ...

  2. Wait Type:IO_COMPLETION

    在等待 CXPACKET 完成的时间内,我查看 sys.dm_exec_requests ,发现Session的 Logical Read/Write, Physical Read 都没有变化.Wai ...

  3. Android 自定义View及其在布局文件中的使用示例(二)

    转载请注明出处 http://www.cnblogs.com/crashmaker/p/3530213.html From crash_coder linguowu linguowu0622@gami ...

  4. Cwinux源码解析(五)

      Cwinux源码解析(五)

  5. Greenplum 数据库安装部署(生产环境)

    Greenplum 数据库安装部署(生产环境) 硬件配置: 16 台 IBM X3650, 节点配置:CPU 2 * 8core,内存 128GB,硬盘 16 * 900GB,万兆网卡. 万兆交换机. ...

  6. 在Android中实现service动态更新UI界面

    之前曾介绍过Android的UI设计与后台线程交互,据Android API的介绍,service一般是在后台运行的,没有界面的.那么如何实现service动态更新UI界面呢?案例:通过service ...

  7. laravel吐槽系列之一

    最近项目中经常使用到了laravel框架,对于这个框架之前只是弱弱地接触了一点,没有深入接触,这下有时间好好研究它了(主要是不得不研究了).说实话,laravel让我打开眼界了,之前对框架的使用一直停 ...

  8. StringExtensions

    public static string MakeSafeSql(this string s) { string t = s; t = t.Replace("'", "' ...

  9. 如果根据键盘的frame始终让一个控件始终在键盘的顶部

    我们发现很多时候系统提供的键盘功能有限 有些功能无法实现,所以我们通常的做法就是自定义一个工具条放在键盘的顶部. 那么我们如何知道键盘的frame呢? 这个时候就需要监听键盘发出的通知,在ios中当键 ...

  10. SQL --分组【Group By】

    Group By:对数据进行分组,分组之后的数据就是“分组信息”,和原来表的信息,就没有联系了, 分组之后,可以取到分组数据,就是根据什么字段分组,就能取到字段的名字了.还能使用聚合函数. Group ...