容易忽略的this - bug

1、 this 作为参数 或 this.val 作为参数的时候

初始化时:  var _scope = this; 

虽然在最开始初始化的时候, this === _scope, 所以效果一样。

但是当this 或 this.val 作为参数或间接参数被传入到函数中时,就会出现this值动态改变的问题,从而导致this.val 为undefiend的情况。

常常出现的情况:

 回调函数内的this,或者说实质上就是该函数被调用的父对象会改变。这时候该函数内的this值就会改变。

 

 

解决方法:

方法一:

()=>{} 箭头函数,  其实质是 从es6 的箭头函数转为 es5 的 语法时候, 箭头函数内的this,都是外部的_this。

JavaScript es6 和 es5 语法转化的网站:https://babeljs.io/

Cesium javascript this this产生的报错 javascript 语法

Cesium javascript this this产生的报错 javascript 语法

 

方法二:

同理,对于传递给函数的参数时,不能用 fun(this.val) ,

可以用  var a = this.val;  fun(a) 的形式。 或  var _scope = this, fun(_scope.val) 。

理由: this.val 会被整体作为参数传给函数,等价于函数内含有this 这个东西。 而一但在var a = this.val ,fun(a)的时候,a 就是之前初始化时this.val的地址(引用) ,之后this改变了,但a依旧时那个地址。

 

这次的bug:

Cesium javascript this this产生的报错 javascript 语法

因为Cesium javascript this this产生的报错 javascript 语法

cesium 中的requestAnimationFrame()中会调用到这个函数,从而出现 this.val值为undifined的报错。

 

 

 

相关文章:

  • 2021-08-29
  • 2022-12-23
  • 2022-12-23
  • 2021-10-01
  • 2021-05-21
  • 2021-06-06
  • 2021-10-15
猜你喜欢
  • 2021-12-15
相关资源
相似解决方案