jQuery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。 但是如果将this换成$(this)就不是那回事了,就会报错了。 以下写法是错误的: $("#textbox").hover( function() { $(this).title = "Test"; }, function() { $(this).title = "OK"; } ); 这里的$(this)是一个JQuery对象,而jQuery对象沒有title 属性,因此这样写是错误的。 JQuery拥有attr()方法可以get/set DOM对象的属性,所以正确的写法应该是这样: 正确的写法: $("#textbox").hover( function() { $(this).attr('title', 'Test'); }, function() { $(this).attr('title', 'OK'); } ); 使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。
js
中的this
我们要记住:this
永远指向函数运行时所在的对象!而不是函数被创建时所在的对象。
this
对象是在运行时基于函数的执行环境绑定的,在全局环境中,this
等于window
先来看个例子:
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span><span class="javascript"> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> fullname = <span class="hljs-string" style="color: rgb(42, 161, 152);">"Trigkit4"</span>; <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> person = { fullname : <span class="hljs-string" style="color: rgb(42, 161, 152);">'Jack'</span>, prop:{ fullname : <span class="hljs-string" style="color: rgb(42, 161, 152);">'Blizzard'</span>, getFullname : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{ <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.fullname; } } }; <span class="hljs-built_in" style="color: rgb(38, 139, 210);">console</span>.log(person.prop.getFullname());<span class="hljs-comment" style="color: rgb(147, 161, 161);">//Blizzard</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> test = person.prop.getFullname; <span class="hljs-built_in" style="color: rgb(38, 139, 210);">console</span>.log(test());<span class="hljs-comment" style="color: rgb(147, 161, 161);">//Trigkit4</span> </span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span> </code>
当getFullname
被分配到test
变量时,上下文指的是全局对象(window)
。这是因为test
是被隐式设置为全局对象的属性。出于这个原因,该函数返回window
的fullname
,所以在这里 this
指的是window
, 所以返回的是第一个fullname
说明
this
关键字通常在对象的 构造函数中使用,用来引用对象。
关键字this
:总是指向调用该方法的对象,如:
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> iCar = <span class="hljs-keyword" style="color: rgb(133, 153, 0);">new</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Object</span>();
iCar.color = <span class="hljs-string" style="color: rgb(42, 161, 152);">"red"</span>;
iCar.showColor = <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span></span>{
alert(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.color);<span class="hljs-comment" style="color: rgb(147, 161, 161);">//输出"red"</span>
};
</code>
关键字this
用在对象的showColor()
方法中,在此环境,this
等于iCar
使用this
是因为在实例化对象时,总是不能确定开发者会使用什么样的变量名。使用this
,即可在任意多个地方重用同一个函数。考虑下面的例子:
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">showColor</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span></span>{
alert(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.color);
}
<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> oCar1 = <span class="hljs-keyword" style="color: rgb(133, 153, 0);">new</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Object</span>;
oCar1.color = <span class="hljs-string" style="color: rgb(42, 161, 152);">"red"</span>;
oCar1.showColor = showColor;
<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> oCar2 = <span class="hljs-keyword" style="color: rgb(133, 153, 0);">new</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Object</span>;
oCar2.color = <span class="hljs-string" style="color: rgb(42, 161, 152);">"blue"</span>;
oCar2.showcolor = showcolor;
oCar1.showColor();<span class="hljs-comment" style="color: rgb(147, 161, 161);">//输出"red"</span>
oCar2.showColor();<span class="hljs-comment" style="color: rgb(147, 161, 161);">//输出"blue"</span>
</code>
这段代码中,首先用this
定义函数showColor()
,然后创建两个对象oCar1
和oCar2
,一个对象属性被设置为"red
",另一个为blue
;两个对象都被赋予了属性showColor
,指向原始的showColor()
函数,调用每个showColor
的方法,oCar1
输出red
,oCar2
输出blue
。
引用对象属性时,必须使用
this
关键字。
所有基于全局作用域的变量其实都是window
对象的属性(property)。这意味着即使是在全局上下文中,this
变量也能指向一个对象。
对于 JScript
的客户版本,如果在其他所有对象的上下文之外使用 this
,则它指的是 window
对象。
例如:
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">head</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">meta</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">http-equiv</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"Content-Type"</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">content</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"text/html;charset=UTF-8"</span> /></span> <span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">title</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">title</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">type</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"text/javascript"</span>></span><span class="javascript"> alert(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>);<span class="hljs-comment" style="color: rgb(147, 161, 161);">//弹出 object window;</span> </span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">head</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">body</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">body</span>></span> </code>
作为构造函数调用
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this
就指这个新对象。
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">type</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">test</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span></span>{ <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.x = <span class="hljs-number" style="color: rgb(42, 161, 152);">10</span>; } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> obj = <span class="hljs-keyword" style="color: rgb(133, 153, 0);">new</span> test(); alert(obj.x); <span class="hljs-comment" style="color: rgb(147, 161, 161);">//弹出 10;</span> </span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span> </code>
全局环境中的this
在看下面一个this
出现在全局环境中的例子:
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">type</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> name = <span class="hljs-string" style="color: rgb(42, 161, 152);">"全局"</span>; <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">getName</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span></span>{ <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> name = <span class="hljs-string" style="color: rgb(42, 161, 152);">"局部"</span>; <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.name; }; alert(getName());<span class="hljs-comment" style="color: rgb(147, 161, 161);">//弹出 全局; </span> </span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span> </code>
函数getName()
所处的对象是window
对象,因此this
也一定在window
对象中。此时的this
指向window
对象,所以getName()
返回的this.name
其实是window.name
,因此alert
出全局。
结论:无论this
身处何处,一定要找到函数运行时(或者说在何处被调用 了)的位置。
通过不同的调用语法,改变相同函数内部this
的值:
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">type</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> foo = { test:<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span></span>{ alert(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>); } } foo.test();<span class="hljs-comment" style="color: rgb(147, 161, 161);">//object,因为test方法在调用时属于foo对象</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> baz = foo.test; baz();<span class="hljs-comment" style="color: rgb(147, 161, 161);">//window,因为baz()被调用时属于global对象</span> </span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span> </code>
局部环境中的this
看下面一个this
出现在局部环境中的例子
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">type</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> name = <span class="hljs-string" style="color: rgb(42, 161, 152);">"全局"</span>; <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> jubu={ name:<span class="hljs-string" style="color: rgb(42, 161, 152);">"局部"</span>, getName:<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span></span>{ <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.name; } }; alert(jubu.getName()); </span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span> </code>
其中this
身处的函数getName
不是在全局环境中,而是处在jubu环境中。无论this
身处何处,一定要找到函数运行时的位置。此时函数getName
运行时的位置:
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">alert(jubu.getName()); </code>
显然,函数getName
所在的对象是jubu
,因此this
的安身之处定然在jubu
,即指向jubu
对象,则getName
返回的this.name
其实是jubu.name
,因此alert
出来的是“局部”!
作用域链中的this
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">type</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">scoping</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{ <span class="hljs-built_in" style="color: rgb(38, 139, 210);">console</span>.log(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>); <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{ <span class="hljs-built_in" style="color: rgb(38, 139, 210);">console</span>.log(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>); }; } scoping()(); >><span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span> >> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span> </span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span> </code>
因为scoping
函数属于window对象,自然作用域链中的函数也属于window
对象。
对象中的this
可以在对象的任何方法中使用this
来访问该对象的属性。这与用new
得到的实例是不一样的。
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> obj = {
foo: <span class="hljs-string" style="color: rgb(42, 161, 152);">"test"</span>,
bar: <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
<span class="hljs-built_in" style="color: rgb(38, 139, 210);">console</span>.log(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.foo);
}
};
obj.bar(); <span class="hljs-comment" style="color: rgb(147, 161, 161);">// "test"</span>
</code>
重写this
无法重写this
,因为它是一个关键字。
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">test</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span> = {}; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// Uncaught SyntaxError: Unexpected token this </span>
}
</code>
jquery中的this
$()
生成的是什么呢?实际上$()=jquery()
,那么也就是说返回的是一个jquery
的对象。
$(this)
是jquery
对象,能调用jquery
的方法,例如click()
, keyup()
。
<code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"> $(<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
$(<span class="hljs-string" style="color: rgb(42, 161, 152);">'button'</span>).click(<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
alert(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>);<span class="hljs-comment" style="color: rgb(147, 161, 161);">//this 表示原生的DOM</span>
<span class="hljs-comment" style="color: rgb(147, 161, 161);">//$(this)表示当前对象,这里指的是button</span>
})
});
</code>
结论:
this
,表示当前的上下文对象是一个html DOM
对象,可以调用html
对象所拥有的属性,方法。
$(this)
,代表的上下文对象是一个jquery
的上下文对象,可以调用jquery
的方法和属性值。