jQuery源码笔记——四

each()实现

var jQuery = function( selector, context ) {

        return new jQuery.fn.init( selector, context );

};

jQuery.fn = jQuery.prototype = {

    selector: "",

    init: function(selector){

        //仍然是mini的选择器。

        var result = document.querySelectorAll(selector);

        for(var i = 0;i < result.length;i++){

            this[i] = result[i] 

        }

        this.length = result.length;

    },

    //指定操作对象为this

    each: function(callback){

        return jQuery.each(this,callback)

    },

    constructor : jQuery

}

jQuery.fn.init.prototype = jQuery.fn

//对任意对象进行迭代操作

jQuery.each = function(obj,callback){

    for(var i = 0;i<obj.length;i++){

        //运用call调整this的指向

        //回调函数里的this指向操作的对象

        //方便操作

        callback.call(obj[i],i,obj[i]);

    }

    //链式调用

    return obj

}

//测试

jQuery("div").each(function(index, element) {

    console.log(this)

});

//jQ内部也经常用迭代操作数组或其它。

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {

    console.log(name.toLowerCase())

});

jQuery.each是jQuery的工具,迭代操作对象合集里的对象,所以不用继承在原型中,而jQuery.fn.each就是jQuery.each的一个特例。

each是一个典型的迭代运用,如我们想对一个合集的对象都执行的某功能,callback,通过each遍历对象或者数组就可以实现不停变化callback的操作对象。

原理很简单就是将元素遍历依次传给回调函数,原代码中还考虑了一些情况,但没什么新知识,我就不补充了。

回调函数

作为参数的函数就叫回调函数。当一个函数接收一个函数

你可能感兴趣的:(jquery)