ES6的 Class 类

概述

JavaScript 语言中,生成实例对象的传统方法是通过构造函数。
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。class的本质是 function。

语法

ES6 引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。


ES6 的类,完全可以看作构造函数的另一种写法。
代码

结果

使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
代码

结果

构造函数的prototype属性,在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype属性上面。类的内部所有定义的方法,都是不可枚举的non-enumerable。类的属性名,可以采用表达式。

类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。ES6 实际上把整个语言升级到了严格模式。

  • constructor 方法
    类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

    constructor方法默认返回实例对象(即this),但是也可以指定返回另外一个对象。
    代码

    结果

    类必须使用new调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。
    代码

    结果
  • 类的实例对象
    生成类的实例对象的写法,与 ES5 完全一样,也是使用new命令。与 ES5 一样,实例的属性除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。
    代码

    结果

    与 ES5 一样,类的所有实例共享一个原型对象。
    代码

    结果

    可以通过实例的__proto__属性为“类”添加方法(不推荐)
    代码

    结果
  • Class 表达式
    与函数一样,类也可以使用表达式的形式定义。



    如果类的内部没用到的话,可以省略Me,也就是可以写成下面的形式。



    采用 Class 表达式,可以写出立即执行的 Class。
    代码

    结果
  • 不存在变量提升
    类不存在变量提升(hoist),这一点与 ES5 完全不同。这种规定的原因与继承有关,必须保证子类在父类之后定义。
    ES6 不提供私有方法和私有属性,只能通过变通方法模拟实现


    在命名上加以区别

    将私有方法移出模块,因为模块内部的所有方法都是对外可见的

    利用Symbol值的唯一性,将私有方法的名字命名为一个Symbol值
  • 私有属性的提案
    有一个提案,为class加了私有属性。方法是在属性名之前,使用#表示。使用时必须带有#一起使用。

    这种写法不仅可以写私有属性,还可以用来写私有方法。

    私有属性也可以设置 gettersetter 方法。

    私有属性不限于从this引用,类的实例也可以引用私有属性。但是,直接从实例上引用私有属性是不可以的,只能在类的定义中引用。
  • Class 的取值函数(getter)和存值函数(setter)
    在“类”的内部可以使用getset关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

    存值函数和取值函数是设置在属性的 Descriptor 对象上的。
API
  • Class 的 Generator 方法
    如果某个方法之前加上星号(*),就表示该方法是一个 Generator 函数。


    代码

    结果
  • Class 的静态方法
    如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
    代码

    结果

    注意,如果静态方法包含this关键字,这个this指的是类,而不是实例。
    代码

    结果

    父类的静态方法,可以被子类继承。
    代码

    结果

    静态方法也是可以从super对象上调用的。
    代码

    结果
  • Class 的静态属性和实例属性
    ES6 明确规定,Class 内部只有静态方法,没有静态属性。目前有一个静态属性的提案,对实例属性和静态属性都规定了新的写法。


    类的实例属性可以用等式,写入类的定义之中

    类的静态属性只要在上面的实例属性写法前面,加上static关键字就可以
  • new.target 属性
    new是从构造函数生成实例对象的命令。new.target属性返回new命令作用于的那个构造函数,如果构造函数不是通过new命令调用的,new.target会返回undefined

    子类继承父类时,new.target会返回子类。

    利用这个特点,可以写出不能独立使用、必须继承后才能使用的类。

    \color{red}{注意:}在函数外部,使用new.target会报错。
继承

Class 可以通过 extends 关键字实现继承。


子类必须在constructor方法中调用super方法,否则新建实例时会报错。

ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。
ES6 的继承实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this
如果子类没有定义constructor方法,这个方法会被默认添加。

在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。
父类的静态方法,也会被子类继承。

  • super 关键字
    super这个关键字,既可以当作函数使用,也可以当作对象使用。
    当作函数使用时:代表父类的构造函数。

    super()只能用在子类的构造函数之中,用在其他地方就会报错。

    当作对象使用时:在普通方法中,指向父类的原型对象;在静态方法中,指向父类。

    由于super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。

    如果属性定义在父类的原型对象上,super就可以取到。

    在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例。

    由于this指向子类实例,所以如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。
    如果super作为对象,用在静态方法之中,这时super将指向父类,而不是父类的原型对象。
    在子类的静态方法中通过super调用父类的方法时,方法内部的this指向当前的子类,而不是子类的实例。
    \color{red}{注意:}使用super的时候,必须显式指定是作为函数、还是作为对象使用,否则会报错。
    由于对象总是继承其他对象的,所以可以在任意一个对象中,使用super关键字。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容