我一直在努力理解 Javascript 对象和命名空间,我对如何使用嵌套函数生成/显示对象感到有些困惑。我不明白如何嵌套函数以基本上创建对象工厂并将它们显示在页面中。下面的例子。
我已经尝试过 RTFG 和该站点上的一些示例,但似乎没有任何适用。任何指向相关问答的链接表示赞赏。但我希望有经验的人可以解释这种行为。
以下三个文件构成一个简单的应用程序,用于加载包含三个汽车条目的 index.html 页面,通过调用 getCar() 函数 3 次并设置自定义属性生成,然后使用本身使用 a 的函数添加引擎(完全错误)计算马力的函数。
我希望能够访问 HTML 中返回的 car1、car2、car3 对象的属性,但是当我在浏览器中从下方加载 index.html 时,我在 Javascript 中看不到任何错误,但我不希望这些结果:
1. undefined <-- this is defined, I set the name in the call from the updatePage() function
2. [object Object] <-- the name is not an object, it's a primitive
3. {"name":"","engine":"","wheels":"","options":"none"} <-- this has properties set, why not show them?
还了解如果我使用命名空间,一个用于汽车,一个用于引擎,我是否需要在每个文件的顶部都声明它们,如下所示:
var car = car || {}
var engine = engine || {}
然后引用来自 carFactory.js 的调用:
engine.getEngine();
就像我说的,感谢任何帮助。我只是想明白,这不是课堂作业。我查看了 JavaScript 第六版中的部分,但看不出这种命名空间/对象设置在实践中是如何工作的。感谢任何帮助。
索引.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Object example</title>
</head>
<body>
<div id="input">
<p id='intro'>Object-Namespace Example</p>
<input type='button' onclick='updatePage()' value='New Car'/>
</div>
<div id="cars">
<div id="car1">car1</div>
<div id="car2">car2</div>
<div id="car3">car3</div>
</div>
<div id="jslib">
<script type="text/javascript" src="carFactory.js"></script>
<script type="text/javascript" src="engineFactory.js"></script>
<script type="text/javascript">
function updatePage() {
var car1 = getNewCar("Dodge");
var oldHTML = document.getElementById('car1').innerHTML;
var newHTML = "<span>" + car1["name"] + "</span>";
document.getElementById('car1').innerHTML = newHTML;
var car2 = getNewCar("Toyota");
var oldHTML = document.getElementById('car2').innerHTML;
var newHTML = "<span>" + car2 + "</span>";
document.getElementById('car2').innerHTML = newHTML;
var car3 = getNewCar("Hudson");
var oldHTML = document.getElementById('car3').innerHTML;
var newHTML = "<span>" + JSON.stringify(car3) + "</span>";
document.getElementById('car3').innerHTML = newHTML;
};
</script>
</div>
</body>
</html>
汽车工厂.js
function getNewCar(dName) {
this.retValue="";
var theCar = new car;
theCar.setProp("name",dName);
theCar.setProp("engine",getEngine());
theCar.setProp("wheels",4);
return theCar;
};
car = function() {
this.name="";
this.engine="";
this.wheels="";
this.options="none";
this.setProp=function(prop,val) {
this[prop]=val;
}
};
engineFactory.js
getEngine = function() {
var theEngine = new engine();
theEngine.setProp["cylinders"] = 8;
theEngine.setProp["capacity"]=400;
theEngine.setProp["fuel"]="injected";
return theEngine;
};
engine = function() {
this.capacity="";
this.fuel="";
this.cylinder="";
this.nitrous="no";
this.horsepower=getHorsepower(this);
this.setProp=function(prop,val) {
this[prop]=val;
}
}
function getHorsepower(engine) {
this.retValue=0;
this.retValue=engine.cylinder*engine.capacity;
return this.retValue;
}