在JavaScript中调用函数时自定义它

时间:2012-09-08 14:28:08

标签: javascript this

以下是我到目前为止的内容:http://jsfiddle.net/nxCFn/

var il = new ImageLoader();

function ImageLoader() {
    this.n = 2;

    this.load = function() {
        //obviously, the this = the image and not the original instance of ImageLoader :(
        this.n++;
        console.log(this.n);
    }

    this.imgnam = "http://www.google.com/images/errors/logo_sm.gif";

    this.img = new Image();
    this.img.src = this.imgnam;
    this.img.onload = this.load;
}​

因为图片正在从.load()点到图像调用this load。我想将this从加载点变为它所属的ImageLoader实例。

3 个答案:

答案 0 :(得分:1)

this引用复制到局部变量,并使事件处理程序成为匿名函数,以便在函数的闭包中捕获局部变量:

var that = this;

this.img.onload = function() { that.load() };

答案 1 :(得分:1)

var that = this;
this.img.onload = function () { that.load();}

答案 2 :(得分:1)

使用Function.prototype.bind

this.img.onload = this.load.bind(this);

或者你可以在这里使用它,因为你为每个实例创建了一个新函数。

this.load = function() {
    this.n++;
    console.log(this.n);
}.bind(this);


this.img.onload = this.load;

要支持旧浏览器,您可以改为使用自己的活页夹功能。

function _binder(func, ctx /*, arg1, argn */) {
    var _slice = Array.prototype.slice,
        bound_args = _slice.call(arguments, 2);
    return function() {
        return func.apply(ctx, bound_args.concat(_slice.call(arguments)));
    }
}

然后这样做。

this.img.onload = _binder(this.load, this);