JavaScript函数调用方式

最新推荐文章于 2023-05-25 14:04:52 发布

ligengdipan

最新推荐文章于 2023-05-25 14:04:52 发布

阅读量483

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript button jquery function input

本文链接：https://blog.youkuaiyun.com/ligengdipan/article/details/7803386

前端专栏收录该内容

24 篇文章

订阅专栏

本文详细解析了JavaScript函数调用规则，特别是事件处理中的this指向问题，并通过实例展示了不同调用方式对结果的影响。同时，还介绍了如何利用jQuery等库简化this的指向，确保事件处理函数正确引用当前事件源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript函数调用规则

在一个使用方法调用语法,像 obj.myFunction()或者 obj['myFunction'](),这时this的值为obj

这是事件处理代码中bug的主要源头,看看这些例子

  <input type=
  "button" 
  value=
  "Button 1" 
  id=
  "btn1"  
  />
 

  <input type=
  "button" 
  value=
  "Button 2" 
  id=
  "btn2"  
  />
 

  <input type=
  "button" 
  value=
  "Button 3" 
  id=
  "btn3"  
  onclick=
  "buttonClicked();"
  />
 

  <script type=
  "text/javascript"
  >
 

  function 
  buttonClicked(){
 

       
  var 
  text = (
  this 
  === window) ? 
  'window' 
  : 
  this
  .id;
 

       
  alert( text );
 

  }
 

  var 
  button1 = document.getElementById(
  'btn1'
  );
 

  var 
  button2 = document.getElementById(
  'btn2'
  );
 

  button1.onclick = buttonClicked;
 

  button2.onclick = 
  function
  (){   buttonClicked();   };
 

  </script>
 

   
 

点击第一个按钮将会显示”btn”因为它是一个方法调用,this为所属的对象(按钮元素) 点击第二个按钮将显示”window”因为 buttonClicked是被直接调用的(不像 obj.buttonClicked().) 这和我们第三个按钮,将事件处理函数直接放在标签里是一样的.所以点击第三个按钮的结果是和第二个一样的.
使用像jQuery的JS库有这样的优点,当在jQuery里定义了一个事件处理函数,JS库会帮助重写this的值以保证它包含了当前事件源元素的引用,

//使用jQuery
$('#btn1').click( function() {
alert( this.id ); // jQuery ensures 'this' will be the button
});