深入学习jquery源码之slice

深入学习jquery源码之slice

slice(start, [end])

概述

选取一个匹配的子集

与原来的slice方法类似

参数

start Integer

开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。

end Integer

结束选取自己的位置，如果不指定，则就是本身的结尾。 

选择第一个p元素

<p>Hello</p><p>cruel</p><p>World</p>

$("p").slice(0, 1).wrapInner("<b></b>");

[ <p><b>Hello</b></p> ]

选择前两个p元素

<p>Hello</p><p>cruel</p><p>World</p>

$("p").slice(0, 2).wrapInner("<b></b>");

[ <p><b>Hello</b></p>,<p><b>cruel</b></p> ]

只选取第二个p元素

<p>Hello</p><p>cruel</p><p>World</p>

$("p").slice(1, 2).wrapInner("<b></b>");

[ <p><b>cruel</b></p> ]

只选取第二第三个p元素

<p>Hello</p><p>cruel</p><p>World</p>

$("p").slice(1).wrapInner("<b></b>");

[ <p><b>cruel</b></p>, <p><b>World</b></p> ]

选取第最后一个p元素

<p>Hello</p><p>cruel</p><p>World</p>

$("p").slice(-1).wrapInner("<b></b>");

[ <p><b>World</b></p> ]

 

Array.prototype.slice.call(arguments,1);这句话的意思就是说把调用方法的参数截取出来。

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组，除了IE下的节点集合（因为ie下的dom对象是以com对象的形式实现的，js对象与com对象不能进行转换） 

 function test(a,b,c,d) 
   { 
      var arg = Array.prototype.slice.call(arguments,1); 
      alert(arg); 
   } 
   test("a","b","c","d"); //b,c,d

因为arguments并不是真正的数组对象，只是与数组类似而已，所以它并没有slice这个方法，而Array.prototype.slice.call(arguments, 1)可以理解成是让arguments转换成一个数组对象，让arguments具有slice()方法。要是直接写arguments.slice(1)会报错。

转成数组的通用函数

var toArray = function(s){
    try{
        return Array.prototype.slice.call(s);
    } catch(e){
        var arr = [];
        for(var i = 0,len = s.length; i < len; i++){
            //arr.push(s[i]);
               arr[i] = s[i];  //据说这样比push快
        }
         return arr;
    }
}

 

Array.prototype.slice.apply(arguments, [1])

apply方法与call方法是一样的，区别只是传参的形式，需要把方法参数按数组形式传进：

Array.prototype.apply(arguments, [1])

调用Array.prototype.slice.apply(arguments)的意义就在于它能将函数的参数对象转化为一个真正的数组。

Array.prototype.slice.apply(arguments， [1])用意
首先这段代码的目的是为了拿到参数里除第一个以外后面的所有参数。

现在arguments 不是数组，所以不能直接调用slice方法，在JavaScript 中借用其它对象的方法可以通过apply或者call
 

arguments参数
生成 
JavaScript在创建函数时，会自动生成一个Arguments对象实例arguments，可以用数组下标的方式”[]”引用arguments的元素。arguments.length为函数实参个数，arguments.callee引用函数自身。

特性：

arguments对象和Function是分不开的。因为arguments这个对象不能显式创建，arguments对象只有函数开始时才可用。

使用方法： 
虽然arguments对象并不是一个数组，但是访问单个参数的方式与访问数组元素的方式相同
 

jquery源码

(function (global, factory) {

    if (typeof module === "object" && typeof module.exports === "object") {
        // For CommonJS and CommonJS-like environments where a proper window is present,
        // execute the factory and get jQuery
        // For environments that do not inherently posses a window with a document
        // (such as Node.js), expose a jQuery-making factory as module.exports
        // This accentuates the need for the creation of a real window
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info
        module.exports = global.document ?
            factory(global, true) :
            function (w) {
                if (!w.document) {
                    throw new Error("jQuery requires a window with a document");
                }
                return factory(w);
            };
    } else {
        factory(global);
    }

    // Pass this if window is not defined yet
}(typeof window !== "undefined" ? window : this, function (window, noGlobal) {

    // Can't do this because several apps including ASP.NET trace
    // the stack via arguments.caller.callee and Firefox dies if
    // you try to trace through "use strict" call chains. (#13335)
    // Support: Firefox 18+
    //

    var deletedIds = [];

    var slice = deletedIds.slice;
	
	var concat = deletedIds.concat;

    var push = deletedIds.push;
	
	var support = {};
	
	    jQuery.fn = jQuery.prototype = {
        // The current version of jQuery being used
        jquery: version,

        constructor: jQuery,

        // Start with an empty selector
        selector: "",

        // The default length of a jQuery object is 0
        length: 0,
		
		        // Take an array of elements and push it onto the stack
        // (returning the new matched element set)
        pushStack: function (elems) {

            // Build a new jQuery matched element set
            var ret = jQuery.merge(this.constructor(), elems);

            // Add the old object onto the stack (as a reference)
            ret.prevObject = this;
            ret.context = this.context;

            // Return the newly-formed element set
            return ret;
        },
		 slice: function () {
            return this.pushStack(slice.apply(this, arguments));
        }
		// For internal use only.
        // Behaves like an Array's method, not like a jQuery method.
        push: push,
        sort: deletedIds.sort,
        splice: deletedIds.splice
    };
    return jQuery;

}));