_.each(list,iterator,[context])中的上下文是什么？

Question

我是下划线的新手.js.是什么目的[context]的_.each()？该如何使用？

Answer 1

context参数只是设置this迭代器函数的值.

var someOtherArray = ["name","patrick","d","w"];

_.each([1, 2, 3], function(num) { 
    // In here, "this" refers to the same Array as "someOtherArray"

    alert( this[num] ); // num is the value from the array being iterated
                        //    so this[num] gets the item at the "num" index of
                        //    someOtherArray.
}, someOtherArray);

工作示例: http ://jsfiddle.net/a6Rx4/

它使用迭代的Array的每个成员中的数字来获取该索引处的项someOtherArray,这表示为this我们将其作为上下文参数传递.

如果未设置上下文,this则将引用该window对象.

Answer 2

contextthis在你的迭代器函数中引用的位置.例如:

var person = {};
person.friends = {
  name1: true,
  name2: false,
  name3: true,
  name4: true
};

_.each(['name4', 'name2'], function(name){
  // this refers to the friends property of the person object
  alert(this[name]);
}, person.friends);

Answer 3

上下文允许您在调用时提供参数,从而可以轻松自定义通用的预构建辅助函数.

一些例子:

// stock footage:
function addTo(x){ "use strict"; return x + this; }
function pluck(x){ "use strict"; return x[this]; }
function lt(x){ "use strict"; return x < this; }

// production:
var r = [1,2,3,4,5,6,7,8,9];
var words = "a man a plan a canal panama".split(" ");

// filtering numbers:
_.filter(r, lt, 5); // elements less than 5
_.filter(r, lt, 3); // elements less than 3

// add 100 to the elements:
_.map(r, addTo, 100);

// encode eggy peggy:
_.map(words, addTo, "egg").join(" ");

// get length of words:
_.map(words, pluck, "length"); 

// find words starting with "e" or sooner:
_.filter(words, lt, "e"); 

// find all words with 3 or more chars:
_.filter(words, pluck, 2); 

即使从有限的示例中,您也可以看到"额外参数"对于创建可重用代码有多强大.您可以通常调整低级助手,而不是为每种情况设置不同的回调函数.目标是让您的自定义逻辑捆绑一个动词和两个名词,只需最少的样板.

不可否认,箭头函数已经消除了通用纯函数的许多"代码高尔夫"优势,但语义和一致性优势仍然存在.

我总是添加"use strict"帮助程序以[].map()在传递基元时提供本机兼容性.否则,它们会被强制转换为通常仍然有效的对象,但是对于特定类型的对象来说更快更安全.

Answer 4

_.each 的简单使用

_.each(['Hello', 'World!'], function(word){
    console.log(word);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

这是可以使用的简单示例_.each：

function basket() {
    this.items = [];
    this.addItem = function(item) {
        this.items.push(item);
    };
    this.show = function() {
        console.log('items: ', this.items);
    }
}

var x = new basket();
x.addItem('banana');
x.addItem('apple');
x.addItem('kiwi');
x.show();

输出：

items:  [ 'banana', 'apple', 'kiwi' ]

您可以这样使用下划线，而不是addItem多次调用：

_.each(['banana', 'apple', 'kiwi'], function(item) { x.addItem(item); });

这与addItem使用这些项目按顺序调用3 次相同。基本上它会迭代您的数组，并为每个项目调用您的匿名回调函数，该函数调用x.addItem(item). 匿名回调函数类似于addItem成员函数（例如，它需要一个项目）并且是毫无意义的。因此，与其通过匿名函数，不如_.each避免这种间接调用并addItem直接调用：

_.each(['banana', 'apple', 'kiwi'], x.addItem);

但这行不通，因为在 bag 的addItem成员函数this内不会引用x您创建的篮子。这就是为什么您可以选择传递您的篮子x以用作[context]：

_.each(['banana', 'apple', 'kiwi'], x.addItem, x);

使用 _.each 和上下文的完整示例：

items:  [ 'banana', 'apple', 'kiwi' ]

_.each(['banana', 'apple', 'kiwi'], function(item) { x.addItem(item); });

简而言之，如果您以_.each任何方式传递给回调函数使用，this那么您需要this在回调函数中指定应该引用的内容。x在我的示例中，它似乎是多余的，但x.addItem它只是一个函数，可能与x或basket 或任何其他对象完全无关，例如：

_.each(['banana', 'apple', 'kiwi'], x.addItem);

_.each(['banana', 'apple', 'kiwi'], x.addItem, x);

换句话说，您将一些值绑定到this回调内部，或者您也可以像这样直接使用bind：

_.each(['banana', 'apple', 'kiwi'], addItem.bind(x));

此功能如何与一些不同的下划线方法一起使用？

通常，如果某个underscorejs方法采用回调函数，并且您希望在某个对象的某个成员函数（例如使用 的函数this）上调用该回调，那么您可以将该函数绑定到某个对象或将该对象作为[context]参数传递，那就是主要意图。在 underscorejs 文档的顶部，这正是他们所说的：迭代对象绑定到上下文对象，如果传递了一个