class是es6引入的最重要特性之一。在没有class之前,我们只能通过原型链来模拟类。

基本用法

如果你用过java这样的纯面向对象语言,那么你会对class的语法非常熟悉。

class People {
constructor(name) { //构造函数
this.name = name;
}
sayName() {
console.log(this.name);
}
}

上面定义了一个People类,他有一个属性 name 和一个方法 sayName(),还有一个构造函数; 
你可以这样使用这个类:

var p = new People("Tom");
p.sayName();

就像函数有函数声明和函数表达式两种定义方式,类也可以通过类表达式来定义:

let People = class {
constructor(name) { //构造函数
this.name = name;
}
sayName() {
console.log(this.name);
}
}

你可能以为类声明和类表达式的区别在于变量提升的不同。但是事实是无论是类声明还是类表达式的方式来定义,都不会有变量提升。所以下面的写法是错的:

var p = new People("Tom");    //错误,People 未定义
class People {
//...
};

类中的所有方法默认都是 strict mode,所以不用再次声明了。

继承

通过关键字 extends 来继承一个类,并且,可以通过 super 关键字来引用父类。

class People {
constructor(name) { //构造函数
this.name = name;
}
sayName() {
console.log(this.name);
}
} class Student extends People {
constructor(name, grade) { //构造函数
super(name); //调用父类构造函数
this.grade = grade;
}
sayGrade() {
console.log(this.grade);
}
}

上面的例子中我们定义了一个 Student ,他是 People 的子类。

注意我们在 constructor 中是如何通过 super 调用父类的构造函数的。

getters & setters

现在我们可以通过 get 和 set 关键字来定义 getters 和 setters 了。

下面我们给 name 属性定义 getter 和 setter

class People {
constructor(name) { //构造函数
this.name = name;
}
get name() {
return this._name.toUpperCase();
}
set name(name) {
this._name = name;
}
sayName() {
console.log(this.name);
}
}
var p = new People("tom");
console.log(p.name); //TOM
console.log(p._name); //tom
p.sayName(); //TOM

仔细看上面的例子,搞清楚最后三行分别会输出什么,就明白getter 和 setter该怎么用了。

主要是要区分 this._name 和 this.name 的区别。因为我们定义了 name 的读写器,而没有定义 _name 的读写器,所以访问这两个属性的结果是不同的。

但是要注意一点,不要这样写:

set name(name) {
this.name = name;
}

因为给 this.name 赋值的时候会调用 set name ,这样会导致无限递归直到栈溢出。

静态方法

通过 static 关键字定义静态方法:

class People {
constructor(name) { //构造函数
this.name = name;
}
sayName() {
console.log(this.name);
}
static formatName(name) {
return name[0].toUpperCase() + name.sustr(1).toLowerCase();
}
} console.log(People.formatName("tom"));

静态方法一般用来提供一些工具方法。

私有属性

很不幸的时ES6并没有提供对私有属性的语法支持,但是我们可以通过闭包来实现私有属性。

var People = (function() {
var p = new WeakMap();
class People {
constructor(name) { //构造函数
var privateProperties = {
name: name
};
p.set(this, privateProperties);
}
sayName() {
console.log(this.name);
} get name() {
return p.get(this).name;
}
}
return People;
})(); var p = new People("tom");
console.log(p.name);
p.sayName(); var p2 = new People("bob");
console.log(p2.name);
p2.sayName();
 

【es6】class的更多相关文章

  1. 【ES6】改变 JS 内置行为的代理与反射

    代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代 ...

  2. 【ES6】更易于继承的类语法

    和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...

  3. 【ES6】迭代器与可迭代对象

    ES6 新的数组方法.集合.for-of 循环.展开运算符(...)甚至异步编程都依赖于迭代器(Iterator )实现.本文会详解 ES6 的迭代器与生成器,并进一步挖掘可迭代对象的内部原理与使用方 ...

  4. 【ES6】数组的扩展——扩展运算符

    1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...

  5. 【ES6】函数的扩展

    1.函数参数默认值[详情例子参照ESMAScript 6入门 (阮一峰)] 允许为函数的参数设置默认值,即直接写在参数定义的后面.[例子1] 参数变量是默认声明的,所以不能用let或const再次声明 ...

  6. 【ES6】数值的扩展

    1.Number.isFinite()和Number.isNaN()[只对数值有效] (1)Number.isFinite()用来检查一个数值是否为有限的(finite),即不是Infinity. [ ...

  7. 【ES6】Generator+Promise异步编程

    一.概念 首先我们要理解Generator和Promise的概念. Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态. *Foo(){ yeild consol ...

  8. 【ES6】import, require,export

    node编程中最重要的思想就是模块化,import和require都是被模块化所使用. 遵循规范 require 是 AMD规范引入方式 import是es6的一个语法标准,如果要兼容浏览器的话必须转 ...

  9. 【ES6】函数

    函数默认值问题 在ES6之前,不能直接为函数指定默认值,但是ES6允许为函数的参数设置默认值 之前实现方式 function log(x, y) { y = y || 'World'; console ...

  10. 【ES6】let 命令

    let命令 为es6新增命令,用来声明变量,类似于var,但是let所声明的变量,只在let命令所在的块级作用域内有效 块级作用域写法(ES6块级作用域允许任意嵌套): // 块级作用域写法 { le ...

随机推荐

  1. cmake-include_directories

    include_directories: Add include directories to the build. include_directories([AFTER|BEFORE] [SYSTE ...

  2. MarkdownPad 2.x破解下载

    Markdown是一种轻量级的标记语言,目前有不少Markdown编辑器,其他的编辑器,诸如:Notepad++.Sublime Text 2也通过插件添加了支持.Markdown的特点就是易读易写, ...

  3. 大文件上传插件webupload插件

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  4. Linux 部署 tomcat 常用命令

    1.  文件夹重命名 mv somedir somedir1 2. 授权所有子目录 chmod -R 777 somedir 3.授权单个目录 chmod 777 somedir 4.实时打印控制台日 ...

  5. Hdu1427 速算24点 2017-01-18 17:26 46人阅读 评论(0) 收藏

    速算24点 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submiss ...

  6. SPFA穿越虫洞——负权回路得判断

    poj3259 题目大意:穿越虫洞可以回到过去(时间--)所以能不能让时间倒流呢,就是判断有没有负权回路这次尝试用SPFA算法,也可以复习一下链式前向星 准备工作,队列q,spfa算法得有点就在于这个 ...

  7. Toad 实现 SQL 优化

    It is very easy for us to implement sql tuning by toad.  We need to do is just give complex sql stat ...

  8. 使用MTR命令诊断网络问题

      以前在检查网络时习惯使用ping命令,因为ping命令非常简单,现在喜欢上了mtr命令,因为它真的很强大,但是对于刚刚接触这个命令的同学来说,理解起来就没有ping命令来的那么直观了,所以今天写一 ...

  9. GitHub Android 开源项目汇总 (转)

    转自:http://blog.csdn.net/ithomer/article/details/8882236 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上.基于 ...

  10. Js加密算法

    使用crypto-js在浏览器上对数据加密签名 重要知识点: CryptoJS.lib.WordArray  WordArray对象可以理解为byte[] CryptoJS.enc 提供编码转换,从字 ...