扩展 javascript 类并将它们包装在容器对象中

Question

在 ES6 中，您可以让自定义 classes 扩展 javascript 内置对象。像这样，您可以使用自定义方法制作 Array、Number、String、Date 对象。

我正在对此进行试验，并尝试将我的对象包装在一个名为 My 的容器对象中，只需遵循示例 here from MDN (Mozilla Developer Network)。但是当我像这样在对象内部定义自定义 Date class 时：

var My = {};

class My.Date extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
  }
}

我得到以下 SyntaxError：

Uncaught SyntaxError: Unexpected token .

Here is a fiddle 证明了这一点。

我打赌有办法解决这个问题，但我不确定该怎么做...

Answer 1

不允许在您的 class 名称中使用 .。但是可以将 class 实例添加到您的命名空间。

var My = {};

class MyDate extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
  }
}

My.Date = MyDate;

或直接

var My = {};

My.Date = class MyDate extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
  }
}

Answer 2

解决方法是将逻辑包装在函数中，以便在函数局部范围内声明新的 class，然后将其添加到函数内的全局 My 容器中。
像这样，您可以使用自定义对象（扩展基元）而不会弄乱全局对象，它们看起来仍然相似（例如，class 名称在控制台中打印时为 Date）。

var My = {};

function init(){

    class Date extends window.Date {
        constructor() {
            super();
        }

        getFormattedDate() {
            var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
            return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
        }
    }

    My.Date = Date;

}

init();

Date === window.Date; // true
My.Date === window.Date; // false
My.Date.name // Date -> class name
new My.Date().getFormattedDate(); // 2-Jun-2016

来自的另一个解决方案：

var My = {};

My.Date = class extends Date {
    constructor() {
        super();
    }

    getFormattedDate() {
        var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
        return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
    }
}

扩展 javascript 类并将它们包装在容器对象中

Extend javascript classes and wrap them in a container object

javascript

containers

extends

ecmascript-6

扩展 javascript 类 并将它们包装在容器对象中

Extend javascript classes and wrap them in a container object

javascript

containers

extends

ecmascript-6

扩展 javascript 类并将它们包装在容器对象中