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. HDU 2058 The sum problem (数学+暴力)

    题意:给定一个N和M,N表示从1到N的连续序列,让你求在1到N这个序列中连续子序列的和为M的子序列区间. 析:很明显最直接的方法就是暴力,可是不幸的是,由于N,M太大了,肯定会TLE的.所以我们就想能 ...

  2. xib创建cell的两种方法

    方法一:第一步:[self.collectionView registerNib:[UINib nibWithNibName:@"QGLShareBtnCell" bundle:n ...

  3. MSDN Webcast 跟我一起从零开始学WCF系列课程

    系列课程 >跟我一起从零开始学WCF系列课程   跟我一起从零开始学WCF系列课程(1):WCF概述 (Level 200)   讲 师:徐长龙    课程简介:从 本堂课开始我们将开启一个新的 ...

  4. OpenGL ES 光照模型之——环境光照(RenderMonkey测试)

    概述及目录(版权所有,请勿转载 www.cnblogs.com/feng-sc/) 本文总结如何在RenderMonkey下做简单的OpenGL ES环境光光照模型测试. 主要包括如下内容: 1.使用 ...

  5. 快速排序—三路快排 vs 双基准

    快速排序被公认为是本世纪最重要的算法之一,这已经不是什么新闻了.对很多语言来说是实际系统排序,包括在Java中的Arrays.sort. 那么快速排序有什么新进展呢? 好吧,就像我刚才提到的那样(Ja ...

  6. hdu 5018

    http://acm.hdu.edu.cn/showproblem.php?pid=5018 任意给你三个数,让你判断第三个数是否在以前两个数为开头组成的Fibonacci 数列中. 直接暴力 #in ...

  7. hdu 5019

    http://acm.hdu.edu.cn/showproblem.php?pid=5019 给出X 和Y,求出第K 大的 X 和Y 的公约数. 暴力求出所有公约数 #include <cstd ...

  8. 挂载Linux云主机硬盘到本地计算机

      现在移动硬盘已经是每个人的生活必需品了,当然网络也是我们生活的必需品,我们现在就是要用网络存储代替硬盘存储,当然再实际使用过程中需要考虑到以下两个问题: 网络延迟 云主机磁盘IO   以上两个关键 ...

  9. java keytool生成ssl加密密钥

    教程:http://www.cnblogs.com/getherBlog/p/3930317.html 其中用到几个命令: keytool -genkeypair -alias certificate ...

  10. s11 day 101 python Linux环境安装 与路飞项目支付功能

    from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = ...