Nodejs与ES6系列4:ES6中的类
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中的类的更多相关文章
- ES6系列之项目中常用的新特性
ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...
- 《深入理解ES6》笔记—— JavaScript中的类class(9)
ES5中的近类结构 ES5以及之前的版本,没有类的概念,但是聪明的JavaScript开发者,为了实现面向对象,创建了特殊的近类结构. ES5中创建类的方法:新建一个构造函数,定义一个方法并且赋值给构 ...
- [ES6系列-03]ES6中关于参数相关特性详解(参数默认值与参数解构赋值与剩余参数)
[原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 今天总结一下 ES6 中跟参数相关的内容. 欢迎补充斧正.留言交流. 让我们互相学习一起进步. 1. ES6 参数默认值( ...
- ts中的类的定义,继承和修饰符
自己搞一个ts文件 里面写代码如下,试一下就行了 /* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": &q ...
- 大白话,讲编程之《ES6系列连载》汇总
如果你经历过2,3年前的前端开发,你一定感受过兼容IE6,7的痛苦,一定用过网页三剑客的dreamweaver编写html,面试的时候面试官一定会问你:会用PS切图吗? 刚开始的时候你发现,web前端 ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- ES6 系列之 Babel 是如何编译 Class 的(下)
前言 ES5 寄生组合式继承 function Parent (name) { this.name = name; } Parent.prototype.getName = function () { ...
- ES6 系列之异步处理实战
前言 我们以查找指定目录下的最大文件为例,感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变. API 介绍 为了实现这个功能,我 ...
随机推荐
- PHP变量在内存中的存储方式
原文:http://www.phppan.com/tag/refcount/ 每门计算机语言都需要一些容器来保存变量数据.在一些语言当中,变量都有特定的类型,如字符串,数组,对象等等.比如C和Pasc ...
- 如何在windows 10 x64安装佳能 CP900 驱动
佳能太无耻,为了销售CP910 , CP900 到win8 ,win8.1,win 10 都没有驱动程序,网上找的方法都不行,IT民工自有办法: 1.按住shift键,重启电脑 restart 2.在 ...
- PHP实现简易blog
最近,有时间看了点PHP的代码.参考PHP100教程做了简单的blog,网易云课堂2012年的教程,需要的可以找一下,这里面简单的记录一下. 首先是集成环境,这里选用的WAMP:http://www. ...
- Network - FTP与SFTP
FTP --- FTP File Transfer SFTP --- SSH File Transfer 缩写 名称 协议与端口 安全策略 特征描述 守护进程(linux) 应用场景 SFTP SSH ...
- jsonp跨域问题
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式). 同源策略限制 ...
- 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- Elasticsearch Javascript API增删改查
查询 根据索引.类型.id进行查询: client.get({ index:'myindex', type:'mytype', id:1 },function(error, response){// ...
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- EF总结
1.Entity Framework 查询历史最严重bug求解十万火急 2.http://www.cnblogs.com/badly1984/p/3203565.html 3.Entity Frame ...
- vue之自定义指令directive
<template> <div> <input v-model="dir1" v-my-directive1="dir1"/> ...