ES6--(9)JS的类

ES5 中的仿类结构

    在ES5以前js并不存在类的概念,与类相接近的写法是,创建一个构造器,然后将方法指派到该构造器的原型上。这种方式通常被称为创建一个自定义类型。

类的声明

基本的类声明

    类声明以 class 关键字开始,其后是类的名称;剩余部分的语法看起来就像对象字面量中的方法简写,并且在方法之间不需要使用逗号。

    自有属性( Own properties ):该属性出现在实例上而不是原型上,只能在类的构造器或方法内部进行创建。在本例中, name 就是一个自有属性。建议应在构造器函数内创建所有可能出现的自有属性,这样在类中声明变量就会被限制在单一位置(有助于代码检查)。

为何要使用类的语法

    尽管类与自定义类型之间有相似性,但仍然要记住一些重要的区别:

        1. 类声明不会被提升,这与函数定义不同。类声明的行为与 let 相似,因此在程序的执行到达声明处之前,类会存在于暂时性死区内。

        2. 类声明中的所有代码会自动运行在严格模式下,并且也无法退出严格模式。

        3. 类的所有方法都是不可枚举的,这是对于自定义类型的显著变化,后者必须用Object.defineProperty() 才能将方法改变为不可枚举。

        4. 类的所有方法内部都没有 [[Construct]] ,因此使用 new 来调用它们会抛出错误。

        5. 调用类构造器时不使用 new ,会抛出错误。

        6. 试图在类的方法内部重写类名,会抛出错误。

类表达式

基本的类表达式  

    类声明和类表达式都不会被提升,所以使用类表达式还是类声明只是代码风格的不同。

具名类表达式

    在下例具名表达式中,PersonClass2相当于在类的内部使用const来定义的类的一个不同的名称。只在类的内部使用。

作为一级公民的类

    在编程中,能被当作值来使用的就称为一级公民( first-class citizen ),意味着它能作为参数传给函数、能作为函数返回值、能用来给变量赋值。 JS的函数就是一级公民(它们有时又被称为一级函数)。ES6 延续了传统,让类同样成为一级公民。所以类可以以很多方式被引用。比如,作为参数传入函数;立即调用构造函数;

访问器属性

    自有属性需要在类构造器中创建,而类还允许你在原型上定义访问器属性。为了创建一个getter ,要使用 get 关键字;创建 setter 用相同方式,只是要换用 set 关键字。

    Object.getOwnPropertyDescriptor 函数 :获取指定对象的自身属性描述符。自身属性描述符是指直接在对象上定义(而非从对象的原型继承)的描述符。

    Object.getOwnPropertyDescriptor(object, propertyname)     //(属性对象,属性名称)

需计算的成员名

    无须使用标识符,而是用方括号来包裹一个表达式。

生成器方法

    在类中,可以将任意的方法变成一个生成器。也可以使用 Symbol.iterator 来定义生成器方法,从而定义出类的默认迭代器。

1  2  3

静态成员

    在ES5之前,通常在构造器上添加额外的方法来模拟静态成员。ES6中可以直接使用static 来为类添加静态成员。

ES5
ES6

使用派生类进行继承

ES5
ES6

    如果派生类指定了构造器,就需要使用 super() ,否则会造成错误。若你选择不使用构造器, super() 方法会被自动调用,并会使用创建新实例时提供的所有参数。

    使用 super() 时需牢记以下几点:

        1. 你只能在派生类中使用 super() 。若尝试在非派生的类(即:没有使用 extends关键字的类)或函数中使用它,就会抛出错误。

        2. 在构造器中,你必须在访问 this 之前调用 super() 。由于 super() 负责初始化this ,因此试图先访问 this 自然就会造成错误。

        3. 唯一能避免调用 super() 的办法,是从类构造器中返回一个对象。


屏蔽类方法:派生类中的方法总是会屏蔽基类的同名方法。

继承静态成员:如果基类包含静态成员,那么这些静态成员在派生类中也是可用的。

从表达式中派生类

    ES6 可以从表达式中派生类,只要表达式能够返回一个具有 [[Construct]] 属性以及原型的函数,就可以使用extends。extends 后面能接受任意类型的表达式。(比如,可以动态的决定需要集成的类)

继承内置对象

    在 ES5 的传统继承中, this 的值会先被派生类(例如 MyArray )创建,随后基类构造器(例如 Array.apply() 方法)才被调用。这意味着 this 一开始就是 MyArray 的实例,之后才使用了 Array 的附加属性对其进行了装饰。

    在 ES6 基于类的继承中, this 的值会先被基类( Array )创建,随后才被派生类的构造器( MyArray )所修改。结果是 this 初始就拥有作为基类的内置对象的所有功能,并能正确接收与之关联的所有功能。

Symbol.species 属性

    Symbol.species 知名符号被用于定义一个能返回函数的静态访问器属性。每当类实例的方法(构造器除外)必须创建一个实例时,前面返回的函数就被用为新实例的构造器。

    Array,ArrayBuffer ,Map,Promise,RegExp,Set,类型化数组。上述内置类型都定义了 Symbol.species

在类构造器中使用 new.targe

    可以使用 new.target 来创建一个抽象基类(一种不能被实例化的类)。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容