Javascript OOP - how the object call its instance method?
Question
I wrote my first Javascript with OOP. And I am trying to call its instance method from another method within same object.
When I call begin() method like below which is fired after closing the dialog, I get "this.after() is not a function".
If other language like Java, it should just process without any problem. Is there anything I'm missing?
I am using jQuery bind() for dialog close event so "this" must be pointing to not class itself.
function MyHandler() {
this.begin = function() {
$("#hiddenIframe").dialog({
autoOpen: true,
height: 300,
width: 300
});
$("#hiddenIframe").bind("dialogclose", function() {
this.after();
});
}
this.after = function() {
//do something here
}
}
var myInstance = new MyHandler();
myInstance.begin(); //error: this.after() is not function ???
3 answers
solution1
5 ACCPTED 2011-12-22 06:12:15
Try this:
function MyHandler() {
var thisInstance = this;
this.begin = function() {
$("#hiddenIframe").bind("dialogclose", function() {
thisInstance.after();
});
}
this.after = function() {
//do something here
}
}
Thank you, Juicy Scripter. I don't know how jquery dialog calls dialogclose event handlers, but the described error indicates that context of the call of anonymous function with this.after(); inside it is not MyHandler , and this means something else there. To be explicit about whose method after is, define local variable in MyHandler constructor and use this variable when you need to call MyHandler instance methods inside functions that will be called in unknown context.
solution2
2 2011-12-22 06:10:39
jQuery binded functions executed in context to what they binded.
You have #hiddenIframe as this in your event listener
You probably want to store pointer to your instance in some variable and use it later in contexts other than instance itself.
solution3
0 2011-12-22 06:14:10
I don't think any problem in you code. It works !!
There is also another simple way of representing the same Object ie in the form of JSON.
See the code below:
<script>
var MyHandler= {
begin:function() {
console.log('inside begin');
after();
},
after:function() {
alert('inside after');
}
};
var myInstance = MyHandler;
myInstance.begin();
</script>
Dialog Box code with OOP java script function:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script type="text/javascript">
function MyHandler() {
this.begin = function() {
$("#info").show().dialog("open");
$("#info").bind("dialogclose", function() {
this.after();
});
}
this.after = function() {
$("#info").dialog("destroy");
}
}
function showDialog(){
var myInstance = new MyHandler();
myInstance.begin();
}
$(document).ready(function() {
var info=$("#info");
info.dialog({
autoOpen: false,
height: 300,
width: 300,
title:'Hello Dialog',
autoClose:false,
closeOnEscape: true
});
$("a").click(showDialog);
});
</script>
</head>
<body>
<a href="#" onclick="showDialog()">Show the Dialog</a>
<div id="info" style="display:none;font-size:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.