JavaScript中的this妙用实例分析
本文实例讲述了JavaScript中的this妙用。分享给大家供大家参考，具体如下：
JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数。
我们先来看如下一个网页，在用户单击链接之后，弹出一个alert框，然后再转到href属性所指的网页
HTML：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>JavaScript中的this妙用</title> <script type='text/javascript' src='https://www.haobala.com/bcjs/js/script.js'></script></head><body> <p style='text-algin:center;'> 你好，点击这里去<a href='http://www.mybry.com/obj/store/list.html' rel='external nofollow' >旧物商店</a> </p></body></html>
JS：
window.onload = initAll;function initAll(){ document.getElementById('redirect').onclick = initRedirect;}function initRedirect(){ alert('这是我创建的旧物商城，欢迎访问！'); window.location = this; return false;}
你可能会主要到，代码中并没有引用特定的网页——这是this关键字的作用之一。this替我们完成的工作之一是从HTML链接获得URL（也就是a标签的href属性）。由于采用这种方式，如果以后脚本改为指向其他的页面而不是旧物商店页面，就不必修改JS。实际上，可以让WEB站点上的所有链接都调用这个相同的JS代码，这一行代码都会自动获得相应的href值。
这样写还有一个好处：如果用户的浏览器不理解JavaScript（比如禁用了JS）,那么它只会加载HTML页面，而不显示alert提示，当他们点击链接时，会像一般情况下那样加载页面，不会发生错误，没有任何问题。我们在来看一个switch/case例子，创建如下页面：
HTML：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>JavaScript中的this妙用</title> <script type='text/javascript' src='https://www.haobala.com/bcjs/js/script.js'></script></head><body> <h2>闲置二手图书</h2> <form action='#'> <input type='button' value='Java' /> <input type='button' value='JavaScript' /> <input type='button' value='MySQL' /> <input type='button' value='HTML5' /> </form></body></html>
JS:
window.onload = initAll;function initAll(){ document.getElementById('Java').onclick = viewDetail; document.getElementById('JavaScript').onclick = viewDetail; document.getElementById('MySQL').onclick = viewDetail; document.getElementById('Html').onclick = viewDetail;}function viewDetail(){ console.log('this.id='+this.id); switch(this.id){ case 'Java' : alert('《Java程序员基本功》这本书是李刚写的，在我的商店售价30元！'); break; case 'JavaScript' : alert('《JavaScript语言精粹》这本书是Yahoo的一位工程师写的，在我的商店售价15元！'); break; case 'MySQL' : alert('《MySQL入门很简单》这本书附带关盘，这个年代其实没什么卵用了，它在我的商店售价28元！'); break; case 'Html' : alert('《HTML5秘籍》这本书是图灵系统的图书，非常值得拥有，它在我的商店售价25元，卖的非常好！'); break; default : alert('没有这本书'); }}
直接用this.id作为switch的参数也是可以的。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章：
1. Spring @Primary和@Qualifier注解原理解析2. SpringBoot+SpringCache实现两级缓存(Redis+Caffeine)3. 详解springBoot启动时找不到或无法加载主类解决办法4. 详解php如何合并身份证正反面图片为一张图片5. Java基于redis和mysql实现简单的秒杀(附demo)6. 专家预言：PHP将比Java更好更受欢迎7. java使用FFmpeg合成视频和音频并获取视频中的音频等操作(实例代码详解)8. php设计模式之模板模式实例分析【星际争霸游戏案例】9. ASP.NET MVC视图页使用jQuery传递异步数据的几种方式详解10. AJAX实现省市县三级联动效果
网公网安备