jquery中this与$(this)的用法区别.和于js中的this区别

最新推荐文章于 2022-05-11 11:59:50 发布

段子手

最新推荐文章于 2022-05-11 11:59:50 发布

阅读量422

点赞数

分类专栏： jquery

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

转载：http://blog.csdn.net/u012889638/article/details/45967825

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的方法和属性值。

段子手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery中this与$(this)的用法区别.和于js中的this区别

转载：http://blog.csdn.net/u012889638/article/details/45967825jQuery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 这里的this其实
复制链接

扫一扫