传递"this"父上下文到使用普通 js no jquery 的功能

Question

我正在编写辅助函数来循环遍历所有数组元素-只是为了学习js。

下面是代码:

function arrayLoop(array, func){
    var ar = array.length,
        i=0;
    for ( i = 0; i < ar; i++ ){
        func(i);
    };
};

当我这样使用它时，它正在工作:

var foo = ['aa','bb','cc'];
arrayLoop(foo, function(i){
    alert(foo[i]);
});

但是当我尝试在对象内执行并且想要使用此上下文时-错误发生:

function test(){
   this.foo = ['aa','bb','cc'];
   this.bar = ['ff','gg','hh'];
}
test.prototype.find = function(){
  arrayLoop(this.foo, function(i){
     alert(this.bar[i])     //error- there is no this.bar 
  };  
};

如何传递父this自动到arrayLoop函数??

Answer 1

你可以改变arrayLoop来允许一个上下文参数:

function arrayLoop(array, ctx, func){
    ctx = ctx || window;
    var len = array.length, i = 0;
    for ( i = 0; i < len; i++ ) {
        func.call(ctx, i);
    }
}
test.prototype.find = function(){
  arrayLoop(this.foo, this, function(i) {
     alert(this.bar[i]);     // this will work
  });
}

这允许你传递回调所需的this值，当回调被调用时，它将为你设置，它将在所有浏览器中工作(.bind()在旧浏览器中不工作)。

仅供参考，您在find()函数中也缺少)，并且您似乎喜欢一些额外的分号，这些分号没有害处，但不需要在那里。

Answer 2

使用bind方法

test.prototype.find = function(){
    arrayLoop(this.foo, method.bind(this));
}
test.prototype.method = function(i){
    alert(this.bar[i]);
};

你可以在这里找到为什么你的代码不能工作的解释

Answer 3

您可以在闭包中捕获它:

test.prototype.find = function() {
    var self = this;
    arrayLoop(this.foo, function(i) {
        alert(self.bar[i]);
    });
};

或使用.bind()函数:

test.prototype.find = function() {
    arrayLoop(this.foo, function(i) {
        alert(this.bar[i]);
    }.bind(this));
};

Answer 4

将函数绑定到对象:

test.prototype.find = function(){
  arrayLoop(this.foo, function(i){
     alert(this.bar[i])     //error- there is no this.bar 
  }.bind(this));  
};