OO javascript ...这似乎没有指向对象 [英] OO javascript... this doesn't appear to point to the object
问题描述
我正在尝试使用更加面向对象的方法在javascript中管理
窗口事件。因此，我正在创建一个控制器。对象
来处理事件并与服务器交互。但是，我显然没有完全明白这个是什么。是指。在下面的代码中，我是
期望当点击按钮（handleDeleteButtonClicked
函数）时，this将指向一个ViewController对象。
而不是Button（HtmlInputElement）。
有人可以帮我理解吗？
< html>
< head>
< script>
/ *构造函数* /
函数ViewController（）{
this.foo =" bar" ;;
}
/ * delete按钮处理程序* /
ViewController.prototype.handleDeleteButtonClicked = function（）{
window.alert（" delete clicked，this =" + this +" this。 foo =" +
this.foo）;
};
/ * initializer * /
ViewController.prototype.initialize = function（）{
document.getElementById（" delete-button"）。onclick =
this.handleDeleteButtonClicked;
};
< / script>
< / head>
< body onload =" javascript < b> ：new ViewController（）。initialize（）;">
< inp ut id =" delete-button"类型= QUOT按钮" value ="删除">
< / body>
< / html>
I''m trying to utilized a more object-oriented approach to managing
window events in javascript. Thus, I am creating a "controller" object
to handle events and interact with the server. However, I apparently
don''t fully understand what "this" refers to. In the code below I was
expecting that when the button was clicked (handleDeleteButtonClicked
function) that "this" would be pointing at a ViewController object.
Instead it was the Button (HtmlInputElement).
Can somebody help me understand?
<html>
<head>
<script>
/* Constructor */
function ViewController() {
this.foo = "bar";
}
/* delete button handler */
ViewController.prototype.handleDeleteButtonClicked = function() {
window.alert("delete clicked, this=" + this + " this.foo= " +
this.foo);
};
/* initializer */
ViewController.prototype.initialize = function() {
document.getElementById("delete-button").onclick =
this.handleDeleteButtonClicked;
};
</script>
</head>
<body onload="javascript:new ViewController().initialize();">
<input id="delete-button" type="button" value="Delete">
</body>
</html>
推荐答案
ensemble写道：
ensemble wrote:
我正在尝试使用更加面向对象的方法来管理
在javascript中的窗口事件。因此，我正在创建一个控制器
对象来处理事件并与服务器交互。但是，我显然还不完全明白这个是什么。是指。
I''m trying to utilized a more object-oriented approach to managing
window events in javascript. Thus, I am creating a "controller"
object to handle events and interact with the server. However, I
apparently don''t fully understand what "this" refers to.
然后在Google网上论坛存档中搜索这个
运算符等短语等等。过去已经多次讨论过。
小心忽略任何名为VK的海报。不得不说这件事。
[snip]
Mike
Then search the Google Groups archives for phrases like "the this
operator" and such. It has been discussed many times in the past.
Be careful to ignore anything a poster named "VK" has to say on the matter.
[snip]
Mike
ensemble写道：
ensemble wrote:
我正在尝试使用更加面向对象的方法在javascript中管理
窗口事件。因此，我正在创建一个控制器。对象
来处理事件并与服务器交互。
I''m trying to utilized a more object-oriented approach to managing
window events in javascript. Thus, I am creating a "controller" object
to handle events and interact with the server.
恕我直言，您的代码看起来更像是尝试重现其他语言
javascript中的弱点和变通办法。 javascript事件模型
有足够的麻烦将Java或C ++的内容添加到其中;-)
< html> ;
< head>
< titlemake KISS - 然后是OOP！ < / title>
< meta http-equiv =" Content-Type"
content =" text / html; charset = iso-8859-1">
< script type =" text / javascript">
函数EventListener（ obj）{
//轻量级构造函数保护：
if（（（window）&&（this == window））
||（！obj）||（！obj.tagName））{
返回新布尔值（false）;
}
obj.JSInstance = this;
this.foo =''foo'';
for（var i = 1; i< arguments.length; i ++）{
obj [arguments [i]] = EventListener [arguments [i]];
}
}
EventListener.onmouseover = function（）{
this.style.backgroundColor =''yellow'';
}
EventListener.onmouseout = function（）{
this.style.backgroundColor ='''';
}
EventListener.onclick = function（）{
alert（this.JSInstance.foo）;
}
函数init（）{
新的EventListe ner（document.getElementById（''btnAdd''），
''onmouseover''，''onmouseout''）;
new EventListener（document .getElementById（''btnEdit''），
''onclick''）;
新的EventListener（document.getElementById（''btnDelete''） ，
''onmouseover''，''onmouseout''，''onclick''）;
}
window.onload = init ;
< / script>
< / head>
< body>
< button id =" btnAdd" type =" button">添加< / button>
< button id =" btnEdit" type =" button">编辑< / button>
< button id =" btnDelete" type =" button">删除< / button>
< / body>
< / html>
IMHO your code looks more as an attempt to reproduce other languages
weaknesses and workarounds in javascript. The javascript event model
has enough of its own headaches to add Java''s or C++''s ones into it ;-)
<html>
<head>
<titlemake KISS - then OOP ! </title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function EventListener(obj) {
// Lightweight constructor protection:
if (((window) && (this == window))
|| (!obj) || (!obj.tagName)) {
return new Boolean(false);
}
obj.JSInstance = this;
this.foo = ''foo'';
for (var i=1; i<arguments.length; i++) {
obj[arguments[i]] = EventListener[arguments[i]];
}
}
EventListener.onmouseover = function() {
this.style.backgroundColor = ''yellow'';
}
EventListener.onmouseout = function() {
this.style.backgroundColor = '''';
}
EventListener.onclick = function() {
alert(this.JSInstance.foo);
}
function init() {
new EventListener(document.getElementById(''btnAdd''),
''onmouseover'', ''onmouseout'');
new EventListener(document.getElementById(''btnEdit''),
''onclick'' );
new EventListener(document.getElementById(''btnDelete'') ,
''onmouseover'', ''onmouseout'', ''onclick'' );
}
window.onload = init;
</script>
</head>
<body>
<button id="btnAdd" type="button">Add</button>
<button id="btnEdit" type="button">Edit</button>
<button id="btnDelete" type="button">Delete</button>
</body>
</html>
但是，我显然不会完全明白这个是什么是指。
However, I apparently
don''t fully understand what "this" refers to.
[this]指*当前对象*（或通过ECMAScript规范指向
到指向的对象]关键字，这很酷，但
不是很有帮助:-)
当前对象可以是：
1 ）全局对象（大部分时间）
2）新对象实例（在构造函数中）
3）拥有被调用方法的对象实例（比它应该更少
恕我直言）
4）通过call（）或apply（）方法传输的其他对象实例
5）*默认对象*的等效于（这个）{...}构造
6）DOM元素在内部方法处理程序中接收到事件。
根据好节目的规则我放置了你的案例在最后:-)
[this] refers to the *current object* (or by ECMAScript specs it points
to "the object pointed by [this] keyword", which is cool to know but
not very helpful :-)
Current object can be:
1) Global object (most of the time)
2) New object instance (in constructor)
3) Object instance owning the called method (more rarely than it should
IMHO)
4) Other object instance transferred by call() or apply() methods
5) Equivalent of *default object* in with (this) {...} construct
6) DOM element received the event in intrinsic method handlers.
By the rules of good show I placed your case at the very end :-)
ensemble写道：
ensemble wrote:
我正在尝试使用更加面向对象的方法来管理javascr中的
窗口事件IPT。因此，我正在创建一个控制器。对象
来处理事件并与服务器交互。但是，我显然没有完全明白这个是什么。是指。在下面的代码中，我是
期望当点击按钮（handleDeleteButtonClicked
函数）时，this将指向一个ViewController对象。
而不是Button（HtmlInputElement）。
有人可以帮我理解吗？
< html>
< head>
< script>
/ *构造函数* /
函数ViewController（）{
this.foo =" bar" ;;
}
/ * delete按钮处理程序* /
ViewController.prototype.handleDeleteButtonClicked = function（）{
window.alert（" delete clicked，this =" + this +" this。 foo =" +
this.foo）;
};
/ * initializer * /
ViewController.prototype.initialize = function（）{
document.getElementById（" delete-button"）。onclick =
this.handleDeleteButtonClicked;
};
< / script>
< / head>
< body onload =" javascript < b> ：new ViewController（）。initialize（）;" >
< input id =" delete-button"类型= QUOT按钮" value ="删除">
< / body>
< / html>
I''m trying to utilized a more object-oriented approach to managing
window events in javascript. Thus, I am creating a "controller" object
to handle events and interact with the server. However, I apparently
don''t fully understand what "this" refers to. In the code below I was
expecting that when the button was clicked (handleDeleteButtonClicked
function) that "this" would be pointing at a ViewController object.
Instead it was the Button (HtmlInputElement).
Can somebody help me understand?
<html>
<head>
<script>
/* Constructor */
function ViewController() {
this.foo = "bar";
}
/* delete button handler */
ViewController.prototype.handleDeleteButtonClicked = function() {
window.alert("delete clicked, this=" + this + " this.foo= " +
this.foo);
};
/* initializer */
ViewController.prototype.initialize = function() {
document.getElementById("delete-button").onclick =
this.handleDeleteButtonClicked;
};
</script>
</head>
<body onload="javascript:new ViewController().initialize();">
<input id="delete-button" type="button" value="Delete">
</body>
</html>
更多研究让我得到答案：这个并不总是引用您工作的
对象。特别是当被事件调用时，被调用的函数将具有this和this。设置为生成事件的
的控件（例如，按钮）。原始目标
（有控制器对象）可以通过一个级别的
间接解决：
< html>
< head>
< script>
函数initialize（）{
var controller = new ViewController （）;
document.getElementById（" delete-button"）。onclick = function（）{b / b
controller.handleDeleteButtonClicked（）;
}
}
/ *构造函数* /
函数ViewController（）{
this .foo =" bar";
}
/ *删除按钮处理程序* /
ViewController.prototype.handleDeleteButtonClicked = function（）{
window.alert（" delete clicked，this''constructor =" +
this.constructor）;
};
< / script>
< / head>
< body onload =" javascript ：initialize（）;">
< input id =" delete-button&quo吨;类型= QUOT按钮" value ="删除">
< / body>
< / html>
More research got me to an answer: "this" does not always refer to the
object for which you work. Specifically when called by an event
handler the called function will have "this" set to the control for
whom the event was generated (e.g., button). The original objective
(having a controller object) can be resolved by one level of
indirection:
<html>
<head>
<script>
function initialize() {
var controller = new ViewController();
document.getElementById("delete-button").onclick = function() {
controller.handleDeleteButtonClicked();
}
}
/* constructor */
function ViewController() {
this.foo = "bar";
}
/* delete button handler */
ViewController.prototype.handleDeleteButtonClicked = function() {
window.alert("delete clicked, this'' constructor=" +
this.constructor);
};
</script>
</head>
<body onload="javascript:initialize();">
<input id="delete-button" type="button" value="Delete">
</body>
</html>
这篇关于OO javascript ...这似乎没有指向对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
