Javascript 从方法中引用类

我正在编写一个脚本，该脚本应该能够在我的网页顶栏的多个预定义div中动态加载内容

在Topbar对象中，Ribbon是一个对象，它包含用于操作Topbar中的一个div的函数，其中一些div（目前所有div）是从容器继承的，Ribbon是容器的一个实例

函数

MPP\u Topbar.Ribbon.clear（）

和

MPP\u Topbar.Ribbon.load（'default.xml'）

按预期工作。但是，回调函数

MPP\u Topbar.Ribbon.insert（）

，在xmlhttprequest完成后从

ajaxGet（）

函数调用，却没有完成它应该做的事情。不知何故，

insert

类方法中的

这个
突然指向
窗口
，而不是它的父对象
功能区

我是否可以在
insert
方法中引用
Ribbon


顶栏脚本：

MPP_Topbar = {};

MPP_Topbar.Container = function(){};

MPP_Topbar.Container.prototype.clear = function(){
    var element = this.element;
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
};

MPP_Topbar.Container.prototype.load = function(page){
    this.clear();
    ajaxGet(page, this.insert);
    console.log('loading');
};

MPP_Topbar.Container.prototype.insert = function(content){
    console.log(this);
    this.element.innerHTML = content;
    console.log('inserted');
};

MPP_Topbar.Ribbon = new MPP_Topbar.Container;

MPP_Topbar.Ribbon.element = document.getElementById('THERIBBON');

function ajaxGet(file, callback, postdata, async){
    async = ((async == true || async === undefined) ? true : false);
    var xmlhttp;
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(async){
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                callback(xmlhttp.responseText);
            }
        }
    }
    if(postdata){
        xmlhttp.open("POST", file, async);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    }else{xmlhttp.open("GET", file, async);}
    xmlhttp.send();
}


用于AJAX请求的函数：

MPP_Topbar = {};

MPP_Topbar.Container = function(){};

MPP_Topbar.Container.prototype.clear = function(){
    var element = this.element;
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
};

MPP_Topbar.Container.prototype.load = function(page){
    this.clear();
    ajaxGet(page, this.insert);
    console.log('loading');
};

MPP_Topbar.Container.prototype.insert = function(content){
    console.log(this);
    this.element.innerHTML = content;
    console.log('inserted');
};

MPP_Topbar.Ribbon = new MPP_Topbar.Container;

MPP_Topbar.Ribbon.element = document.getElementById('THERIBBON');

function ajaxGet(file, callback, postdata, async){
    async = ((async == true || async === undefined) ? true : false);
    var xmlhttp;
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(async){
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                callback(xmlhttp.responseText);
            }
        }
    }
    if(postdata){
        xmlhttp.open("POST", file, async);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    }else{xmlhttp.open("GET", file, async);}
    xmlhttp.send();
}

您需要创建“插入”函数的绑定版本：

ajaxGet(page, this.insert.bind(this));

在没有该步骤的情况下，将调用“insert”函数，以便
此
引用全局（
窗口
）对象。
this
的值与函数的声明方式或位置无关，而与函数的调用方式有关。
.bind（）
方法返回一个函数，该函数显式地将
this
绑定到调用所需函数时作为参数传递的对象。
这就是我一直在寻找的答案！我已经看到了许多解决方案，但这些解决方案非常简单。非常感谢@注意，
.bind（）
在旧（IE）浏览器上不可用，但是。