2018年04月6日网站服务器迁移完成……

jQuery 源码

Css 苏 demo 1471℃ 0评论

jQuery源码太多关联了,所以不好单独拿出来做分析,就举一两个简单的例子吧:

toArray方法

jQuery.prototype = {
    toArray: function() {
            return slice.call( this );
        },
}

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,也就是说其目的是将arguments对象的数组提出来转化为数组。例如:

<script>
    var a = {length:4,0:'zero',1:'one',2:'two'};
    console.log(Array.prototype.slice.call(a));// Array [ "zero", "one", "two", <1 个空的存储位置> ]
</script>

Array
这是我们想要的基对象名称

prototype
这可以被认为是一个数组的实例方法的命名空间

slice
这提取数组的一部分并返回新的数组,并没有开始和结束索引,它只是返回一个数组的拷贝

call
这是一个非常有用的功能,它允许你从一个对象调用一个函数并且使用它在另一个上下文环境

下面的写法是等效的:

Array.prototype.slice.call == [].slice.call

看这个例子:

object1 = {
    name:'frank',
    greet:function(){
        alert('hello '+this.name)
    }
};

object2 = {
    name:'trigkit4'
};

// object2没有greet方法
// 但我们可以从object1中借来

 object1.greet.call(object2);//弹出hello trigkit4

分解一下就是object1.greet运行弹出hello + 'this.name',然后object2对象冒充,this就指代object2

var t = function(){
    console.log(this);// String [ "t", "r", "i", "g", "k", "i", "t", "4" ]
    console.log(typeof this);  //  Object
    console.log(this instanceof String);  // true
};
t.call('trigkit4');

call(this)指向了所传进去的对象。

Object.prototype中已经包含了一些方法:

    1.toString ( )

    2.toLocaleString ( )

    3.valueOf ( )

    4.hasOwnProperty (V)

    5.isPrototypeOf (V)

    6.propertyIsEnumerable (V)

on方法

jQuery.fn.extend({
    on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
        var type, origFn;

        // Types can be a map of types/handlers
        if ( typeof types === "object" ) {
            // ( types-Object, selector, data )
            if ( typeof selector !== "string" ) {
                // ( types-Object, data )
                data = data || selector;
                selector = undefined;

            }
        }
})


jQuery.extend(object) :为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object) :给jQuery对象添加方法。

!= 在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较.
!== 不会进行类型转换,在比较时除了对值进行比较以外,还比较两边的数据类型, 它是恒等运算符===的非形式。

on : function(){}js对象字面量的写法

{键:值,键:值}语法中的“健/值”会成为对象的静态成员。如果给某个“健”指定的值是一个匿名函数,那么该函数就会变成对象的静态方法;否则就是对象的一个静态属性。
图片描述

jQuery类型判断

type: function( obj ) {
            if ( obj == null ) {
                return obj + "";
            }
            return typeof obj === "object" || typeof obj === "function" ?
            class2type[ toString.call(obj) ] || "object" :
                typeof obj;
        },

前面已经分析了,class2type = {};所以class2type[ toString.call(obj) ] =
{}.toString.call(obj)。它的作用是改变toStringthis指向为object的实例。

打赏

转载请注明:苏demo的别样人生 » jQuery 源码

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情