Question

我一直试图弄清楚这一点，我迷路了，任何人？

<script src="https://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>

<div id="app"></div>

<script type="text/javascript">
window.addEventListener('load', function() {
  var webview = Vue.component("ro-weview", {
    props: ["src"],
    template: '<input type="text"  class="form-control" style="border-color: #ccc;outline: none; box-shadow: none !important; " :value="src"/><iframe :src="src"/></div>'
  })

  var myApp = new Vue({
    el: "#app",
    template: '<div id="app"><ro-weview :src="src"></ro-weview></div>',
    data: function() {
      return {
        src: 'http://www.google.com'
      }
    },
    methods: {
      setSrc: function(src) {
        this.src = src
      }
    },
    components: {
      'RoWebview': webview
    }
  })

    myApp.setSrc('http://www.bing.com')
})
</script>

提前致谢。

Answer 1

要解决此问题，您必须创建closure（请参阅下面的代码段）

for (var i = 0; i < 10; i++) {
  var Img = new Image();
  Img.onload = (function(i) {

    return function(index) {
      //correct loop index hurrahh
      console.log(i);

      //now i need 'this' as in the original Img, but when wrapped it becomes window
      console.log(this);

    }
  })(i);
  Img.src = "http://www.w3schools.com/html/w3schools.jpg";
}

Answer 2

Img.onload=function(){
 alert(this);
};

您的代码包含一个iife，但代码应返回一个函数，但它不返回任何内容。

Img.onload=(function(){})();
//is parsed to
Img.onload=

这就是为什么它不起作用。现在iife执行而不是Img加载。如果你想要i：

，你需要返回一个函数，或者创建一个不同的函数

(function(i){
//were now in a closure with bound i
Img.onload=function(){
alert(i);
alert(this);//both work
};
})(i);

Answer 3

设置正确的上下文使用bind函数。

    (function(index) {
        //correct loop index hurrahh
        console.log(index);

        //now i need 'this' as in the original Img, but when wrapped it becomes window
        console.log(this);

    }.bind(Img))(i);

似乎console.log(i);应为console.log(index);，因为您的IIFE为i创建了关闭。

Answer 4

试试这个：

for(var i=0; i<10; i++)
{
    var Img = new Image();
    Img.onload = (function(index) {
        return function() {
            console.log(index)
            console.log(this.tagName)
        }
    })(i).bind(Img);
    Img.src = "img.png";
}

在包装和传递循环索引之后，从img.onload中访问img

4 个答案: