5

我不确定我是否正确地表述了问题标题；请考虑以下内容以澄清...

(function() {
    var foo = {
        bar: function() {
            // Is it possible to reference 'this' as the
            // initializing 'object' aka 'e' and not 'foo' ?
            // The easy part, currently because 'this' refers to 'foo',
            // is returning 'this' aka 'foo' so that chaining can occur
            return this;
        },
        other: function() {
            return this;
        }
    };
    Event.prototype.foo = foo; 
}());

// usage
document.onmousemove = function(e) {
    e.foo.bar().other();
};

我将如何this在方法/道具中访问foo但this引用初始的objectakae而不是foo？

我想出的最好的是这个

(function() {
    var foo = function() {
        var _foo = this.foo;
        _foo._this = this; //recursive reference that I am VERY worried about
        return _foo;
    };
    foo.bar = function() {
        var _this = this._this; //_this refers to initial 'object', 'e'
        return this; //return 'foo' aka 'this' for function chaining
    };
    foo.other = function() {
        var _this = this._this;
        return this;
    };
    Event.prototype.foo = foo; 
}());

// usage
document.onmousemove = function(e) {
    e.foo().bar().other();
};

我目前的工作，但我担心几件事...... 1.分配给

的递归引用 和 2.分配e给的冗余，如果可以访问，而不是它会使“事物”更具性能，尤其是对于诸如 mousemove 事件之类的事情。e.foo._this



ee.foo._thisthisefoo

jsFiddle在这里

另外，我试图避免这样的事情......

document.onmousemove = function(e) {
    e.foo.bar.call(e);
};

感谢您的所有建议，感谢您的宝贵时间。

4

3 回答 3

2

通过对您所拥有的内容进行细微的更改，您可以使事情变得更简单：

(function() {
    var foo = function() {
      this.foo.event = this;
      return this.foo;
    };
    foo.bar = function() {
      /// the event can be found in this.event
      return this;
    };
    foo.other = function() {
      /// the event can be found in this.event
      return this;
    };
    Event.prototype.foo = foo;
}());

// usage
document.onmousedown = function(e) {
    e.foo().bar().other();
};

然而，这正在对 shared object 进行更改foo，您可能希望重写一些东西以便e.foo()返回一个新的实例foo，并将您的其他方法移动到foo's原型。

(function() {
    var foo = function(event) {
      this.event = event;
    };
    foo.prototype.bar = function() {
      /// the event can be found in this.event
      return this;
    };
    foo.prototype.other = function() {
      /// the event can be found in this.event
      return this;
    };
    Event.prototype.foo = function() {
      return new foo(this);
    };
}());

这样您foo每次都创建一个新实例，但这意味着您添加的event属性已本地化到该实例；原型方法将在所有实例中共享，因此从优化的角度来看并不算太糟糕。

于 2013-06-18T10:33:18.437 回答
2

也许这对你有用：

使用apply方法更改被this调用方法中的上下文并使用this.foo来引用foo：

(function () {
    var foo = function () {
        console.log(this);
        return this.foo;
    };
    foo.bar = function () {
        console.log(this);
        return this.foo;
    };
    foo.other = function () {
        console.log(this);
        return this.foo;
    };
    Event.prototype.foo = foo;
}());

// usage
document.onclick = function (e) {
    console.log(
        e.foo.apply(e).bar.apply(e).other.apply(e)
    );
};

小提琴

于 2013-06-18T10:18:26.430 回答
0

也许将你的函数绑定到它的对象会更简单：

someElement.onEvent = myObject.myHandlerFunction.bind(myObject);

所以当这个函数被调用时，它的'this'将是myObject。

然后你可以利用 e.target 来访问元素。

于 2013-06-18T10:25:14.810 回答