首页 > 函数名:function()是jquery的函数定义方式对吗?这是什么原理,浏览器是什么机制来解析这种语法?附代码

函数名:function()是jquery的函数定义方式对吗?这是什么原理,浏览器是什么机制来解析这种语法?附代码

jQuery = function( selector, context ) {
    return new jQuery.prototype.init( selector, context );
};
    
jQuery.fn = jQuery.prototype = {
    init: function(){
        this.age = 23;
        return this;    // 返回jQuery实例对象
    },
    age: 18
    // code
};
jQuery.extend = jQuery.fn.extend = function() {
    var src, copyIsArray, copy, name, options, clone,
        target = arguments[0] || {},    // 常见用法 jQuery.extend( obj1, obj2 ),此时,target为arguments[0]
        i = 1,
        length = arguments.length,
        deep = false;

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) {    // 如果第一个参数为true,即 jQuery.extend( true, obj1, obj2 ); 的情况
        deep = target;  // 此时target是true
        target = arguments[1] || {};    // target改为 obj1
        // skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {  // 处理奇怪的情况,比如 jQuery.extend( 'hello' , {nick: 'casper})~~
        target = {};
    }

    // extend jQuery itself if only one argument is passed
    if ( length === i ) {   // 处理这种情况 jQuery.extend(obj),或 jQuery.fn.extend( obj )
        target = this;  // jQuery.extend时,this指的是jQuery;jQuery.fn.extend时,this指的是jQuery.fn
        --i;
    }

    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) { // 比如 jQuery.extend( obj1, obj2, obj3, ojb4 ),options则为 obj2、obj3...
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {    // 防止自引用,不赘述
                    continue;
                }

                // Recurse if we're merging plain objects or arrays
                // 如果是深拷贝,且被拷贝的属性值本身是个对象
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {    // 被拷贝的属性值是个数组
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {    被拷贝的属性值是个plainObject,比如{ nick: 'casper' }
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );  // 递归~

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {  // 浅拷贝,且属性值不为undefined
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
    
    
    
    

你指的是下面的init方法么?:

jQuery.fn = jQuery.prototype = {
    init: function(){
        this.age = 23;
        return this;    // 返回jQuery实例对象
    },
    age: 18
    // code
};

注意这里的jQuery.prototype是一个Literal Object,下面我们来看看关于一个literal的定义:

注意我选中的部分,names必须是字符串,也就是上例中的initage,而values可以是"any value",既然是任意值,那当然也可以是函数啦!

这和jquery其实是没什么关系的


不对。 这是js的语法,jQuery只是js的一个库。浏览器解析js天经地义。

{
    name: function () {}, 
    age: 18
}

都是定义了一个对象的成员,只不过一个是函数类型,一个是数字类型


不知你说的后期函数名更新是什么意思,这只是将同一个对象赋给了两个变量而已。一边有改动,另一边也会一起更新

【热门文章】
【热门文章】