JavaScript オブジェクト

JavaScript オブジェクトは、プロパティとメソッドを持つデータです。

現実世界のオブジェクト、プロパティ、メソッド

現実世界では、車はオブジェクトです。

オブジェクトには重さや色などのプロパティがあり、メソッドには開始や停止などが含まれます:

すべての車にこれらのメソッドがありますが、実行される時間は異なります。すべての車にはこれらの属性がありますが、各車の属性は異なります。

JavaScript オブジェクト

JavaScript では、ほとんどすべてがオブジェクトです。

JavaScript では、オブジェクトは非常に重要です。オブジェクトを理解すると、JavaScript も理解できます。

JavaScript の変数割り当てについて学習しました。

次のコードは、変数 car の値を「Fiat」に設定します:

var car = "Fiat";

オブジェクトも変数ですが、オブジェクトには複数の値を含めることができます。 (複数の変数)。

var car = {type:"Fiat", model:500, color:"white"};

上記の例では、3つの値("Fiat", 500, "white")が割り当てられています可変車。

上記の例では、変数 car に 3 つの変数 (タイプ、モデル、色) が割り当てられています。

ヒント: JavaScript オブジェクトは変数のコンテナです。

オブジェクト定義

文字を使用してJavaScriptオブジェクトを定義および作成できます:

インスタンス

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网（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中文网（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 オブジェクトをキーと値のペアのコンテナー」と考えます。

キーと値のペアは通常、名前 : 値として記述されます (キーと値はコロンで区切られます)。

JavaScript オブジェクトのキーと値のペアは、通常、オブジェクトプロパティと呼ばれます。

ヒント: JavaScript オブジェクトはプロパティ変数のコンテナです。

オブジェクトのキーと値のペアは次のように記述されます:

PHPの連想配列
C言語のハッシュテーブル
JavaのHアッシュマップ
Ruby と Perl のハッシュテーブル

オブジェクトプロパティへのアクセス

オブジェクトプロパティには 2 つの方法でアクセスできます:
方法 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网（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>

プログラムを実行して試してみましょう

方法 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> PHP中文网</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>

プログラムを実行して試してみる

オブジェクトのメソッドにアクセスする

次の構文を使用してオブジェクトメソッドを作成できます:

methodName : function() { code Lines }

次の構文を使用してオブジェクトメソッドにアクセスできます:

objectName.methodName()

通常、fullName() は person オブジェクトのメソッドとして、fullName はプロパティとして使用されます。
JavaScript オブジェクトを作成、使用、変更するにはさまざまな方法があります。

プロパティやメソッドを作成、使用、変更する方法もたくさんあります。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网（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>

リセットコード

自動運転

提出する

プレビュー Clear