修改 Array.forEach 以自动将 Context 设置为调用者

Question

是否可以创建一个替代 Array.forEach 自动将上下文“this”设置为与调用方法时相同的上下文？

例如（不工作，不知道为什么）：

Array.prototype.each = function(fn) {
    return this.forEach(fn, arguments.callee.caller);
}


function myFunction() {
    this.myVar = 'myVar';

    [1,2,3].each(function() {
        console.log(this.myVar); // logs 'myVar'
    });
}

Answer 1

Array.forEach 已经将上下文参数作为可选的最后一个参数，

(function() {
    this.myvar = "myvar";

    [1,2,3,4].forEach(function(v) {
        console.log("v:"+v);
        console.log("myvar="+this.myvar);
    }, this);
})();

见MDN forEach

此外，上述示例（如果我们不处理有关this 的实例的方法）在不使用bind 或forEach 的可选上下文参数的情况下也可以正常工作，以下也可以正常工作：

function myFunction() {
    this.myVar = 'myVar';

    [1,2,3].forEach(function() {
        console.log(this.myVar); // logs 'myVar'
    });
}
myFunction();

因为 javascript 在功能范围内，所以匿名函数可以使用 this 访问父函数的范围，并且可以正确记录。 this 只有在处理实例方法时才会真正成为上下文问题。

Answer 2

答案是否定的，JavaScript 函数无法确定调用者中this 的值。

你可以绑定当前对象传递的函数，像这样

function myFunction() {
    this.myVar = 'myVar';

    [1,2,3].forEach(function() {
        console.log(this.myVar); // logs 'myVar'
    }.bind(this));
}

在 ECMA 脚本 6 中，您可以使用 Arrow function，像这样

[1,2,3].forEach(() => {
    console.log(this.myVar); // logs 'myVar'
});

Answer 3

在传递回调时与this 变量混淆的替代方法是，您始终可以将this 分配给一个新变量，以便子作用域函数可以访问它：

Array.prototype.each = function(fn) {
    return this.forEach(fn, arguments.callee.caller);
}


function myFunction() {
    var me = this;
    me.myVar = 'myVar';

    [1,2,3].each(function() {
        console.log(me.myVar); // logs 'myVar'
    });
}

现在您不必记住将this 作为第二个参数传递

Answer 4

首先必须指出myFunction是一个构造函数。然而，标识符中的第一个字母没有大写。请叫它MyFunction。

如果在没有 new 运算符的情况下调用构造函数，this 将绑定到全局对象，即浏览器中的 window。这使得大小写约定成为我们发现此类事故的唯一方法。

以下代码行证明了这一点：

// After the original code...
myFunction();
console.log(window.myVar); // logs "myVar"

其次，为了能够在任何数组上应用函数，而不是更改 Array.prototype，请考虑以下几点：

var utils = {array: {}};  // utils.array is a container for array utilities.
utils.array.each = function (array, func) {
    var i;
    for (i = 0; i < array.length; i += 1) { func(array[i]); }
};
utils.write = function (s) { 
    console.log(s); // Alternatively, document.write(s);
};
utils.array.each([1, 2, 3], utils.write); // prints 1 2 and 3 (on separate lines)

请注意，我们没有使用 this 和 new。它们使 JavaScript 看起来像 Java，除此之外，它们很少用于有用的目的。

虽然库可以修改 Object.prototype 和 Array.prototype，但最终开发人员不应该。

此外，我们应该（理想情况下）能够执行以下操作：

• utils.array.each([1, 2, 3], console.log); 或
• utils.array.each([1, 2, 3], document.write);。

但大多数浏览器不允许这样做。

希望这会有所帮助。

Answer 5

如果我正确理解您的要求，那么您正在尝试覆盖“this”。 我觉得this可以帮到你。