Question

我的其他代码存在问题而且很大，但我在这里制作了一个原型，

此代码假设提醒 “你好约翰”而不是“你好未定义”

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function callMethod(data, callback) {
            return callback(data);
        }

        function client(divid) {
            this.init = function () {
                $(this.divid).click((function (context) {
                    return function () {
                        callMethod("hello ", context.method);
                    }
                })(this));
            }
            this.divid = "#" + divid;
            this.myname = "John";
            this.method = function (d) {
                alert(d + this.myname);
            }
            this.init();
        }

        $('document').ready(function () {
            new client("mydiv");
        });
    </script>
</head>
<body>
    <div id="mydiv">This is my div</div>
</body>
</html>

有些人可以指出我为什么会在这里得到意想不到的结果吗？

我在

上得到了意想不到的结果

this.method = function (d) {
    alert(d + this.myname);
}

this.myname假设在这里返回“John”。

How to access class instance in event hanlder (JavaScript)? 我从上面的链接获得帮助，但我无法解决

Answer 1

这有效：

function callMethod(data, callback) {
    return callback(data);
}

function client(divid) {
    this.init = function() {
        $(this.divid).click((function(context) {
            return function() {
                callMethod("hello ", context.method);
            }
        })(this));
    }
    this.divid = "#" + divid;
    this.myname = "John";
    this.method = function(d) {
        alert(d + this.myname);
    }
    this.init();
}
$('document').ready(function() {
    client("mydiv");
});

<强>更新

如果要创建不同的实例，则必须返回函数对象：

function callMethod(data, callback) {
    return callback(data);
}

function client(divid) {
    this.init = function() {
        $(this.divid).click((function(context) {
            return function() {
                callMethod("hello ", context.method);
            }
        })(this));
    }
    this.divid = "#" + divid;
    this.myname = "John";
    this.method = function(d) {
        alert(d + this.myname);
    }
    this.init();
    return this;
}
$('document').ready(function() {
    var x = client("mydiv");
    alert(x.divid);
    alert(x.myname); 
});

Answer 2

我解决了这是代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function callMethod(data, callback) {
            return callback(data);
        }

        function client(divid) {
            this.init = function () {
                $(this.divid).click(function () {
                    callMethod("hello ", c.method);
                });
            }
            this.divid = "#" + divid;
            this.myname = "John";
            this.method = function (d) {
                alert(d + c.myname + $(c.divid).html());
            }
            this.init();
            var c = this;
        }

        $('document').ready(function () {
            new client("mydiv");
            new client("nextdiv");
        });            
    </script>
</head>
<body>
    <div id="mydiv">This is my div</div>
    <br />
    <div id="nextdiv">Next Div</div>
</body>
</html>

实际上是这一小段代码

var c = this;

扮演角色。振作起来;），我们不需要事件照顾“情境”也

我们也可以制作多个实例。测试用例：

 $('document').ready(function () {
      var x = new client("mydiv");
      var y = new client("nextdiv");
      alert("id of x is : " + x.divid + "\n id or y is : " + y.divid);
  });

Answer 3

这是一种替代的编码方式，我觉得更容易理解/维护。

在 return 部分中，可以更轻松地查看对象初始化后公众可用的内容。我已将 greet 功能保留为公共和可自定义。

function client(divid) {
    var ids = divid;
    var target = $('#' + ids);
    var content = target.html();
    var myname = "John";

    function getID() {
        return ids;
    }

    function greet(d) {
        var d = d || '';
        alert('Hello ' + d + myname + ', ' + content);
    }

    target.click(function() {
        customName(d);
    })

    return {
        getID: getID,
        greet: greet
    }
}


$(function() {
    var x = new client('mydiv');
    var y = new client('nextdiv');
    //alert("id of x is : " + x.getID() + " and y is : " + y.getID());
    //x.greet('E ');    
    x.greet();
});

在jQuery方法中调用类函数和访问类属性

3 个答案: