Javascript Vue js“；这"；被image.onload“覆盖；这"；

我有一个vue应用程序。我使用

this.data

访问它的数据变量和方法

在某种方法中，我必须使用img.onload来获得图像的宽度。但是现在有2个“this”，vue js方法和变量现在不起作用。我需要一个替代方案，这样两者都能起作用

vueMethod(url) {
 var img = new Image();
 img.onload = function() {
  this.size = {this.width,this.height}  //size is a vue variable
 }
 img.src = url;
}

---

将

var设置为该值在img函数中

这将为您的函数提供作用域，或者在您调用函数时绑定它，例如

vueMethod("url").bind(this)

在调用
img.onload
函数之前，可以将
this
分配给名为
vm
的变量，如下所示

vueMethod(url) {
  var img = new Image();
  let vm = this;
  img.onload = function() {
    vm.size = { this.width, this.height }  //size is a vue variable
  }
  img.src = url;
}

您应该将Vue实例保存到
img.onload
范围之外的变量中
尝试：

vueMethod(url) {
  var img = new Image();
  var vm = this;
  img.onload = function() {
      vm.size = {this.width,this.height}  //size is a vue variable
  }
  img.src = url;
}

所以，当你使用一个带有关键字<代码>函数< /代码>的函数时，它会创建一个新的范围来引用下面的例子
const obj = {
  size: 10,
  testFunc() {
   console.log(this, 'now obj')

   const func = function () {
     // this now refers to function its currently in
   }
   const otherFunc = () => console.log(this, 'refers to obj still')
  },
  testFunc2: () => {
    console.log(this, 'now window')
  }
}

如果有任何问题，请告诉我，我很乐意提供帮助


const obj={
尺寸：10，
vueMethod（url）{
log（this.size，'现在指的是obj'）
const img=新图像（）；
const self=这个；
img.onload=函数（）{
log（这个“现在指的是img”）
log（self.size，'但您可以将其重新分配给范围外的变量'）；
自身大小={
宽度：这个。宽度，
高度：这个高度
}
};
//模拟加载不包括这一点
img.onload（）；
img.src=url；
}
}
obj.vueMethod（）
您可以使用
箭头函数来保持工程范围：

vueMethod(url) {
  var img = new Image();
  img.onload = () => {
    this.size = {img.width, img.height}
  }
  img.src = url;
}

在本例中，
此
的引用与您在
var img
旁边使用的引用相同，因此使用函数会创建一个新的作用域。虽然技术上正确，但这不起作用，因为他需要两个作用域…我认为当作用域已经有一个
时使用箭头函数不是一个好的做法。这个
上下文中使用箭头函数会更有意义。大小不起作用？由于这是指图像，所以您认为它应该是，`vm.size={width:this.width，height:this.height}`谢谢！你为我节省了很多时间一点问题都没有，感谢即将到来的投票，很好的编码！