如何避免“this”引用DOM元素，并引用对象

Question

我有一个无法解决的问题。

上下文是：我想有一个继承链，属于这个继承的对象的方法必须是事件处理程序，同时能够到达对象的属性。

我正在尝试编写不带“新”字的 JavaScript，而是使用带有一些继承层次结构的 Object.create()。所以首先采用这种方法。

所以我为我的其余对象（myProto）制定了蓝图，然后我使用 Object.create 创建对象（这样就没有闭包，我可以将this 分配给that 或self)。现在，当我使用该对象的方法来处理例如 div 上的单击事件时，this 显然将引用 DOM 对象，并且我失去了访问对象属性的可能性。

var myProto = {
    init: function (name, value) {
        this.name = name;
        this.value = value;

        return this;
    },
    someHandler: function (e) {
        // Normally I would use this instead of e.target...

        e.target.innerHTML = this.name + this.value; // This does not refer to the object.
    }
};

var myObject = Object.create(myProto).init('myName', 'myValue');
document.getElementById('myDiv').onclick = myObject.someHandler;

这里是小提琴：http://jsfiddle.net/pgPHM/

现在是“经典”方法：如果我使用新的 Constructor 形式，在闭包中分配 this 然后访问它会很容易，但是 Constructor.prototype 中的函数存在问题

var Constructor = function (name, value) {
    var self = this;

    self.name = name;
    self.value = value;
};

Constructor.prototype.someHandler = function () {/*self does not reach this here*/};

jsfiddle：http://jsfiddle.net/ZcG3J/2/

我真的不明白为什么 JS 对象没有真正的 this 或 self 或者没有这些棘手的上下文、闭包等来引用自己的东西......

基本上问题是：

如何使用对象的方法作为事件处理程序，并且仍然能够访问该对象？

Answer 1

除了使用new时，Javascript中的this是根据函数的调用方式设置的。以正确的方式称呼它，this 将是您想要的。我无法真正说出您要在问题中解决什么问题，但这是确定this 的方式。

1. 调用obj.method() - this 将设置为obj 内method()。
2. 使用function.call() 或function.apply() 来控制this 将成为您自己。
3. 根据您是否处于严格模式，进行普通函数调用，例如 func() 和 this 将设置为全局对象或 undefined。
4. 使用.bind()（在现代浏览器中）创建一个函数存根，它将在内部自动使用.apply() 将其值“绑定”到函数的执行。
5. 当您使用new 调用构造函数时，this 将被设置为构造函数内新创建的对象。
6. 当您将回调函数作为参数传递给任何函数调用时（例如addEventListener()，调用函数有责任决定它希望将this 指针设置为什么以及不绑定到什么您自己的对象。addEventListener() 将 this 设置为导致事件的 DOM 对象。

对于您希望成为特定对象上的方法调用的事件处理程序，您必须创建一种将方法调用与对象关联的方法。您可以使用上面指定的.bind()，也可以使用可以在闭包中引用保存的this 值的匿名函数。

var self = this;
document.addEventListener('keyup', function(e) {
    self.handleKeys(e);
})

或者，使用.bind()：

document.addEventListener('keyup', this.handleKeys.bind(this));

仅供参考，这两种方法之间没有任何真正的功能差异，因为.bind() 只是创建了一个闭包并执行第一个示例的操作，但它会为您完成。

Answer 2

您的 jsfiddle 中的第一个问题是 self 是 Constructor 的局部变量，它在函数之外不可用。您对以下代码的看法：

var Constructor = function(name, value) {
    var self = this;
    self.name = name;
    self.value = value;
    self.someHandler = function(e) {
        e.target.innerHTML = self.name + self.value; // self undefined    
    }
    return self;
};

var myObject = Constructor('myName', 'myValue');
document.getElementById('myDiv').onclick = myObject.someHandler;

JsFiddle -> http://jsfiddle.net/ZcG3J/4/

它的结构是你想要的吗？

Answer 3

简单。如果函数作为方法而不是“裸”被调用，this 总是指最后一个点之前的单词。所以而不是：

document.getElementById('myDiv').onclick = myObject.someHandler;

// You're just passing the function here, not calling it.
// It will be called by the onclick handler so `this` is changed

这样做：

document.getElementById('myDiv').onclick = function(){
    myObject.someHandler();

    // Here, you're actually calling it. So this is the word
    // before the last dot. Which is myObject
}

---

在更现代的 javascript 中，您当然可以使用 bind:

document.getElementById('myDiv').onclick = myObject.someHandler.bind(myObject);