深入学习理解jQuery中的extend方法以及JavaScript中对象的复制

深入学习理解jQuery中的extend方法以及JavaScript中对象的复制

本文参见的jQuery版本号是:jquery-1.11.1.js

1. jQueryextend方法介绍

查看jQuery的API Document可以发现,extend方法被挂载在了jQuery和jQuery.fn两个不同对象上,但查看jQuery内部代码实现两者确是相同的,只是功能却不太一样;再查看官方的注释:

jQuery.extend(): Merge the contents of two or moreobjects together into the first object.

—-把两个或者更多的对象合并到第一个对象当中

jQuery.fn.extend():Merge the contents of an object ontothe jQuery prototype to provide new jQuery instance methods.

—-把对象挂载到jQuery的prototype对象上,用以扩展一个新的jQuery实例方法

简单理解两者区别:

jQuery.extend(object):用于将一个或多个对象的内容合并到目标对象。

该函数可以将一个或多个对象的成员属性和方法复制到指定的对象上。

该函数属于全局jQuery对象。

jQuery.fn.extend(object):函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。

jQuery.fn是jQuery的原型对象,其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。

该函数属于jQuery的原型对象(jQuery.fn)。

2. 关于使用上的区别

静态函数jQuery.extend()有以下两种用法:用法一:jQuery 1.0 新增该用法。

jQuery.extend(target [, object1 ] [, objectN… ] )用法二:jQuery 1.1.4 新增该用法。

jQuery.extend([ deep ], target , object1 [, objectN… ] )用法二是用法一的变体,参数deep用于指示是否深度递归合并。

注意事项:1、该函数复制的对象属性包括方法在内。此外,还会复制对象继承自原型中的属性(JS内置的对象除外)。2、参数deep的默认值为false,可以明确指定该参数为true值,但不能明确指定为false值。简而言之,第一个参数不能为false值。3、如果参数为null或undefined,则该参数将被忽略。4、如果只为$.extend()指定了一个参数,则意味着参数target被省略。此时,target就是jQuery对象本身。通过这种方式,我们可以为全局对象jQuery添加新 的函数。5、如果多个对象具有相同的属性,则后者会覆盖前者的属性值。

6、改函数的返回值为参数target代表的对象。

插播深度复制的一些知识:

jQuery中深度复制,是将除null,undefined,window对象,dom对象,通过继承创建的对象外的其它对象克隆后保存到target中;之所以排除部分对象,一是考虑性能,二是考虑复杂度(如dom、window对象,如果克隆复制,消耗过大,而通过继承实现的对象,复杂程度不可预知,因此也不进行深度复制);深度与非深度复制区别是,深度复制的对象中如果有复杂属性值(如数组、函数、json对象等),那将会递归属性值的复制,合并后的对象修改属性值不影响原对象静态函数jQuery.fn.extend( object )的用法:jQuery 1.0 新增该静态函数。

jQuery.fn.extend()函数的返回值是Object类型,返回jQuery的原型对象(即jQuery.fn)。

3.jQuery源码实现

先来看看jQuery中源代码的实现:

jQuery.extend = jQuery.fn.extend = function() {var src, copyIsArray, copy, name, options, clone,target = arguments[0] || {},i = 1,length = arguments.length,deep = false;// Handle a deep copy situationif ( typeof target === "boolean" ) {deep = target;// skip the boolean and the targettarget = arguments[ i ] || {};i++;}// Handle case when target is a string or something (possible in deep copy)if ( typeof target !== "object" && !jQuery.isFunction(target) ) {target = {};}// extend jQuery itself if only one argument is passedif ( i === length ) {target = this;i–;}for ( ; i < length; i++ ) {// Only deal with non-null/undefined valuesif ( (options = arguments[ i ]) != null ) {// Extend the base objectfor ( name in options ) {src = target[ name ];copy = options[ name ];// Prevent never-ending loopif ( target === copy ) {continue;}// Recurse if we're merging plain objects or arraysif ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {if ( copyIsArray ) {copyIsArray = false;clone = src && jQuery.isArray(src) ? src : [];} else {clone = src && jQuery.isPlainObject(src) ? src : {};}// Never move original objects, clone themtarget[ name ] = jQuery.extend( deep, clone, copy );// Don't bring in undefined values} else if ( copy !== undefined ) {target[ name ] = copy;}}}}// Return the modified objectreturn target;};用最少的浪费面对现在

深入学习理解jQuery中的extend方法以及JavaScript中对象的复制

相关文章:

你感兴趣的文章:

标签云: