javascript绑定对象的原型函数答案

【问题标题】：javascript binding object's prototype functionjavascript绑定对象的原型函数
【发布时间】：2011-10-17 05:59:22
【问题描述】：

如何将对象原型中的 this 指针绑定到对象的实例？

function Foo(){ }
Foo.prototype.f1 = function(){this.f2();} //is wrong because 'this' does not refer to Foo instance
Foo.prototype.f2 = function(){}

这真的很烦人。任何人都可以帮忙吗？我尝试在 Foo 的构造函数中执行 _.bindAll(this,'f1','f2') 但没有运气。

【问题讨论】：

标签： javascript object underscore.js prototype-programming

【解决方案1】：

您在评论中提到您将f1 设置为事件处理程序：

canvas.addListner('mousedown',this.f1, false)

相反，您可以传递一个闭包：

var self = this;
canvas.addListner('mousedown',function() {
    self.f1();
}, false);

或使用 Underscore.js 库的 bind 方法：

canvas.addListner('mousedown', _.bind(this.f1, this), false);

【讨论】：

【解决方案2】：

如果您使用var foo = new Foo();，您的代码将正常工作。然后，只需使用foo.f1();。 foo 在f1 中将是this。

原因是当您对构造函数使用new 时，_proto 链接将附加到将成为新实例的对象。这个_proto_ 链接指向构造函数的原型。在运行时，如果实例上不直接存在被访问的实例的属性/方法，解释器会按照_proto_，尝试访问那里的属性/方法。

如果你想调用一个带有显式对象this的函数，你可以使用myFunc.call(myObjThatWillBeThis)。

【讨论】：

问题是，对不起，我不清楚，想象 f1 是一个调用 f2 的 onMouseDown 函数，其中 onMouseDown 是通过 canvas.addListner('mousedown',this. f1,false) 在 Foo 的构造函数中

【解决方案3】：

您的代码应更改为：

function Foo() {
  this.f1 = function() {
    this.f2();
  }
  this.f2 = function() {
  }
}

【讨论】：

这就是我最终做的，但这很丑陋。我宁愿“分离”出界面

【解决方案4】：

试试这个：

    var Foo = function() {};
    Foo.prototype.f1 = function() {this.f2();};
    Foo.prototype.f2 = function() {};
    var foo = new Foo();
    var proxyFn = function(fooInstance) {
        fooInstance.f1();
    };
    canvas.addListener('mousedown', proxyFn(foo), false);

或者更通用的东西：

    var bindFunction = function(fnToBind, scopeObj) {
        return function() {  // closure scope will contain bindFunction args
            fnToBind.call(scopeObj);
        };
    };
    var Foo = function() {};
    Foo.prototype.f1 = function() {this.f2();};
    Foo.prototype.f2 = function() {};
    var foo = new Foo();
    var proxyFn = bindFunction(Foo.prototype.f1, foo);
    canvas.addListener('mousedown', proxyFn, false);

【讨论】：

【解决方案5】：

这行得通：

function Foo() {
    this.f1 = this.f1.bind(this);
    this.f2 = this.f2.bind(this);
}

Foo.prototype.f1 = function () { this.f2(); };
Foo.prototype.f2 = function () { console.log("f2"); };

var foo = new Foo();
var f = foo.f1;
f();

http://jsfiddle.net/VYdNx/3/

这样：

function Foo() {
    _.bindAll(this);
}

Foo.prototype.f1 = function () { this.f2(); };
Foo.prototype.f2 = function () { console.log("f2"); };

var foo = new Foo();
var f = foo.f1;
f();

http://jsfiddle.net/VYdNx/2/

【讨论】：