将' this '的继承扩展到' object '的方法/属性
Extending inheritance of `this` to methods / properties of an `object`
我不确定我是否正确地表达了问题标题;请考虑以下事项以澄清…
(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();
};
我如何在foo
的方法/道具中访问this
,但this
指的是初始的object
即e
而不是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. e
赋值给e.foo._this
的递归引用
和
2. 将e
分配给e.foo._this
的冗余性,如果this
可以作为e
而不是foo
访问,它将使"事物"更具性能,特别是关于像鼠标移动事件这样的事情。
jsFiddle这里
同时,我试图避免这样的事情…
document.onmousemove = function(e) {
e.foo.bar.call(e);
};
感谢您的宝贵时间。
只要稍微改变一下,就可以让事情变得更简单:
(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();
};
然而,这是对共享对象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
属性是本地化到该实例的;原型方法将在所有实例中共享,所以从优化的角度来看,这并不是太糟糕。
也许这对你有用:
使用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)
);
};
小提琴
也许将函数绑定到它的对象会更简单:
someElement.onEvent = myObject.myHandlerFunction.bind(myObject);
所以当这个函数被调用时,它的this将是myObject。
相关文章:
- 序列化数据属性中对象的最可靠方法
- 如何从对象的原型方法访问JavaScript对象属性
- 设置嵌套对象属性的更好方法
- JQuery示例不起作用-“;对象没有't支持属性或方法'按钮'&”;
- 对象不支持属性或方法“自动完成”
- 为什么我可以在Array属性对象中找到Javascript Array for Each方法
- Es6:能够在设置/更新/删除对象属性时调用自定义方法
- 区分具有相同名称的属性和方法
- sails.js beforeCreate方法只接收required设置为true的模型属性
- SCRIPT438:对象没有't支持属性或方法'endsWith'在IE10中
- 有什么方法可以将类型指定为 self?或解决方法“属性类型不兼容”
- 打字稿 - 为什么猫鼬中不存在“方法”属性
- 从JavaScript中的另一个方法属性中引用对象方法属性
- Javascript:通过在数组上循环来创建对象方法/属性
- 冲突/方法/属性Javascript错误
- 将' this '的继承扩展到' object '的方法/属性
- Javascript继承静态和实例方法/属性
- 我可以为对象设置正则表达式吗's方法/属性选择器
- 发现HTML对象标记方法/属性
- 为什么我的主干模型奇怪地嵌套在集合中,需要钻取才能访问方法/属性?