解读jQuery中extend函数

简介:
$.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );
//console.log(window.a);

//window.location.reload(); $.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ].concat( { "c" : 3, "d" : 4 } ) ); //console.log(window.a)

一、问题:

  1. null在这里是干啥?

  2. window.a分别是什么?

 

二、我们先一起来了解下jQuery中的extend函数

 在jQuery-V1.2.6中:

  jQuery - v1.2.6 extend

 

在jQuery-V1.8.2中:

  jQuery - V1.8.2 extend

 

 比较两个版本的jQuery,extend函数总体构架上基本没有变化,高版本中写代码更加规范了,很多var变量都前置(这是比较好的编码习惯,当然,也是为了方便压缩工具对代码进行压缩)。

jQuery.fn.extend就是把extend函数绑定到他的原型链中。这样一来,既可以作为静态函数在$上直接引用($.extend),也可以在$(obj)上使用extend。

注意,如果函数没有在原型链上绑定,是不能被“继承”的!

 

代码大概的意思就是:

  第一个参数是boolean类型 ---------> 深度递归复制
               |
               |
               ---------> 如果只有一个参数(除第一个boolean)---------> 将函数的this环境extend进去
                                       |
                                       |
                                       ---------> 将后面的参数extend到“第一个”参数中 ---------> 返回“第一个”参数

 

三、问题解释

  •  第一个问题中,
$.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );

extend作为一个静态函数被调用,null被绑定,但是因为满足“只有一个”参数(boolean除外)的条件 , 将函数的this环境(window)extend进去,return的对象就是window对象,所以得到的结果是

window <- { "a" : 1, "b" : 2 }

即,window.a = 1

 

 

  • 第二个问题中,
$.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ].concat( { "c" : 3, "d" : 4 } ) );

相当于传入三个参数,第一个是true,第二个是 匿名对象{ "a" : 1, "b" : 2 },第三个是匿名对象{ "c" : 3, "d" : 4 }, 此时的this环境是null(因为将函数绑定到null上面了)。

那么结果就是{ "a" : 1, "b" : 2, "c" : 3, "d" : 4 }, 此刻并不能在window中索引到a这个属性

如要想要访问,那便是null.a,但这种访问方式肯定是不对的。

由于没有变量来接收这个返回的值,所以被作为垃圾给回收了。

 

有兴趣的童鞋可以试试这个:

$.extend.apply( $, [ true, { "a" : 1, "b" : 2 } ] );
$.extend.apply( $, [ true, { "a" : 1, "b" : 2 } ].concat( { "c" : 3, "d" : 4 } ) );

把$作为当前的环境,看看a被绑定在那个元素上了~

 

 四、小结

  jQuery是一个非常优秀的JS库,也是前辈们学习JS后经验的总结和思想的结晶,从jQuery1.2版本到现在的2.0版本,代码风格上、函数处理方式上有比较明显的改变,很值得花些功夫去研究。学习的过程中多看看ta们的编码风格、编码规范,了解库的整体构架和实现原理,这样应该会有比较大的提升~

  我觉得前端这方面想独树一帜,就必须在代码中体现自己的思想。






本文转自Barret Lee博客园博客,原文链接:http://www.cnblogs.com/hustskyking/p/extend-in-jQuery.html,如需转载请自行联系原作者

目录
相关文章
|
5月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
3月前
|
JavaScript 前端开发
jQuery的作用及入口函数
jQuery的作用及入口函数
21 1
|
5月前
|
JavaScript 前端开发
jQuery 常用函数解析
jQuery 常用函数解析
|
5月前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
116 0
|
6月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
6月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
6月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
40 0
|
6月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
51 0
|
6月前
|
JavaScript 前端开发
jQuery的入口函数
jQuery的入口函数
39 0
|
6月前
|
JavaScript 前端开发 开发者
jquery常用的方法函数
jquery常用的方法函数