javascript - 使用 TypeScript 扩展 JS Date 但 "this"关键字无法正常工作

Question

当使用下面的代码扩展 JavaScript 日期类型时，在调用新函数时，它会抛出错误，因为 this 关键字未正确引用，即当我调用 addHours 函数我得到的错误是:

Uncaught TypeError: _this.getTime is not a function

当我调试时，我看到“this”是“object Window”类型

这是我正在使用的 TypeScript 代码:

declare interface Date {
    stdTimezoneOffset: () => number;
    dst: () => boolean;
    addHours: (h: number) => void;
    test: () => void;
}

Date.prototype.stdTimezoneOffset = () => {
    var jan = new Date(this.getFullYear(), 0, 1);
    var jul = new Date(this.getFullYear(), 6, 1);
    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
};

Date.prototype.dst = () => {
    return this.getTimezoneOffset() < this.stdTimezoneOffset();
};

Date.prototype.addHours = (h: number) => {
    this.setTime(this.getTime() + (h * 60 * 60 * 1000));
};

创建的 .JS 文件是这样的:

var _this = this;
Date.prototype.stdTimezoneOffset = function () {
    var jan = new Date(_this.getFullYear(), 0, 1);
    var jul = new Date(_this.getFullYear(), 6, 1);
    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
};
Date.prototype.dst = function () {
    return _this.getTimezoneOffset() < _this.stdTimezoneOffset();
};
Date.prototype.addHours = function (h) {
    _this.setTime(_this.getTime() + (h * 60 * 60 * 1000));
};
Date.prototype.test = function () {
    return +_this.getTime();
};

现在在我看来问题出在 .JS 文件的第一行:

var _this = this;

但我不知道如何解决它。

Answer 1

您正在使用箭头函数。箭头函数在其定义位置的 this 上闭合，而不是通过调用方式来设置其 this；后者对于原型(prototype)函数很重要。

改用普通函数:

Date.prototype.stdTimezoneOffset = function() {
    var jan = new Date(this.getFullYear(), 0, 1);
    var jul = new Date(this.getFullYear(), 6, 1);
    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
};

---

旁注:在增强内置原型(prototype)时，最好使用 defineProperty 或 defineProperties 创建非可枚举属性。所以:

Object.defineProperties(Date.prototype, {
    stdTimezoneOffset: {
        value: function () {
            var jan = new Date(this.getFullYear(), 0, 1);
            var jul = new Date(this.getFullYear(), 6, 1);
            return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
        },
        configurable: true,
        writable: true
    },
    dst: {
        value: function() {
            return this.getTimezoneOffset() < this.stdTimezoneOffset();
        },
        configurable: true,
        writable: true
    },
    addHours: {
        value: function(h: number) {
            this.setTime(this.getTime() + (h * 60 * 60 * 1000));
        },
        configurable: true,
        writable: true
    }
});

(configurable: true, writable: true 只是因为这是 Date.prototype 上内置属性的默认值，所以我与他们保持一致。)