JavaScript类(ES6)

JavaScript不像传统OO语言有class关键字,即JS没有类。因此JS为了取得类的复用啊,封装啊,继承啊等优点,出现了很多和构造函数相关的语法糖。ES6将语法糖标准化后,提供了class关键字来模拟定义类。class本质上也是一个语法糖,能让代码更简单易读。

  • 基本语法
  • extends
  • static
  • get/set
  • 私有

基本语法

一个简单的例子:

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}
let p = new Point(2,3);
console.log(p.toString());  //(2, 3)
console.log(p.constructor === Point.prototype.constructor); //true
console.log(Point.prototype.constructor === Point);     //true

定义class的方法很简单,加上关键字class就行了。constructor表明构造函数。成员方法前不需要加function。用new关键字就能生成对象,如果忘记加上new,浏览器会报错(TypeError: class constructors must be invoked with |new|)。代码是不是简单多了呢。

深层次地看,示例中p.constructor === Point.prototype.constructor为true,表明constructor构造函数是被定义在类的prototype对象上的。其实类的所有方法都是被定义在类的prototype对象上的。因此new对象时,其实就是调用prototype上的构造函数:

class Point {
    constructor() { ... }
    toString() { ... }
}

// 等价于
Point.prototype = {
    constructor() { ... },
    toString(){}
};

示例中Point.prototype.constructor === Point为true表明prototype对象的constructor属性,直接指向“类”本身,这与ES5的行为是一致的。

因为class本质就是语法糖,因此传统的写法在ES6时仍旧适用。例如,因为class的方法都定义在prototype对象上,所以可以用Object.assign方法向prototype对象添加多个新方法:

Object.assign(Point.prototype, {
    reverse() {
        let temp;
        temp = this.x;
        this.x = this.y;
        this.y = temp;
    }
});

let p2 = new Point(2,3);
console.log(p2.toString()); //(2, 3)
p2.reverse();
console.log(p2.toString()); //(3, 2)

区别是,直接定义在class内的方法是不可枚举的(这一点与ES5不一致),但通过Object.assign新增的方法是可以被枚举出来的:

console.log(Object.keys(Point.prototype));
//["reverse"]
console.log(Object.getOwnPropertyNames(Point.prototype));
//["constructor", "toString", "reverse"]

而且,无论你用Object.assign还是直接Point.prototype.toString = function() { … }这种写法,在prototype对象上添加同名的方法,会直接覆盖掉class内的同名方法,但仍旧是不可枚举的:

Object.assign(Point.prototype, {
    reverse() {
        let temp;
        temp = this.x;
        this.x = this.y;
        this.y = temp;
    },
    toString(){return "overload"}
});
let p3 = new Point(2,3);
console.log(p3.toString()); //overload

console.log(Object.keys(Point.prototype));
//["reverse"]    无toString,即使覆盖掉了,仍旧无法枚举
console.log(Object.getOwnPropertyNames(Point.prototype));
//["constructor", "toString", "reverse"]

方法都是被定义在prototype对象上的。成员属性,如果没有显示地声明在this上,也默认是被追加到prototype对象上的。如上面示例中x和y就被声明在了this上。而且成员属性只能在constructor里声明。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

let p4 = new Point(2,3);
console.log(p4.hasOwnProperty('x'));    //true
console.log(p4.hasOwnProperty('y'));    //true
console.log(p4.hasOwnProperty('toString'));           //false
console.log(p4.__proto__.hasOwnProperty('toString')); //true

let p5 = new Point(4,5);
console.log(p4.x === p5.x);    //false
console.log(p4.y === p5.y);    //false
console.log(p4.toString === p5.toString);    //true

上面可以看出定义在this上的是各实例独有,定义在prototype对象上的是各实例共享。这和ES5行为一致。

new对象时,会自动调用constructor方法。如果你忘了给class定义constructor,new时也会在prototype对象上自动添加一个空的constructor方法。constructor默认返回实例对象,即this。你也可以显示地返回其他对象,虽然允许,但并表示推荐你这么做,因为这样的话instanceof就无法获得到正确的类型:

class Foo {
    constructor() {
        return Object.create(null);
    }
}

let f = new Foo();
console.log(f instanceof Foo);  //false

class也可以像function一样,定义成表达式的样子,例如let Point = class { … }。也可以写成立即执行的class,例如:

let p6 = new class {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}(2, 3);
console.log(p6.toString()); //(2, 3)

extends

ES5通过原型链实现继承,出现了各种版本的语法糖。ES6定义了extends关键字让继承变得异常容易。例如:

class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y);    //调用父类的构造函数
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); //调用父类的成员方法
    }
}

