资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何使用JavaScript中的this

这篇文章主要讲解了如何使用JavaScript中的this,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

成都创新互联公司专注于休宁县企业网站建设,响应式网站,商城系统网站开发。休宁县网站建设公司,为休宁县等地区提供建站服务。全流程按需设计网站,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务

JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数。

我们先来看如下一个网页,在用户单击链接之后,弹出一个alert框,然后再转到href属性所指的网页

HTML:




  
  JavaScript中的this妙用
  


  

你好,点击这里去旧物商店

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:




  
  JavaScript中的this妙用
  


  

闲置二手图书

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的参数也是可以的。

看完上述内容,是不是对如何使用JavaScript中的this有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。


本文名称:如何使用JavaScript中的this
分享地址:http://cdkjz.cn/article/pspcoj.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220