Объект / пространства имен Javascript - как получить доступ к свойствам, добавленным из вложенных функций (пример включен)

Я работал над пониманием объектов Javascript и пространств имен, и меня немного смущает то, как мы можем генерировать / отображать объект, используя вложенные функции. Я не понимаю, как я могу вложить функции, чтобы в основном создавать фабрики объектов и отображать их на странице. Пример ниже.

Я пробовал RTFG и некоторые примеры на этом сайте, но ничего не применимо. Любые ссылки на соответствующие вопросы и ответы приветствуются. но я надеюсь, что опытный человек может объяснить это поведение.

Три файла, представленные ниже, представляют собой простое приложение для загрузки страницы index.html с тремя записями автомобилей, сгенерированными трехкратным вызовом функции getCar() и настройкой пользовательских атрибутов, а затем добавлением движка с использованием функции, которая сама по себе использует (совершенно неверно) Функция для расчета лошадиных сил.

Я ожидаю, что смогу получить доступ к свойствам возвращенных объектов car1, car2, car3 в HTML, но когда я загружаю 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 ответ

Решение

  1. Вы должны заменить car в заявлении var car = getNewCar("Dodge"); от 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 объект.

Я надеюсь, что это полезно!

Источник
Другие вопросы по тегам