let p8 = new ColorPoint(2, 3, 'red');
console.log(p8.toString());            //red (2, 3)
console.log(p8 instanceof Point);      //true,继承后,对象既是父类对象也是子类对象
console.log(p8 instanceof ColorPoint); //true

用extends实现继承,用super获得父类对象的引用。子类构造函数中必须显式地通过super调用父类构造函数,否则浏览器会报错(ReferenceError: |this| used uninitialized in ColorPoint class constructor)。子类没有自己的this对象,需要用super先生成父类的this对象,然后子类的constructor修改这个this。

因此子类constructor里,在super语句之前,不能出现this,原因见上。通常super语句会放在构造函数的第一行。

super在constructor内部可以作为函数掉用,用于调用父类构造函数。super在constructor外部可以作为父类this的引用,来调用父类实例的属性和方法。例如上例中toString方法内的super。

extends关键字不仅可以继承class,也可以继承其他具有构造函数的类型,例如Boolean(),Number(),String(),Array(),Date(),Function(),RegExp(),Error(),Object()。本质都一样,都是用super先创建父对象this,再将子类的属性或方法添加到该this上。例如继承数组:

class MyArray extends Array {
    constructor() {
        super();
        this.count = 0;
    }
    getCount() { return this.count; }
    setCount(c) { this.count = c; }
}
var arr = new MyArray();
console.log(arr.getCount());    //0
arr.setCount(1);
console.log(arr.getCount());    //1

因此可以在原生数据结构的基础上,定义自己的数据结构。例如定义了一个带版本功能的数组:

class VersionedArray extends Array {
    constructor() {
      super();
      this.history = [[]];
    }
    commit() { 
        this.history.push(this.slice()); 
    }
    revert() {
        this.splice(0, this.length, ...this.history[this.history.length - 1]);
    }
}

var vArr = new VersionedArray();
vArr.push(1);
vArr.push(2);
console.log(vArr.history); //[[]]
vArr.commit();
console.log(vArr.history); //[[], [1, 2]]
vArr.push(3);
console.log(vArr);         //[1, 2, 3]]
vArr.revert();
console.log(vArr);         //[1, 2]

继承的语法糖可以参照网上的示图,一图胜千言:

static

类方法前加上static关键字,就表示该方法是静态方法。静态方法属于类本身,所以不会被实例继承,需要通过类来调用。这与传统OO语言一致,不赘述。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static className() {
        return 'Point';
    }
}

console.log(Point.className());  //Point
let p10 = new Point(2, 3);
p10.className();    //TypeError: p10.className is not a function

父类的静态方法,同样可以被子类继承。

class ColorPoint extends Point {}
console.log(ColorPoint.className());  //Point

与传统OO语言不同的是,ES6里static只能用于方法,不能用于属性。即语法上不存在静态属性。为什么呢?因为没必要,JS里要实现静态属性太简单了,直接这样写就行了:

Point.offset = 1;
console.log(Point.offset);  //1

如果你在class内部给属性前加上static,是无效的会报错:

class Point {
    …
    static offset = 1;  //SyntaxError: bad method definition
}

get/set

class内同样可以使用get和set关键字来定义并拦截存设值行为。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
    get getX() {
        return this.x;
    }
    get getY() {
        return this.y;
    }
    set setX(x) {
        this.x = x;
    }
}
let p9 = new Point(2, 3);
console.log(p9.getX); //2
console.log(p9.getY); //3
p9.setX = 4;
console.log(p9.getX); //2

私有

最后ES6的class里并没有private关键字。因此私有方法,除了潜规则在名前加上下划线外,另一种方式仍旧就是语法糖,将其移到类外面:

class Point {
    set (x, y) {
        setX.call(this, x);
        setY.call(this, y);
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}
function setX(x) { return this.x = x; } //移到外面
function setY(y) { return this.y = y; } //移到外面

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

推荐阅读更多精彩内容

  • class的基本用法 概述 JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子: ...
    呼呼哥阅读 4,089评论 3 11
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,602评论 18 399
  • 继承是面向对象中一个比较核心的概念。其他正统面向对象语言都会用两种方式实现继承:一个是接口实现,一个是继承。而EC...
    lovelydong阅读 370评论 0 2
  • 在Excel里,有两个随机函数,一个是rand,一个是randbetween,其中rand函数用来生成0-1之间的...
    张啸宁V阅读 2,585评论 0 2
  • 时常告诫自己要善良 于是行为善良 却无法抑制内心的邪恶 像是瘾君子的毒 瞎子的手杖 赌徒的双手 瘫患者的轮椅 权力...
    慕斯烈浓Vinky阅读 316评论 0 0