扩展地图中的错误 'this' 引用

Question

我正在尝试在 Map<K, V> 界面上编写一个简单的方法。这是我到目前为止所做的： MapExtensions.ts:

interface Map<K, V> {
    clone(): Map<K, V>;
}

Map.prototype.clone = () => {
    var self = this;
    console.log(self);

    let retval = new Map();        
    self.forEach((value, key) => {
        retval.set(key, value);
    });

    //for (let [key, value] of self.entries()) {
    //    retval.set(key, value);
    //}
    return retval;
};

然而，在测试该方法时我最终发现 this 参数中的引用错误地引用了 Window 对象，因此 self.forEach 不起作用并且在测试时它说 self.forEach is not a function（与 self.entries() 相同）。这是我的测试脚本：

test("clone test", () => {
    //Arrange
    const source = new Map().set(1, "abc").set(2, "def").set(3, "ghi");

    //Act
    const actual = source.clone.bind(source)();//This fails.
    //const actual = source.clone();//This too fails.

    //Assert
    console.log(actual);
    console.log(expected);
    deepEqual(actual, source, "Cloned correctly");
});

附加信息：

下面是生成的 JavaScript 输出：

var _this = this;//It seems this is causing the problem.
Map.prototype.clone = function () {
    var self = _this;
    var retval = new Map();
    console.log(self);
    self.forEach(function (value, key) {
        retval.set(key, value);
    });
    return retval;
};

我正在使用 Visual Studio 2015，以及来自打字稿的默认 JavaScript 输出生成器。

如何成功做到这一点？

Answer 1

那是因为你使用了箭头函数。当您需要访问 this.

时，不要使用箭头函数

Map.prototype.clone = function() { ... }

扩展地图中的错误 'this' 引用

Wrong 'this' reference in extending Map

javascript

dictionary

typescript

map-function