Question

我用OOP写了我的第一个Javascript。我试图从同一个对象中的另一个方法调用它的实例方法。

当我调用关闭对话框后触发的下面的begin（）方法时，我得到"this.after() is not a function".

如果像Java这样的其他语言，它应该只是处理没有任何问题。有什么我想念的吗？

我正在使用jQuery bind（）进行对话关闭事件，所以“this”必须指向不是类本身。

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 ???

Answer 1

试试这个：

function MyHandler() {

    var thisInstance = this;

    this.begin = function() {
        $("#hiddenIframe").bind("dialogclose", function() {
             thisInstance.after();
        });
    }

    this.after = function() {
        //do something here
    }
}

谢谢你，Juicy Scripter。我不知道jquery dialog如何调用dialogclose事件处理程序，但所描述的错误表明其中this.after();的匿名函数调用的上下文不是MyHandler，而this意味着其他东西。要明确哪个方法after，请在MyHandler构造函数中定义局部变量，并在需要在未知上下文中调用的函数内调用MyHandler实例方法时使用此变量。 / p>

Answer 2

jQuery绑定函数在上下文中执行它们绑定的内容。

您的事件监听器中有#hiddenIframe为this

您可能希望将指针存储在某个变量中，稍后在实例本身以外的上下文中使用它。

Answer 3

我认为你的代码没有任何问题。它有效!!
还有另一种表示同一对象的简单方法，即以JSON的形式。

请参阅以下代码：

<script>
     var MyHandler= {
                begin:function() {
                    console.log('inside begin');
                    after();
                },
                after:function() {
                    alert('inside after');
                }
      };
     var myInstance = MyHandler;
     myInstance.begin();
</script>

带OOP java脚本功能的对话框代码：

<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>

Javascript OOP - 对象如何调用其实例方法？

3 个答案: