Javascript对象/名称空间-如何访问从嵌套函数添加的属性(包括示例）

Javascript object/namespaces - how to access properties added from nested functions (example included)

本文关键字：嵌套 函数 添加 包括示 属性 访问 对象 空间 何访问 Javascript      更新时间：2024-04-06

我一直在努力理解Javascript对象和名称空间，我对如何使用嵌套函数生成/显示对象有点困惑。我不明白如何嵌套函数来创建对象工厂并在页面中显示它们。以下示例。

我试过RTFG和这个网站上的一些例子，但似乎都不适用。任何相关问答链接；A很感激。但我希望一个有经验的人能够解释这种行为。

以下三个文件构成了一个简单的应用程序，用于加载一个包含三个汽车条目的index.html页面，通过调用getCar（）函数三次并设置自定义属性生成，然后使用一个函数添加一个引擎，该函数本身使用了一个（完全错误的）函数来计算马力。

我希望能够访问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第六版中的部分，看不出这种名称空间/对象设置在实践中是如何工作的。寻求任何帮助。

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

carFactory.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;
}

  1. 您应该将语句var car = getNewCar("Dodge");中的car替换为car1，因为这样您就使用了car1，而未定义的car，这就是您获得undefined的原因。

  2. 当您编写var newHTML = "<span>" + car2 + "</span>";对象时，car2将转换为它的字符串表示'[object Object]'。

  3. 使用theCar.setProp("name", dName);而不是theCar.setProp["name"] = dName;。setProp是function，所以要调用它，应该使用()。顺便说一句，任何function也是object，所以你可以向它添加字段，这是你在theCar.setProp["name"] = dName;时所做的，它不是向theCar添加任何字段，它只是更改theCar.setProp对象。

我希望它有帮助

相关文章：