HTML5: 事件处理函数的this指向问题

电视资讯 浏览(1344)
mg电子游戏

  菇凉说互联网昨天我要分享

  HTML5: 事件处理函数的this指向问题

  image.php?url=0Msg1RhRUw

  区分普通函数与事件处理函数

  普通函数是直接调用的。不存在 this 指向问题,谁调用的,this 指向就是谁。

  普通函数没有事件对象 event

  事件处理函数其实也是一个函数,只是他绑定在某个事件上。

  事件处理函数的 this 默认指向 undefined

  解决this指向问题的4种办法

  直接在事件绑定的地方加上 .bind(this)

  点我

  使用箭头函数

  

  onClick={event=> {

  this.handleClick(event);

  }}

  点我

  

  在构造函数中统一进行this指向的绑定

  constructor {

  super;

  this.handleClick=this.handleClick.bind(this);

  }

  render {

  return (

  点我

  )

  }

  使用实验性质的public class fileds 语法。要去使用的话,的需要babel插件的支持.

  安装