jQuery中extend()和fn.extend()方法详解

2020-05-22 17:07:11易采站长站整理

‰ ‰ 变量 deep:指示是否执行深度复制,默认为 false。

为了更好地了解代码实现这里以上面举的一个例子作为演示观察源代码执行情况


      var obj1={name:’Tom’,love:{drink:’milk’,eat:’bread’}};
      var obj2={name:’Jack’,love:{drink:’water’,sport:’football’}};
      $.extend(true,obj1,obj2)

源码分析


// Handle a deep copy situation
    if ( typeof target === “boolean” ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

判断是不是深度复制,如果第一个参数是布尔值那么就把第一个参数的值给deep,然后把第二个参数作为目标对象,如果第二个参数不存在就赋值为一个空对象,把源对象的下标改为2,在这个例子里面  是走这里的因为第一个参数是ture然后把deep变成了true ,target被修正成了第二个参数也即是obj1,源对象的起始下标为2就是从第三个开始作为源对象也就是本例中的obj2


// Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== “object” && !jQuery.isFunction(target) ) {
        target = {};
    }

这里对target又进一步进行了处理对于非对象和函数的数据类型而言增加自定义属性是无效的比如字符串自能调用自带的方法和属性


// extend jQuery itself if only one argument is passed
    if ( length === i ) {
        target = this;
        –i;
    }

如果length属性等于i的值那就表示没有目标对象存在,正常情况下length应该是大于i的值的 ,那么这个时候就把this作为目标对象把i值减一实现length值大于i值(比i大1)

这个就是jQuery给自己扩展属性的方法的实现原理,只要不传入目标对象就可以啦

两种可能的情况:$.extend(obj)    或者  $.extend(false/true,obj);


    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) {