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. 用eclipse创建maven的webapp项目

    来自http://www.cnblogs.com/candle806/p/3439469.html和http://blog.csdn.net/chuyuqing/article/details/288 ...

  2. Python安装setuptools遇到的MARKER_EXPR错误

    # python setup.py install Traceback (most recent call last):   File "setup.py", line 11, i ...

  3. 20170908工作日记--Volley源码详解

    Volley没有jar包,需要从官网上下载源码自己编译出来,或者做成相关moudle引入项目中.我们先从最简单的使用方法入手进行分析: //创建一个网络请求队列 RequestQueue reques ...

  4. (并查集 建立关系)食物链 -- POJ-- 1182

    链接: http://poj.org/problem?id=1182 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82830#probl ...

  5. Android操作HTTP实现与服务器通信

    (转自http://www.cnblogs.com/hanyonglu/archive/2012/02/19/2357842.html) 本示例以Servlet为例,演示Android与Servlet ...

  6. git 删除追踪状态

    当不小心添加一个不想被git记录等文件时,这个时候就算将该文件记录在了.gitignore里也是没有用的,因为那个文件已经被git记录过了,只有那些从来没有被git记录过的文件(即:自添加进项目后,从 ...

  7. linux系统编程之信号(二):信号处理流程(产生、注册、注销、执行)

        对于一个完整的信号生命周期(从信号发送到相应的处理函数执行完毕)来说,可以分为三个阶段: 信号诞生 信号在进程中注册 信号在进程中的注销 信号处理函数执行 1    信号诞生     信号事件 ...

  8. laravel5的Bcrypt加密方式对系统保存密码的小结

    laravel5文档介绍 //对 A 密码使用Bcrypt 加密 $password = Hash::make('secret'); //你也可直接使用 bcrypt 的 function $pass ...

  9. Unity获取object所有属性的一个方法,一些界面上没有开放的属性可以用该方法编辑

    static void PrintProperty () { if(Selection.activeObject == null) return; SerializedObject so = new ...

  10. kubernetes1.9管中窥豹-CRD概念、使用场景及实例

    欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言 默认读者有kubernetes基础概念的背景知识,因此基础概念例如有状态.pod.Replica Sets.Deployments.state ...