JavaScript Tutorial.16

15370 ワード
JavaScript 名学習 w3schools テキストリンク

JS OBJECTS


Real Life Objects, Properties, and Methods


現実の生活では、車は物です.
自動車には重量や色などの属性があり、起動や停止などの方法がある.
すべての車には同じ属性がありますが、属性値は車によって異なります.
すべての車には同じ方法がありますが、方法は異なる時間に実行されます.
Object
Properties
Methods

car.name = Fiat
car.model = 500
car.weight = 850kg
car.color = white
car.start()
car.drive()
car.brake()
car.stop()

JavaScript Objects


JS変数がデータ値のコンテナであることを習得した.
次のコードはcarという変数に単純な値(Fiat)を割り当てます.

オブジェクトも変数です.ただし、オブジェクトには多くの値が含まれる場合があります.
このコードはcarという変数に多くの値(Fiat,500,白)を割り当てている.

値は、1対の이름:값이(コロンで区切られた名前と値)で構成されます.
※一般的にはconstキーワードを用いて対象を宣言する.
JS const章では、オブジェクトとのconstの使用方法について詳しく説明します.
w3schools
(参照:https://www.w3schools.com/js/js_const.asp)
エンベロープの定理
(参照:https://velog.io/@ansunny1170/JavaScript-Tutorial.9-q4u544nk)

Object Definition


次の例のオブジェクト文を使用してJSオブジェクトを宣言します.
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

  • スペースと改行(Enter)は重要ではありません.オブジェクトを宣言するときに複数行を作成できます.

    • Object Properties

  • JSオブジェクトの이름:값のペアを属性と呼びます.
    • PropertyProperty ValuefirstNameJohnlastNameDoeage 50eyeColorblue

    Accessing Object Properties


    オブジェクトのプロパティにアクセスする方法は2つあります.

    ※JSオブジェクトは、属性のネーミング値と呼ばれるコンテナです.

    Object Methods


    オブジェクトにはメソッドがあります.方法は対象に対して航路を守る操作を行うことです.
    メソッドは、プロパティに関数定義として格納されます.
  • メソッドは、属性が格納される関数です.
    • PropertyProperty ValuefirstNameJohnlastNameDoeage50eyeColorbluefullNamefunction() {return this.firstName + ""+ this.lastName;}

    The this Keyword


    関数定義では、thisは関数の소유자を表す.
    上記の例では、thisはfullNameの関数であり、소유は1人の個体である.
    すなわち、this.firstNameは、そのオブジェクトのfirstName属性を意味する.
    JSのthisキーワードの詳細
    (参照:https://www.w3schools.com/js/js_this.asp)

    Accessing Object Methods


    オブジェクトにアクセスする方法(関数)は、次のコード例のように使用できます.
    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>
    괄호( )なしでメソッドにアクセスした場合、関数の内容は文字列として返されます(定義された内容).
    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

    Do Not Declare Strings, Numbers, and Booleans as Objects!


    JS変数がnewキーワードとして宣言された場合、変数はオブジェクトとして生成されます.

    文字列、数値、booleansオブジェクトとして宣言しないでください.コードが非常に複雑になり、実行速度が遅くなります.
    Datagridview連結セル
    1021 TIL