私は Javascript オブジェクトと名前空間の理解に取り組んできましたが、ネストされた関数を使用してオブジェクトを生成/表示する方法に少し混乱しています。関数をネストして基本的にオブジェクト ファクトリを作成し、それらをページに表示する方法がわかりません。以下の例。
RTFG とこのサイトのいくつかの例を試してみましたが、何も当てはまらないようです。関連する Q&A へのリンクを歓迎します。しかし、経験豊富な人がこの動作を説明できることを願っています。
以下の 3 つのファイルは、getCar() 関数を 3 回呼び出してカスタム属性を設定することによって生成された 3 つの車のエントリを含む index.html ページをロードする単純なアプリを構成し、それ自体が (完全に間違った) を使用する関数を使用してエンジンを追加します。馬力を計算する関数。
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 第 6 版のセクションを見てきましたが、この名前空間/オブジェクトの設定が実際にどのように機能するかわかりません。どんな助けにも感謝します。
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;
}