Question

您好我只是在玩一些oojs，我试图完成一个非常简单的测试。

在这里查看代码： view the test jsbin

我注意到我无法在函数内部创建对象的新实例，无需将其移出函数或通过窗口预先挂起，例如

window.person = new person（）;

我觉得这是错的。

所以我的问题是，他们是一个更好的方法来做到这一点，并且正在使用window.person一个坏主意来创建一个新实例。

Answer 1

问题是你的新Person实例正在覆盖构造函数。

在范围之外定义函数时，实际上是将它附加到窗口对象（“全局”范围）。这意味着您的function Person已分配到window.Person。

在点击事件中，您使用window.Person

重新分配

window.Person = new Person(clicked);

您只需重命名window.Person回调中创建的click变量即可让您的示例正常工作。然而，更合适的方法是使用closures。这将使窗口范围更加清晰并解决您的问题。

此外，在命名变量和构造函数时，通常使用以下指南：

构造函数名称应以大写字母开头（例如function Person）
正常变量应以小写字母开头（例如var person）

这可以避免在编写var person = new Person()等内容时出现混淆。

最终结果如下所示：

function Person(name){
    this.name = name;
    this.alert = function(){
        alert("hello " + this.name);
    };
}

function Area (location, name){
    this.name = name;
    this.location = location;
    this.alert = function(){
        alert("hello " + this.name + " you live in " + this.location);
    };
}

$(document).ready(function(){
    var person;
    $(".button").click(function(){
        var clicked = $(this).text();
        person = new Person(clicked);
        person.alert();  
    });

    $(".button2").click(function(){
        var location = $(this).text();
        var name =  person.name;
        var area = new Area(location, name);
        area.alert();  
    });
});

如果您需要访问area功能之外的click变量，您当然也可以直接在var area声明下移动var person。

Answer 2

只需将实例放在外部范围内：

var myPerson, myArea;

$(document).ready(function(){

    $(".button").click(function(){
        var clicked = $(this).text();
        myPerson = new Person(clicked);
        myPerson.alert();  
    });

    $(".button2").click(function(){
        var location = $(this).text();
        var name =  myPerson.name;
        myArea = new Area(location, name);
        myArea.alert();  
    });

});

在jquery点击功能中创建对象实例

2 个答案: