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) 详解的更多相关文章

  1. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  2. jQuery的deferred对象详解

    jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...

  3. jQuery的deferred对象详解(转载)

    本文转载自: jQuery的deferred对象详解(转载)

  4. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  5. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  6. jQuery的deferred对象详解（一）

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  7. 触碰jQuery：AJAX异步详解（转）

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  8. 【转】jQuery Validate验证框架详解

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...

  9. jQuery form插件使用详解

    点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...

  10. [转] jQuery的deferred对象详解

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

随机推荐

  1. mysql存储过程详解（入门）

    delimiter //    #修改结束符号为// create procedure pro_wyx() /*创建存储过程*/ begin declare i int ; #定义变量 set i=1 ...

  2. hihoCoder-1036 （AC自动机模板题）

    题目大意:判断模式串中是否出现模板. 代码如下: # include<iostream> # include<cstdio> # include<queue> # ...

  3. Centos 7 通过挂载系统光盘搭建本地yum仓库的方法

    实验环境:CentOS 7 1:在media文件下创建一个目录  #创建一个www文件 cd /media/www 2: 挂载光盘,将光盘挂载在刚才创建的www文件下 mount /dev/cdrom ...

  4. 【python】and和or的用法

    python 中的and从左到右计算表达式,若所有值均为真,则返回最后一个值,若存在假,返回第一个假值. or也是从左到有计算表达式,返回第一个为真的值. IDLE 1.2.4>>> ...

  5. NSMutableAttributedString 富文本删除线的用法

    #import <UIKit/UIKit.h> //价格 NSString *priceStr = @"99元 剁手价66元"; NSMutableAttributed ...

  6. C#禁止程序重复启动

    采用线程互斥锁Mutex,在winform程序的主入口点中加入如下代码,将程序改为单实例运行. static class Program { /// <summary> /// 应用程序的 ...

  7. 今天的工作发现了4年前的“bug一枚”

    上午的时候山东公司要求下拨资金160万(因目前系统不能支付个人卡),在下拨单保存的时候系统提示余额不足,我马上看内部存款,结果发现人家还有190万呢,然后就看今天的委托付款单还有下拨单,山东都没有,一 ...

  8. NSUserDefaults简介及使用

    NSUserDefaults类提供了一个与默认系统进行交互的编程接口.NSUserDefaults对象是用来保存,恢复应用程序相关的偏好设置,配置数据等等.默认系统允许应用程序自定义它的行为去迎合用户 ...

  9. 设置arc/非arc

    1,选择项目中的Targets,选中你所要操作的Target,2,选Build Phases,在其中Complie Sources中选择需要ARC的文件双击,     并在输入框中输入:-fobjc- ...

  10. VGA逐行扫描控制器的Verilog建模

    前言:因为VGA是一种模拟图像传输数据接口,所要将数字信号用DAC转换成模拟量.本文用的一款ADI公司高精度的视频IC,实则一款高带宽的视频DAC.因为VGA时序较为简单,并且网上的VGA驱动基本大同 ...