无法创建唯一的javascript对象。什么'；这个密码怎么了？

我正在尝试制作一个简单的页面弹出窗口，名为：

var test = new popObject({}); //JSON options

我遇到了麻烦，因为当我连续创建两个，并对第一个调用show（）时，第二个总是显示出来。两者都是创建的，但它们并没有以某种方式分开，尽管它们被称为新的。我做错了什么？我已经包含了我的代码，但是为了简洁，我删除了不相关的函数

function popObject(options) {   
//functions

show = function() {
    console.log(boxselector);
    jQuery(boxselector).css("display", "block");
    return jQuery(boxselector);
}

var hide = function() {...}
var update = function(updateOptions) {...}
var calcTop = function(passedHeight) {...}
var calcLeft = function(passedWidth) {...}
var calcHeight = function(passedHeight) {...}
var stripUnits = function(measure, auto) {...}
var destroy = function() {...}

//public functions

this.show = show;
this.hide = hide;
this.update = update;
this.destroy = destroy;

//constants

name = options.name; //name should never be changed.
boxselector = ".boxcontainer[name=" + options.name + "]";
boxbodyselector = ".boxbody[name=" + options.name + "]";
boxtitleselector = ".boxcontainer[name=" + options.name + "]"
boxboxselector = ".boxbox[name=" + options.name + "]"
title = options.title;
content = options.content;  
width = options.width;
height = options.height;

this.name = name;
this.selectors = [boxselector, boxbodyselector, boxtitleselector, boxboxselector]
this.title = title;
this.content = content;
this.width = width;
this.height = height;

//variables

popupHtml = ...

//init code

jQuery("#dropzone").append(popupHtml); this.init = null;
jQuery(".boxbox[name=" + name + "]").css("top", calcTop(width));
jQuery(".boxbox[name=" + name + "]").css("left", calcLeft(height));
jQuery(".boxbody[name=" + name + "]").css("height", calcHeight(height));
}

---

这是因为您在全局范围内声明了许多变量。请尝试以下代码：

function popObject(options) {   
//functions

this.show = function() {
    console.log(boxselector);
    jQuery(boxselector).css("display", "block");
    return jQuery(boxselector);
}

var hide = function() {...}
var update = function(updateOptions) {...}
var calcTop = function(passedHeight) {...}
var calcLeft = function(passedWidth) {...}
var calcHeight = function(passedHeight) {...}
var stripUnits = function(measure, auto) {...}
var destroy = function() {...}

//public functions

this.show = show;
this.hide = hide;
this.update = update;
this.destroy = destroy;

//constants

var name = options.name; //name should never be changed.
var boxselector = ".boxcontainer[name=" + options.name + "]";
var boxbodyselector = ".boxbody[name=" + options.name + "]";
var boxtitleselector = ".boxcontainer[name=" + options.name + "]"
var boxboxselector = ".boxbox[name=" + options.name + "]"
var title = options.title;
var content = options.content;  
var width = options.width;
var height = options.height;

this.name = name;
this.selectors = [boxselector, boxbodyselector, boxtitleselector, boxboxselector]
this.title = title;
this.content = content;
this.width = width;
this.height = height;

//variables

var popupHtml = ...

//init code

jQuery("#dropzone").append(popupHtml); this.init = null;
jQuery(".boxbox[name=" + name + "]").css("top", calcTop(width));
jQuery(".boxbox[name=" + name + "]").css("left", calcLeft(height));
jQuery(".boxbody[name=" + name + "]").css("height", calcHeight(height));
}

注意所有以前没有的

var

s。这将它们定义为函数的局部，从而定义为对象的局部（本质上也是私有的…使用

This.

而不是

var

来创建公共成员）

---

任何未使用

var

或

this.

声明的内容都被视为全局的。因此，当您调用

show（）

时，它使用了全局

show

，它引用了后来创建的对象。

这是因为您在全局范围内声明了很多变量。请尝试以下代码：

function popObject(options) {   
//functions

this.show = function() {
    console.log(boxselector);
    jQuery(boxselector).css("display", "block");
    return jQuery(boxselector);
}

var hide = function() {...}
var update = function(updateOptions) {...}
var calcTop = function(passedHeight) {...}
var calcLeft = function(passedWidth) {...}
var calcHeight = function(passedHeight) {...}
var stripUnits = function(measure, auto) {...}
var destroy = function() {...}

//public functions

this.show = show;
this.hide = hide;
this.update = update;
this.destroy = destroy;

//constants

var name = options.name; //name should never be changed.
var boxselector = ".boxcontainer[name=" + options.name + "]";
var boxbodyselector = ".boxbody[name=" + options.name + "]";
var boxtitleselector = ".boxcontainer[name=" + options.name + "]"
var boxboxselector = ".boxbox[name=" + options.name + "]"
var title = options.title;
var content = options.content;  
var width = options.width;
var height = options.height;

this.name = name;
this.selectors = [boxselector, boxbodyselector, boxtitleselector, boxboxselector]
this.title = title;
this.content = content;
this.width = width;
this.height = height;

//variables

var popupHtml = ...

//init code

jQuery("#dropzone").append(popupHtml); this.init = null;
jQuery(".boxbox[name=" + name + "]").css("top", calcTop(width));
jQuery(".boxbox[name=" + name + "]").css("left", calcLeft(height));
jQuery(".boxbody[name=" + name + "]").css("height", calcHeight(height));
}

注意所有以前没有的

var

s。这将它们定义为函数的局部，从而定义为对象的局部（本质上也是私有的…使用

This.

而不是

var

来创建公共成员）

---

任何未使用

var

或

this.

声明的内容都被视为全局的。因此，当您调用

show（）

时，它使用了全局

show

，它引用了后来创建的对象。

什么是

boxselector

？如果它是一个通用选择器，那么它将选择页面上的所有元素，而不管它是否位于该唯一对象的内部。

什么是

boxselector

？如果它是一个通用选择器，那么它将选择页面上的所有元素，而不管它是否位于该唯一对象的内部。

当您在函数定义中声明某个不带

var

或

this

的元素时，例如

boxselector=“.boxcontainer[name=“+options.name+””

它在全局命名空间中创建它（将其附加到
窗口
）

试着把这行改成

var-boxselector=“.boxcontainer[name=“+options.name+””
当您在函数定义中声明某项内容而不使用
var
或
this
时，例如

boxselector=“.boxcontainer[name=“+options.name+””

它在全局命名空间中创建它（将其附加到
窗口
）

试着把这行改成

var-boxselector=“.boxcontainer[name=“+options.name+””
这一点非常重要，无论怎样强调都不过分。除非您绝对确定您想要一个全局变量，否则请始终使用var，即使如此，您可能也不应该使用全局变量！即使您确实想要一个全局变量，您也应该执行
window.variable\u name
，以明确这不是局部变量的重新分配。仍然感觉我只是刚刚开始使用javascript。我对此一无所知。非常感谢。这件事非常重要，无论怎么强调都不过分。除非您绝对确定您想要一个全局变量，否则请始终使用var，即使如此，您可能也不应该使用全局变量！即使您确实想要一个全局变量，您也应该执行
window.variable\u name
，以明确这不是局部变量的重新分配。仍然感觉我只是刚刚开始使用javascript。我对此一无所知。非常感谢。
boxselector
稍后在对象中声明。在原始代码中，它是一个隐含的全局变量。在我的解决方案中，它是一个局部变量。
boxselector
稍后在对象中声明。在原始代码中，它是一个隐含的全局变量。在我的解决方案中，它是一个局部变量。