jQuery源码二周目#5 迭代器

each迭代器

jQuery的each方法从使用上就要分2种情况：
$.each()
$(selector).each()

    jQuery.extend({

        each: function (obj, callback) {
            var i = 0;

            if (type(obj) === 'Array' || typeof obj.length === 'number') { // 遍历数组
                for (; i < obj.length; i++) {
                    var result = callback.call(obj[i], obj[i], i);
                    if (result === false) {
                        break;
                    }
                }
            } else {
                for (i in obj) { // 遍历对象
                    var result = callback.call(obj[i], obj[i], i);
                    if (result === false) {
                        break;
                    }
                }
            }
        }
    })

这是第一种调用，通过静态方法遍历数组或对象

    jQuery.fn = jQuery.prototype = {

        each: function (callback) {
            return jQuery.each(this, callback);
        }
    }

这是第二种调用，通过在jQuery对象后面.each直接遍历该对象中的所有元素

然后本节内容就完了，结尾顺便说说this指向的问题。javascript中this的指向非常灵活的，可以通过call()、apply()随意设置，也就是在方法调用前我们永远也不知道this指向哪里，只有在方法调用过程才能知道。js的这一特性让方法变得很灵活，缺点是很容易让人陷入混乱。

举几个例子

function fn1() {
    console.log(this);
}

调用fn1()后控制台会打印window对象，也就是说在这个函数中的this指向window。
但是调用new fn1()后控制台会打印fn1 {}，也就是说使用new关键字之后fn1不在作为一个函数，而是作为一个对象被调用，所以this指向fn1对象

var obj = {
    fn1: function() {
        console.log(this);
    }
}

调用obj.fn1()打印的是obj {}，在这里this指向的是obj对象

简单总结下就是方法是被哪个对象调用的，方法中的this就指向该对象。那么回到第一个例子，是谁调用的fn1()的？第一个例子打印的是window那就是window调用的咯，前面有一篇提到过像这种在全局作用域中声明的函数或者变量，默认是挂载在window对象下的，能够通过window.调用得到的，也就是说fn1()的调用者其实是window对象。

再整点奇葩的代码

function fn() {
    return '这是一个函数而不是一个对象';
}

fn.print = function() {
    console.log(this);
}

给各位1s的时间猜下this指向的是谁，答案是fn方法。即便调用者不是对象也行，这就是js的强大之处，缺点是会让阅读代码的人陷入混乱。

回归正题，为什么这里要特地讲this的指向问题，是因为$.each()和$(selector).each()中都出现了这个东西，那么它们分别指向哪里？
答案：$.each()中的this指向jQuery函数本身，也就是下面这个

    var jQuery = function(selector, context) {
        return new jQuery.fn.init(selector, context);
    }

$(selector).each()中的this指向$(selector)，也就是jQuery对象

最后编辑于：2020.10.05 18:19:35