JQuery this 和 $(this) 详解
this
this 在面向对象语言中，指代调用上下文对象，在js中，也是一模一样的概念，所以不管这个this出现在什么地方，只要追踪到当前调用对象是什么，那么this是什么也就一目了然了。
先看一个简单示例
(function(){
console.log("Normal function being invoked by: "+ this);
})();
输出： Normal function being invoked by: [object Window]
这是个普通匿名函数，当运行这段代码，谁是宿主对象呢，对， 全局变量window， 所以这里的this 就是 window
不过请注意如果是在严格模式下，这里的this是undefined, 下面代码可以验证
(function(){
'use strict';
console.log("Normal function in strict: "+ this);
})();
输出：Normal function in strict: undefined
上面的用法很傻，更常用的方式是在自定义的对象中用this指代自身，例如
var o = { name: "Frank",
sayName : function (){console.log(this.name)}}
o.sayName();
输出：Frank
还有一个更实用的用法，是在函数中指代一个“未知的”调用上下文，也就是在定义函数时用到了this，但是这个函数被谁调用，我还不清楚，请在运行时自行绑定，这种用法在回调（callback）中很普遍，而实现这种函数和对象的动态关联，是通过函数的call( )和 apply( ) 方法实现的，看例子
var o = { name: "Frank", age: 21}
function sayAge(){
console.log("My age is "+this.age)// 这个this 表示哪个对象调用我，我就是谁
}
sayAge.call(o); //当前上下文是 o， 所以age是21
sayAge(); //当前上下文是 Window， Window没有age这个属性，所以是undefined
输出：
My age is 21
My age is undefined
OK, 理解了this，那么$(this) 就很简单了，在jQuery中，其作用就是将DOM对象wrap成一个jQuery对象，看个例子
<script src="jQuery.js" type="text/javascript"></script>
<script>
$(function() {
$('div').each(function(){
this.style.color = "blue"; // this here is DOM element, because this function is fired by in the context of the current DOM element
$(this).css( "color", "red" ); // use $(this) to wrap it to be jQuery object
});
});
</script> <html>
<body>
<div> Sample 1 </div>
<div> Sample 2 </div>
</body>
</html>
此例中，each的参数是一个匿名的callback函数，其中的this就是前面介绍过的用法，指代运行时的调用对象，详细参见： http://api.jquery.com/each/
jQuery是怎么做到的呢？ 看一下源码，很简单的
each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj );
if ( args ) {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isArray ) {
for ( ; i < length; i++ ) {
// 就是这里了，通过call将执行callback函数的上下文设置为obj[i]， 因为this指代函数运行时，invoke函数的对象（上下文），所以此时的this也就是obj[i]。而obj[i] 就是jQuery对象（数组）中的DOM对象，第二个参数是index，第三个参数基本不用，因为就是this
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) { // 如果你想终止loop，只要在回调函数中返回false就可以了
break;
}
}
} else {
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
}
}
return obj;
},
版权声明：本文为博主原创文章，未经博主允许不得转载。
JQuery this 和 $(this) 详解的更多相关文章
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- jQuery的deferred对象详解
jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...
- jQuery的deferred对象详解(转载)
本文转载自: jQuery的deferred对象详解(转载)
- 触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jQuery的deferred对象详解（一）
最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
- 触碰jQuery：AJAX异步详解（转）
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- 【转】jQuery Validate验证框架详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
- jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...
- [转] jQuery的deferred对象详解
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
随机推荐
- vi编辑器使用相关
一.vi的使用 1.vi一共分为3种模式,分别是一般模式.编辑模式和命令行模式 2.一般模式:以vi打开一个文件就直接进入一般模式(也是默认的模式). 在这个模式下可以使用上下左右移动光标,还可以删除 ...
- C++实现不能被继承的类——终结类 分类： C/C++ 2015-04-06 14:48 64人阅读 评论(0) 收藏
1. 问题 C++如何实现不能被继承的类,即终结类.Java中有final关键字修饰,C#中有sealed关键字修饰,而C++目前还没有类似的关键字来修饰类实现终结类,需编程人员手动实现. ...
- Java输入输出流（一）——常用的输入输出流
1.流的概念:在Java中,流是从源到目的地的字节的有序序列.Java中有两种基本的流--输入流(InputStream)和输出流(OutputStream). 根据流相对于程序的另一个端点的不同,分 ...
- Android 百度地图的使用
可以参考百度官网Android开发指南. 里面有详细的步骤和Sample例子. http://lbsyun.baidu.com/index.php?title=androidsdk/guide/int ...
- php分10个不同等级压缩优化图片
今天找到一个php写的压缩图片程序,可以分10个等级(0-9)来压缩,0等级时压缩比率不是很大,图片不会失真:随着压缩等级不断增大,图片会变得越来越不清晰,通常压缩后图片大小可以减少到原来的50%,压 ...
- Mina 资料
http://blog.csdn.net/cutesource/article/category/631854 http://wslfh2005.iteye.com/ http://www.cnblo ...
- 对char类型的理解以及对补码的理解分析
今天遇到这样一个小程序,觉得当中有些问题很容易让人忽略的! 这个程序代码如下: 程序的结果为: 我想很多像我一样的小白可能才开始是想不明白为什么最后的结果是255吧!首先,我们得知道 strlen() ...
- (Design Pattern) Singleton.
Role: The purpose of the Singleton pattern is to ensure that there is only one instance of a class, ...
- linux下安装jdk的几种方式
1.rpm方式安装: rpm -qa | grep jdk 查看是否安装了jdk,或者用java -version查看java版本 rpm -e --nodeps java-1.7.0-openjdk ...
- Makefile 自动化变量
Makefile中常用自动化变量解释如下: $@------规则的目标文件名 $<------规则的第一个依赖项文件名 $^------规则的所有依赖文件列表,以空格隔开. $?-------所 ...