JQuery this 和 $(this) 详解

简介: this  this 在面向对象语言中,指代调用上下文对象,在js中,也是一模一样的概念,所以不管这个this出现在什么地方,只要追踪到当前调用对象是什么,那么this是什么也就一目了然了。 先看一个简单示例 (function(){ console.log("Normal function being invoked by: "+ 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;
	},




目录
相关文章
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
68 0
|
6月前
|
JavaScript 前端开发 开发者
$(this) 和 this 关键字在 jQuery 中有何不同?
$(this) 和 this 关键字在 jQuery 中有何不同?
77 0
|
6月前
|
JavaScript 前端开发
$(this) 和 this 关键字在 jQuery 的不同
$(this) 和 this 关键字在 jQuery 的不同
43 0
|
JavaScript 前端开发
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
61 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
62 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
47 4
jQuery Growl 插件(消息提醒)