JavaScript オブジェクト
JavaScript オブジェクトは、プロパティとメソッドを持つデータです。
現実世界のオブジェクト、プロパティ、メソッド
現実世界では、車はオブジェクトです。
オブジェクトには重みや色などのプロパティがあり、メソッドには開始と停止などが含まれます。 name = Fiat
car.color = ホワイト | car.start() | |
---|---|---|
car.brake() | car。 stop()すべての車にはこれらの属性がありますが、車ごとに異なります。 すべての車にこれらのメソッドがありますが、実行されるタイミングは異なります。 | JavaScript オブジェクト JavaScript では、ほとんどすべてがオブジェクトです。 |
JavaScript 変数の割り当てについて学習しました。
var | car = | "Fiat"
---|
オブジェクトも変数ですが、オブジェクトには複数の値を含めることができます(複数の変数) 。
car = {type:"Fiat", model:
500オブジェクト定義
文字を使用してJavaScriptオブジェクトを定義および作成できます:
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建 JavaScript 对象。</p> <p id="demo"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; document.getElementById("demo").innerHTML = person.firstName + " 现在 " + person.age + " 岁."; </script> </body> </html>
インスタンスの実行»
オンライン例を表示するには、[インスタンスの実行]ボタンをクリックしてください
JavaScript オブジェクトを定義します。複数の行にまたがることができ、スペースや改行は必要ありません:
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建 JavaScript 对象。</p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " 现在 " + person.age + " 岁。"; </script> </body> </html>
実行例»
オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください
オブジェクトプロパティ
「JavaScriptのオブジェクトは変数のコンテナである」と言えます。
しかし、私たちは通常、「JavaScript オブジェクトをキーと値のペアのコンテナー」と考えます。
キーと値のペアは通常、name : value として記述されます (キーと値はコロンで区切られます)。 JavaScript オブジェクトの
キーと値のペアは、多くの場合、オブジェクト プロパティと呼ばれます。
JavaScript オブジェクトは、プロパティ変数のコンテナーです。 |
オブジェクトのキーと値のペアの記述は次のようになります:
PHPの連想配列
Pythonの辞書
C言語のハッシュテーブル
Javaマッピングのハッシュ
Ruby と Perl のハッシュ テーブル
オブジェクト プロパティへのアクセス
オブジェクト プロパティには 2 つの方法でアクセスできます:
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p> 有两种方式可以访问对象属性: </p> <p> 你可以使用 .property 或 ["property"]. </p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; </script> </body>
インスタンスの実行 »
「インスタンスの実行」をクリックボタンをクリックしてオンラインインスタンスを表示します
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p> 有两种方式可以访问对象属性: </p> <p> 你可以使用 .property 或 ["property"]。 </p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"]; </script> </body> </html>
インスタンスを実行»
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
オブジェクトメソッド
の方法オブジェクトは関数として定義され、オブジェクトのプロパティとして保存されます。
オブジェクトのメソッドは()を追加することで(関数として)呼び出されます。
このインスタンスは、person オブジェクトの fullName() メソッドにアクセスします:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法作为一个函数定义存储在对象属性中。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); </script> </body> </html>
インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
person オブジェクトの fullName プロパティ、関数を定義する文字列として返されます:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法是一个函数定义,并作为一个属性值存储。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName; </script> </body> </html>
インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
JavaScript オブジェクトはメソッドのプロパティとコンテナです。 |
次のチュートリアルでは、関数、プロパティ、メソッドについて詳しく学習します。
オブジェクト メソッドにアクセスする
次の構文を使用してオブジェクト メソッドを作成できます:
次の構文を使用してオブジェクト メソッドにアクセスできます:
通常、fullName()はpersonオブジェクトのメソッドですが、 fullName は属性として使用できます。
JavaScript オブジェクトを作成、使用、変更するにはさまざまな方法があります。
プロパティやメソッドを作成、使用、変更する方法もたくさんあります。
次のチュートリアルでは、オブジェクトについて詳しく学習します。 |
その他の例
JavaScript オブジェクト I を作成します
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建 JavaScript 对象。</p> <p id="demo"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; document.getElementById("demo").innerHTML = person.firstName + " 现在 " + person.age + " 岁."; </script> </body> </html>
インスタンスを実行する»
オンラインの例を表示するには、[インスタンスを実行] ボタンをクリックしてください
JavaScript を作成するオブジェクト II
例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建 JavaScript 对象。</p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " 现在 " + person.age + " 岁。"; </script> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
オブジェクトのプロパティにアクセスします
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p> 有两种方式可以访问对象属性: </p> <p> 你可以使用 .property 或 ["property"]. </p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; </script> </body> </html>
インスタンスの実行»
「実行」をクリックします「インスタンス」ボタンをクリックしてオンライン インスタンスを表示します
オブジェクト プロパティ II にアクセス
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>phn.cn</title> </head> <body> <p> 有两种方式可以访问对象属性: </p> <p> 你可以使用 .property 或 ["property"]。 </p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"]; </script> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンライン インスタンスを表示します
メソッド
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法作为一个函数定义存储在对象属性中。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); </script> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
関数属性はプロパティとしてアクセスされます
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法是一个函数定义,并作为一个属性值存储。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName; </script> </body> </html>
走るインスタンス»
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します