JavaScript中的this妙用

<p><code></p> <p>JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数。<br />我们先来看如下一个网页,在用户单击链接之后,弹出一个alert框,然后再转到href属性所指的网页<br />HTML:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;UTF-8&quot;> <title>JavaScript中的this妙用</title> <script type=&quot;text/javascript&quot; src=&quot;js/script.js&quot;></script> </head> <body> </p> <p style=&quot;text-algin:center;&quot;> 你好,点击这里去<a id=&quot;redirect&quot; href=&quot;http://www.mybry.com/obj/store/list.html&quot;>旧物商店</a> </p> <p> </body> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>JavaScript中的this妙用<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/script.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-algin:center;"</span>&gt;</span> 你好,点击这里去<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"redirect"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://www.mybry.com/obj/store/list.html"</span>&gt;</span>旧物商店<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>JS:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="window.onload = initAll; function initAll(){ document.getElementById(&quot;redirect&quot;).onclick = initRedirect; } function initRedirect(){ alert(&quot;这是我创建的旧物商城,欢迎访问!&quot;); window.location = this; return false; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-built_in">window</span>.onload = initAll; <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">initAll</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"redirect"</span>).onclick = initRedirect; } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">initRedirect</span>(<span class="hljs-params"></span>)</span>{ alert(<span class="hljs-string">"这是我创建的旧物商城,欢迎访问!"</span>); <span class="hljs-built_in">window</span>.location = <span class="hljs-keyword">this</span>; <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; }</code></pre> <p><a href="http://sandbox.runjs.cn/show/mp2pnrda" rel="nofollow noreferrer" target="_blank">在线演示</a></p> <p>你可能会主要到,代码中并没有引用特定的网页——这是this关键字的作用之一。this替我们完成的工作之一是从HTML链接获得URL(也就是a标签的href属性)。由于采用这种方式,如果以后脚本改为指向其他的页面而不是旧物商店页面,就不必修改JS。实际上,可以让WEB站点上的所有链接都调用这个相同的JS代码,这一行代码都会自动获得相应的href值。<br />这样写还有一个好处:如果用户的浏览器不理解JavaScript(比如禁用了JS),那么它只会加载HTML页面,而不显示alert提示,当他们点击链接时,会像一般情况下那样加载页面,不会发生错误,没有任何问题。<br />我们在来看一个switch/case例子,创建如下页面:</p> <p><span class="img-wrap"><img data-src="http://upload-images.jianshu.io/upload_images/68937-4e09f9047e3e128b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Paste_Image.png" title="Paste_Image.png" style="cursor: pointer;"></span><br />HTML:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;UTF-8&quot;> <title>JavaScript中的this妙用</title> <script type=&quot;text/javascript&quot; src=&quot;js/script.js&quot;></script> </head> <body> </p> <h2>闲置二手图书</h2> <form action=&quot;#&quot;> <input type=&quot;button&quot; id=&quot;Java&quot; value=&quot;Java&quot; /> <input type=&quot;button&quot; id=&quot;JavaScript&quot; value=&quot;JavaScript&quot; /> <input type=&quot;button&quot; id=&quot;MySQL&quot; value=&quot;MySQL&quot; /> <input type=&quot;button&quot; id=&quot;Html&quot; value=&quot;HTML5&quot; /> </form> <p> </body> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>JavaScript中的this妙用<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/script.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>闲置二手图书<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"#"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"Java"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Java"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"JavaScript"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"JavaScript"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"MySQL"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"MySQL"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"Html"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"HTML5"</span> /&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>JS:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="window.onload = initAll; function initAll(){ document.getElementById(&quot;Java&quot;).onclick = viewDetail; document.getElementById(&quot;JavaScript&quot;).onclick = viewDetail; document.getElementById(&quot;MySQL&quot;).onclick = viewDetail; document.getElementById(&quot;Html&quot;).onclick = viewDetail; } function viewDetail(){ console.log(&quot;this.id=&quot;+this.id); switch(this.id){ case &quot;Java&quot; : alert(&quot;《Java程序员基本功》这本书是李刚写的,在我的商店售价30元!&quot;); break; case &quot;JavaScript&quot; : alert(&quot;《JavaScript语言精粹》这本书是Yahoo的一位工程师写的,在我的商店售价15元!&quot;); break; case &quot;MySQL&quot; : alert(&quot;《MySQL入门很简单》这本书附带关盘,这个年代其实没什么卵用了,它在我的商店售价28元!&quot;); break; case &quot;Html&quot; : alert(&quot;《HTML5秘籍》这本书是图灵系统的图书,非常值得拥有,它在我的商店售价25元,卖的非常好!&quot;); break; default : alert(&quot;没有这本书&quot;); } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-built_in">window</span>.onload = initAll; <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">initAll</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"Java"</span>).onclick = viewDetail; <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"JavaScript"</span>).onclick = viewDetail; <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"MySQL"</span>).onclick = viewDetail; <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"Html"</span>).onclick = viewDetail; } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">viewDetail</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"this.id="</span>+<span class="hljs-keyword">this</span>.id); <span class="hljs-keyword">switch</span>(<span class="hljs-keyword">this</span>.id){ <span class="hljs-keyword">case</span> <span class="hljs-string">"Java"</span> : alert(<span class="hljs-string">"《Java程序员基本功》这本书是李刚写的,在我的商店售价30元!"</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> <span class="hljs-string">"JavaScript"</span> : alert(<span class="hljs-string">"《JavaScript语言精粹》这本书是Yahoo的一位工程师写的,在我的商店售价15元!"</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> <span class="hljs-string">"MySQL"</span> : alert(<span class="hljs-string">"《MySQL入门很简单》这本书附带关盘,这个年代其实没什么卵用了,它在我的商店售价28元!"</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> <span class="hljs-string">"Html"</span> : alert(<span class="hljs-string">"《HTML5秘籍》这本书是图灵系统的图书,非常值得拥有,它在我的商店售价25元,卖的非常好!"</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">default</span> : alert(<span class="hljs-string">"没有这本书"</span>); } }</code></pre> <p><a href="http://sandbox.runjs.cn/show/wflrmken" rel="nofollow noreferrer" target="_blank">在线演示</a><br />直接用this.id作为switch的参数也是可以的。</p> <p></code></p>
脚本宝典为你提供优质服务
脚本宝典 » JavaScript中的this妙用

发表评论

提供最优质的资源集合

立即查看 了解详情