导入模板的加载在“this”中没有对象实例 - 它在哪里

Question

我尝试了html5导入和JS来创建某种mvc，现在我遇到了问题。

当我导入模板并将其元素附加到我的 DOM 并注册一个事件时，它被触发并且一切都很好。但是，this实例包含导入模板，而不是绑定方法的属性函数的对象。 :)

该问题的重要行 - 了解过程 - 附近有评论....

我的

问题是：如何将该方法的父对象定位到我的self变量？

我有一些控制器父对象：

var controller = function(){
};
controller.prototype.import = function(filepath, callback){
    var link = document.createElement('link');
    link.rel = 'import';
    link.href = filepath;
//important line follows
    link.onload = callback;
    link.setAttribute("async", '');
    document.head.appendChild(link);
    return link.import;
};
controller.prototype.display = function(content, selector, target){
    var new_element = content.querySelector(selector);
     document.querySelector(target).appendChild(new_element.cloneNode(true));
};

还有一些xyz控制器扩展控制器（这是问题所在）：

var xyz_controller = function(){
    //behold ... here the callback is defined    
    this.import('/templates/navigation.html', this.init_navigation);
};
xyz_controller.extends(controller);
xyz_controller.prototype.init_navigation = function(){
    //if I console.log(this) it holds the imported template and not xyz_controller??
    var self = this;
    $('#goto-settings').on('click', function(e){
        e.preventDefault();
        // calls some method I removed for the example, but here was a problem - I sadly cannot call that function 
        self.settings("param");
        return false;
    });
};

导航将 dom 元素通过它自己像这样将父文档放到父文档中（这是最后在模板文件中）：

<script>
    xyz.display(document.currentScript.ownerDocument,'#main-navigation', '#Header');
</script>

还有一些main.JS，它对jquery做了一些事情，所以：

//to inherit all methods from an object
Function.prototype.extends = function(object){
    for(var property in object.prototype){
        this.prototype[property] = object.prototype[property];
    }
};
var xyz;
$( document ).ready(function(){
    xyz = new xyz_controller();
});

Answer 1

在这一行中：

link.onload = callback;

分配函数引用。函数引用通常不会强加调用函数时this。这仅在调用函数时确定。

当调用一个函数时，this的值对应于你调用该函数的对象（我过于简化，请参阅MDN上的this）。在这种情况下，调用回调函数的是（导入文档的）DOM，因此该文档确定this的值。

即使你会像这样更直接地分配它，它仍然不会使用你的对象来this：

link.onload = this.init_navigation;

为了避免这种情况，请将回调函数显式绑定到 this ;这将推翻上述行为：

link.onload = callback.bind(this);

你可能会发现"'this'关键字是如何工作的？"一个有趣的读物。

这里有一个片段说明了this关键字的行为方式如何不同，具体取决于您是否使用bind：

var msg = 'I am a window variable<br>';
var test = {
     msg: 'I am a test variable<br>',
     whenLoad: function () {
         document.body.innerHTML += this.msg;
     },
};
window.addEventListener("load",  test.whenLoad); // *this* will be window
window.addEventListener("load",  test.whenLoad.bind(test)); // *this* will be test