如何在回调中调用对象的键？答案

【问题标题】：How to call key of object inside of callback?如何在回调中调用对象的键？
【发布时间】：2012-04-18 04:59:55
【问题描述】：

如何在obj的handler函数中获取变量？不引用 MyClass 中的 obj。

    var obj = {
        func: function(){
            var myClass = new MyClass();
            myClass.handler = this.handler;
            myClass.play();        
        },

        handler: function(){
            //Here i don't have access to obj
            console.log(this); //MyClass
            console.log(this.variable); //undefined
        },

        variable:true
    };

    function MyClass(){
        this.play = function(){
            this.handler();
        };

        this.handler = function(){};
    };

    obj.func();

如果您使用 Base.js 或其他类似的 oop 方式，那就是构建需要您。

_.bindAll(obj)（下划线方法）也不适合。它是 Base.js 中的中断覆盖。

【问题讨论】：

标签： javascript oop closures

【解决方案1】：

您无权访问 obj，因为 this 绑定到 MyClass 构造函数的实例 - myClass。如果在 handler 你想通过 this 访问 myClass 并访问 obj 你必须使用 obj 直接命名为：

console.log(this); // myClass
console.log(obj.variable); // true

如果您想让 this 绑定到 obj，请使用 Juan Mellado 或 gryzzly 建议的内容。

【讨论】：

【解决方案2】：

在作用域 var 中声明的 obj 中使用 this 函数调用来解决它。

var obj = {
    func: function(){
        var self = this;
        var myClass = new MyClass();
        myClass.handler = function() { return this.handler.call(self); };
        myClass.play();        
    },

    handler: function(){
        //Here i don't have access to obj
        console.log(this); //MyClass
        console.log(this.variable); //undefined
    },

    variable:true
};

【讨论】：

【解决方案3】：

仅绑定处理程序方法：http://jsfiddle.net/uZN3e/1/

var obj = {
    variable:true,

    func: function(){
        var myClass = new MyClass();
        // notice Function.bind call here
        // you can use _.bind instead to make it compatible with legacy browsers
        myClass.handler = this.handler.bind(this);
        myClass.play();        
    },

    handler: function(){
        console.log(this.variable);
    }
};

function MyClass(){
    this.play = function(){
        this.handler();
    };

    this.handler = function(){};
};

obj.func();

【讨论】：

【解决方案4】：

使用变量来引用原始上下文：

...
var self = this;
myClass.handler = function(){ self.handler(); };
...

【讨论】：

嗯，我不这么认为。您建议在 func 函数中定义 handler。但是如果 func 会有很多监听器，而且这些监听器会很大，你会得到非常大的函数。我认为这是一种糟糕的编程风格。
事实上，Function.bind 使用的是同一种东西，而且对性能也很不利。您需要以不需要像这样的绑定的方式来构造您的代码。 gist.github.com/2301514 – 您确实为每个绑定函数创建了一个闭包（一个函数），并且确实将上下文对象放在了该闭包中。所以这个答案也是有效的，对开发人员来说更明显，实际上可能更好（取决于你的需要）
你是对的，关于性能。但是如何处理“但是如果 func 会有很多听众，而且这些听众会很大，你会得到很大的函数”？你觉得大函数没问题？
我不确定你的意思，我很高兴看到这些“许多听众”和一个非常大的功能的示例以及为什么会发生这种情况。

【解决方案5】：

在handler之前声明variable：

var obj = {
    variable: true, 

    func: function(){
        // ...       
    },

    handler: function(){
        console.log(this.variable); //true
    }
};

【讨论】：