我是 underscore.js 的新手。[context]
in的目的是_.each()
什么?应该如何使用?
_.each(list, iterator, [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
对象。
context
是this
在您的迭代器函数中引用的地方。例如:
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);
上下文允许您在调用时提供参数,允许轻松定制通用的预构建帮助函数。
一些例子:
// 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()
兼容性。否则,它们会被强制转换为对象,这通常仍然有效,但特定于类型更快更安全。
_.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);
但这行不通,因为在篮子内部的addItem
成员函数this
不会引用x
您创建的篮子。这就是为什么您可以选择传递您的篮子x
以用作[context]
:
_.each(['banana', 'apple', 'kiwi'], x.addItem, x);
使用 _.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();
_.each(['banana', 'apple', 'kiwi'], x.addItem, x);
x.show();
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
简而言之,如果您以_.each
任何方式传递给回调函数使用,this
那么您需要this
在回调函数中指定应该引用的内容。x
在我的示例中,它似乎是多余的,但x.addItem
它只是一个函数,可能与x
或basket
或任何其他对象完全无关,例如:
function basket() {
this.items = [];
this.show = function() {
console.log('items: ', this.items);
}
}
function addItem(item) {
this.items.push(item);
};
var x = new basket();
_.each(['banana', 'apple', 'kiwi'], addItem, x);
x.show();
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
换句话说,您将一些值绑定到this
回调内部,或者您也可以像这样直接使用绑定:
_.each(['banana', 'apple', 'kiwi'], addItem.bind(x));
此功能如何与一些不同的下划线方法一起使用?
通常,如果某个underscorejs
方法采用回调函数,并且您希望在某个对象的某个成员函数(例如,使用 的函数this
)上调用该回调,那么您可以将该函数绑定到某个对象或将该对象作为[context]
参数传递,那就是主要意图。在 underscorejs 文档的顶部,这正是他们所说的:迭代对象绑定到上下文对象,如果传递了一个
正如在其他答案中所解释的,context
是this
在回调中使用的上下文传递给each
.
我将在下划线源代码中相关方法的源代码的帮助下解释这一点
_.each
或的定义_.forEach
如下:
_.each = _.forEach = function(obj, iteratee, context) {
iteratee = optimizeCb(iteratee, context);
var i, length;
if (isArrayLike(obj)) {
for (i = 0, length = obj.length; i < length; i++) {
iteratee(obj[i], i, obj);
}
} else {
var keys = _.keys(obj);
for (i = 0, length = keys.length; i < length; i++) {
iteratee(obj[keys[i]], keys[i], obj);
}
}
return obj;
};
第二个声明很重要,请注意这里
iteratee = optimizeCb(iteratee, context);
在这里,context
传递给另一个方法,optimizeCb
然后将返回的函数分配给iteratee
稍后调用的函数。
var optimizeCb = function(func, context, argCount) {
if (context === void 0) return func;
switch (argCount == null ? 3 : argCount) {
case 1:
return function(value) {
return func.call(context, value);
};
case 2:
return function(value, other) {
return func.call(context, value, other);
};
case 3:
return function(value, index, collection) {
return func.call(context, value, index, collection);
};
case 4:
return function(accumulator, value, index, collection) {
return func.call(context, accumulator, value, index, collection);
};
}
return function() {
return func.apply(context, arguments);
};
};
从上面的方法定义可以看出optimizeCb
,如果context
没有通过,则func
原样返回。如果context
传递,回调函数被调用为
func.call(context, other_parameters);
^^^^^^^
func
被调用 with call()
which 用于通过设置this
它的上下文来调用方法。所以,当this
在 inside 中使用时func
,它会引用context
.
// Without `context`
_.each([1], function() {
console.log(this instanceof Window);
});
// With `context` as `arr`
var arr = [1, 2, 3];
_.each([1], function() {
console.log(this);
}, arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
您可以将context
to视为forEach
JavaScript 中的最后一个可选参数。