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 相关文章推荐
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[02:27]刀塔重生降临
2015/10/14 DOTA
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
详解python metaclass(元类)
2020/08/13 Python
Python 高效编程技巧分享
2020/09/10 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
《和我们一样享受春天》教学反思
2014/02/07 职场文书
2014年转正工作总结
2014/11/08 职场文书
廉政承诺书范文
2015/04/28 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
R9700摩机记
2022/04/05 无线电
Golang连接并操作MySQL
2022/04/14 MySQL
使用CSS实现音波加载效果
2023/05/07 HTML / CSS