.each函数中的"this“不指向..each的调用方

Question

在jQuery中，

$('.myClass').each(function(){return this;})

将使用类.myClass还原每个元素。我认为mootools的.each函数也是如此。但是，当我试图读取以下代码时，我感到困惑(“附加”函数是有问题的方法，因此您可以跳过其他代码)：

var Mosaic = new Class({

        Implements: //some codes,

        options: //some codes

        initialize: function(options){
            this.setOptions(options);

            this.mosaics = document.getElements('[data-mosaic]');
            this.mosaic = {};
            this.settings = {};
            try {
                RokMediaQueries.on('every', this.mediaQuery.bind(this));
            }
            catch(error) { if (typeof console != 'undefined') console.error('Error while trying to add a RokMediaQuery "match" event', error); }
        },

        attach: function(mosaic, settings){
            mosaic = typeOf(mosaic) == 'number' ?
                    document.getElements('[data-mosaic=' + this.getID(mosaic) + ']')
                    :
                    mosaic;
            settings = typeOf(settings) == 'string' ? JSON.decode(settings) : settings;

            var containers = (mosaic ? new Elements([mosaic]).flatten() : this.mosaics);

            containers.each(function(container){
                container.store('roksprocket:mosaic:attached', true);
                this.setSettings(container, settings, 'restore');
                // ..... 

        setSettings: //some functions
        // .....
    });

在“附加”方法中，有一个containers.each调用，其中'this‘不是指向'containers’的当前元素，而是指向通过Mosaic创建的实例。在代码中的某个地方，有这样的东西：

myDemonstrate = new Mosaic();
myDemonstrate.attach(somekey, someJson);

我在线路上设置了一个断点

this.setSettings(container, settings, 'restore');

在这一点上，" this“实际上是myDemonstrate对象。

那么，为什么这里的"this“不是.each函数的调用者呢？这与它在Mosaic()函数中的事实有关吗？

(RokSprocketMosaic是RocketTheme开发的joomla扩展，如果需要，您可以在这里找到Mosaic.js文件：roksprocket/layouts/mosaic/themes/default/mosaic.js)

Answer 1

MooTools .each()迭代器的行为类似ES5的.forEach()，即它将将数组元素和resp索引传递给函数。this对应于执行上下文，也可以通过将bind参数传递给方法来设置。

作为@DimitarChristoff在评论中提到，如果没有提供bind参数，那么this将依赖于您的文档标准模式--在严格模式下的global object或undefined。在……下面。

摘录自mootools.net的医生们

数组方法: each()

为数组中的每个元素调用一个函数。

语法：

myArray.each(fn[, bind]);

参数：

1. fn -(函数)应该对数组中的每个项执行的函数。此函数在数组中传递项及其索引。
2. 绑定- ( object，可选)函数中用作“this”的对象。有关更多信息，请参见函数:绑定。

论点: fn

语法：fn(项目、索引、数组)

参数：

1. 项-(混合)数组中的当前项。
2. 索引-(数字)数组中当前项的索引。
3. 数组-(数组)实际数组。

示例：

//Alerts "0 = apple", "1 = banana", and so on:

['apple', 'banana', 'lemon'].each(function(item, index){
    alert(index + " = " + item);
}); 

//The optional second argument for binding isn't used here.

因此，代码中的this对应于MooTools类，因此调用this.setSettings()将调用该类的方法setSettings，这是您发布的代码的最后一行。

Answer 2

Jquery中的.each()函数类似于foreach函数。如果您不初始化.each()函数的参数，那么它将作为一个对象返回整个元素。

例如，如果我们引用以下内容，那么web页面就有带有div类的Div元素包

$(".Div").each(function(){ return this; })

它将作为一个对象返回整个元素，如{ div1，div2，.。}

如果需要将其作为单个元素返回，则必须将索引和元素设置为每个函数的参数，如下

$(".Div").each(function(index, element){ 
return this; // this returns only one element until the object ends. 
});