对象内部的Javascript原型方法答案

【问题标题】：Javascript prototype Methods inside object对象内部的Javascript原型方法
【发布时间】：2015-07-03 14:18:37
【问题描述】：

我正在尝试创建一个包含其他对象和功能的对象，在原型中，相关部分是 UI 原型；

var fChat = function() {
    this.debug = true;
};

fChat.prototype = {
    constructor: fChat,
    Log: function(str){
        if(this.debug){
            console.log(str);
        }
    },
    UI: {
        Login: {
            Show: function(){
                this.Log("UI.Login.Show()");
            }
        }           
    }
};

var fChatInstance = new fChat();
fChatInstance.UI.Login.Show();

当我打电话给fChatInstance.UI.Login.Show() 它给我一个错误： Uncaught TypeError: this.Log is not a function

是因为使用this 是在另一个范围内吗？通常我会在原型的开头使用var self = this;，但我不知道如何通过使用对象原型来做到这一点。

【问题讨论】：

this 是对象{ Show: function() { /*...*/ } }。您可以通过在Show 中调试并检查this 或在Show 中执行console.log(this); 来解决这个问题
这有点奇怪。所以每个fChat 都有自己的Log、UI 单例？似乎所有这些东西都应该抽象到他们自己的工作单元“类”中
@RGraham 这是我第一次使用原型和“类”，所以我可以用错误的方式来做。无论如何，我只初始化了一个 fChat 实例。
我同意@RGraham 的观点，最好将这个“类”分成多个类。例如，创建一个Login 类，然后在构造函数中传入一个Logger 类实例。现在fChat 类有multiple responsibilities。
结帐You Don't Know JS: this & Object Prototypes 了解有关此的一些有用信息。

标签： javascript object prototype

【解决方案1】：

是的。问题是 this 的 javascript 动态绑定，要修复它，您可以使用 bind 函数将“this”设置为对象。像这样改变 fchat 函数重构它：

var fChat = function() {
  this.debug = true;
  this.UI.Login.Show =  this.UI.Login.Show.bind(this);
  this.Log =  this.Log.bind(this);
};

【讨论】：