Question

我正在制作一个脚本，该脚本应该能够在我网页顶部的多个预定义DIV中动态加载内容。

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

函数MPP_Topbar.Ribbon.clear()和MPP_Topbar.Ribbon.load('default.xml')按预期工作。但是，一旦xmlhttprequest完成，就从MPP_Topbar.Ribbon.insert()函数调用的回调函数ajaxGet()不会执行它应该执行的操作。不知何故，this类方法中的insert突然指向window而不是其父对象Ribbon。

我有什么方法可以在Ribbon方法中引用insert吗？

Topbar脚本：

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');

用于AJAX请求的函数：

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();
}

Answer 1

您需要创建“插入”功能的绑定版本：

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

如果没有该步骤，将调用“insert”函数，使this引用全局（window）对象。 this的值与声明函数的方式或位置无关，而与函数如何调用的关系如何。 .bind()方法返回一个函数，该函数在调用所需函数时显式安排this绑定到作为参数传递的对象。

从方法内引用类

1 个答案: