javascript更高阶函数; "这"参数vs外部“自我”变量 [英] javascript higher order functions ; "this" parameters vs external "self" variable

问题描述

在javascript中使用Array API的高阶函数时（forEach，map，filter等）
有两种方法可以传递this变量：

When using higher order function of the Array API in javascript (forEach, map, filter, etc.) there are 2 means to pass "this" variable :

myArray.forEach(function(value) {
    this.aContextualFunction();
}, this);

或

var self = this;
myArray.forEach(function(value) {
    self.aContextualFunction();
});

哪一个更好？
有哪些优点和缺点？

Which one is the better ? What are the pros and cons ?

示例： http://jsfiddle.net/TkZgX/

推荐答案

使用高阶函数时我更喜欢我的函数对它作为参数接收的回调做出任何假设。一般来说，代码越松散耦合越好。

When using higher order functions I prefer my functions not to make any assumptions about the callbacks it receives as arguments. In general, the more loosely coupled the code the better.

例如，假设我为 forEach写了一个更高阶的函数：

function forEach(array, callback, that) { // that is optional
    var length = array.length;
    for (var i = 0; i < length; i++)
        callback.call(that, array[i], i); // pass the value and the index
}

现在说我要使用它：

Array.prototype.double = function () {
    forEach(this, function (value, index) {
        this[index] = 2 * value;
    });                                     // oops, I forgot that
};

var array = [1, 2, 3];
array.double();

上述代码将导致变量泄漏到全局范围。不是一件好事。请参阅此处的演示： http://jsfiddle.net/8dad4/

The above code will cause variables to leak into the global scope. Not a good thing. See the demo here: http://jsfiddle.net/8dad4/

有什么替代方案？删除可选的第三个参数并使用闭包：

What's the alternative? Remove the optional third parameter and use closures:

function forEach(array, callback) {
    var length = array.length;
    for (var i = 0; i < length; i++)
        callback(array[i], i);
}

不仅代码更小，而且不会有任何意外的全局泄漏（除非你使用这个而不是外部的那个就像一个白痴）。让我们看一个例子：

Not only is the code smaller, but there won't be any accidental global leaks (unless you use this instead of the external that like an idiot). Let's see an example:

Array.prototype.double = function () {
    var that = this;

    forEach(this, function (value, index) {
        that[index] = 2 * value;
    });
};

var array = [1, 2, 3];
array.double();

演示在这里： http://jsfiddle.net/8dad4/1/

嗯...这似乎不太诱人 - 我不想创建一个新变量。我们可以做些更好的事吗？是的，我们当然可以。这是我喜欢的方法（我们仍然使用第二个 forEach 函数）：

Hmmm... that doesn't seem very enticing - I don't want to create a new variable. May we do something better? Yes, we sure can. This is the method I prefer (we still use the second forEach function):

Array.prototype.double = function () {
    forEach(this, function (value, index) {
        this[index] = 2 * value;
    }.bind(this));
};

var array = [1, 2, 3];
array.double();

演示在这里： http://jsfiddle.net/8dad4/2/

哇，这不是更好吗？我们将方法一和二结合起来。优点：

Wow, isn't this better? We combined both methods one and two. Advantages:

1. forEach 函数不承担任何责任。代码更松散耦合。


2. 我们不需要像这样的外部变量。不需要关闭。


3. 对于发生的事情没有混淆。

1. The forEach function doesn't assume anything. The code is more loosely coupled.
2. We don't need an external variable like that. No closures needed.
3. There's no confusion as to what's happening.

我们可以这样做因为传递给 forEach 的匿名函数是一个函数表达式。所以我们只需将 .bind（this）附加到它，我们就完成了。

We can do this because the anonymous function passed to forEach is a function expression. So we just append .bind(this) to it and we're done.

这篇关于javascript更高阶函数; "这"参数vs外部“自我”变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！