JavaScript中的this妙用实例分析


Posted in Javascript onMay 09, 2020

本文实例讲述了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="js/script.js"></script>
</head>
<body>
  <p style="text-algin:center;">
    你好,点击这里去<a id="redirect" 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例子,创建如下页面:

JavaScript中的this妙用实例分析

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript中的this妙用</title>
  <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
  <h2>闲置二手图书</h2>
  <form action="#">
    <input type="button" id="Java" value="Java" />
    <input type="button" id="JavaScript" value="JavaScript" />
    <input type="button" id="MySQL" value="MySQL" />
    <input type="button" id="Html" 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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 事件的命名空间简单了解
Nov 22 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
JavaScript中继承原理与用法实例入门
May 09 #Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 #jQuery
JavaScript进阶(四)原型与原型链用法实例分析
May 09 #Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 #Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 #Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 #Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 #Javascript
You might like
PHP 模板高级篇总结
2006/12/21 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python中非常实用的一些功能和函数分享
2015/02/14 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
python实现代码审查自动回复消息
2021/02/01 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
函数指针的定义是什么
2016/08/14 面试题
军训自我鉴定100字
2014/02/13 职场文书
运动会开幕式主持词
2014/03/28 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js