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 

  };  

};

如何将父自动传递给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()，并且您似乎喜欢一些不会造成伤害的额外分号，但不需要在那里。< / p>

Answer 2

你可以在一个闭包中捕获它：

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 3

使用bind方法。

test.prototype.find = function(){
    arrayLoop(this.foo, method.bind(this));
}

test.prototype.method = function(i){
    alert(this.bar[i]);
};

您可以找到代码无效的解释here

Answer 4

Bind对象的功能：

test.prototype.find = function(){

  arrayLoop(this.foo, function(i){

     alert(this.bar[i])     //error- there is no this.bar 

  }.bind(this));  

};

使用普通的js no jquery将“this”父上下文传递给函数

4 个答案: