フロントエンド学習のJavaScript——対象


1.対象


1.1対象とは?


JavaScriptでは、オブジェクトは無秩序な関連属性とメソッドのセットであり、文字列、数値、配列、関数など、すべてのものがオブジェクトです.
オブジェクトは、プロパティとメソッドで構成されます.
  • 属性:物事の特徴、対象に属性で表す(常用名詞)
  • 方法:物事の行為、対象の中で方法で表す(常用動詞)
  • 2.オブジェクトを作成する3つの方法


    JavaScriptでは、現段階では3つの方法でオブジェクト(object)を作成できます.
  • 字面量を利用するオブジェクト
  • を作成する.
  • new Objectによるオブジェクト作成
  • コンストラクション関数によるオブジェクト作成
  • 2.1字面量によるオブジェクトの作成


    オブジェクトの字面量:カッコ{}にこの具体的なもの(オブジェクト)を表す属性と方法が含まれています.{}内はキー値ペアの形式で表示されます
  • キー:属性名
  • に相当
  • 値:属性値に相当し、任意のタイプの値(数値タイプ、文字列タイプ、ブールタイプ、関数タイプなど)
  • であってもよい.
    var star = {
        name : 'Jack',
        age : 18,
        sex : ' ',
        sayHi : function(){
            alert('hi');
        }
    };
    

    オブジェクトの呼び出し
  • オブジェクト内の属性呼び出し:オブジェクト.属性名、この小さな点.「の」
  • オブジェクト内のプロパティの別の呼び出し方法:オブジェクト['プロパティ名']、角カッコ内のプロパティには引用符
  • が必要であることに注意してください.
  • オブジェクト内のメソッド呼び出し:オブジェクト.メソッド名()は、このメソッド名の後ろに必ず括弧
  • を付けることに注意してください.
    console.log(star.name)     //       
    console.log(star['name'])  //       
    star.sayHi();              //    sayHi   ,  ,            
    

    変数、属性、関数、メソッドのまとめ
  • 変数:割り当てが個別に宣言され、
  • が個別に存在します.
  • プロパティ:オブジェクト内の変数をプロパティと呼び、オブジェクトのフィーチャー
  • を記述するために宣言する必要はありません.
  • 関数:単独で存在し、「関数名()」で
  • を呼び出すことができます.
  • メソッド:オブジェクト内の関数をメソッドと呼び、メソッドは宣言する必要はなく、「オブジェクト.メソッド名()」を使用して呼び出すことができ、メソッドはオブジェクトの動作と機能を記述するために使用されます.

  • 2.2 new Objectによるオブジェクトの作成

    var andy = new Obect();
    andy.name = 'Jack';
    andy.age = 18;
    andy.sex = ' ';
    andy.sayHi = function(){
        alert('hi');
    }
    
  • Object():最初のアルファベット大文字
  • new Object():newキーワードが必要
  • で使用するフォーマット:オブジェクト.属性=値;

  • 2.3コンストラクション関数によるオブジェクトの作成


    コンストラクション関数:オブジェクトを初期化するために主に使用される特殊な関数です.すなわち、new演算子とともに常に使用されるオブジェクトメンバー変数に初期値を付与します.オブジェクト内のいくつかの共通の属性と方法を抽出し、この関数にカプセル化することができます.
    jsでは、コンストラクション関数を使用するには、次の2つの点に注意してください.
  • コンストラクション関数は、頭文字が
  • であるオブジェクトのクラスを作成するために使用されます.
  • 構造関数はnewと一緒に使用してこそ意味がある
  • function Person(name, age, sex) {
         this.name = name;
         this.age = age;
         this.sex = sex;
         this.sayHi = function() {
          alert('     :' + this.name + ',  :' + this.age + ',  :' + this.sex);
        }
    }
    var bigbai = new Person('  ', 100, ' ');
    var smallbai = new Person('  ', 21, ' ');
    console.log(bigbai.name);
    console.log(smallbai.name);
    

    に注意
  • 構造関数は、頭文字の大文字を約束します.
  • 関数内のプロパティとメソッドの前にthisを追加する必要があります.これは、現在のオブジェクトのプロパティとメソッドを表します.
  • コンストラクション関数ではreturnが結果を返す必要はありません.
  • オブジェクトを作成するときは、newを使用してコンストラクション関数を呼び出す必要があります.

  • 2.4コンストラクション関数とオブジェクト

  • 構造関数、例えばStars()は、オブジェクトの共通部分を抽象化し、関数にカプセル化され、ある大きなクラス(class)
  • を指す.
  • new Stars()などのオブジェクトを作成します.特に、newキーワードでオブジェクトを作成するプロセスを指します.オブジェクトインスタンス化
  • とも呼ばれます.

    3.newキーワード


    newは実行時に4つのことをします.
  • メモリに新しい空のオブジェクトを作成します.
  • この新しいオブジェクトをthisに指し示す.
  • は、コンストラクション関数のコードを実行し、この新しいオブジェクトに属性とメソッドを追加します.
  • はこの新しいオブジェクトを返します(したがって、コンストラクション関数にはreturnは必要ありません).

  • 4.オブジェクト属性の遍歴


    for...in文は、配列またはオブジェクトのプロパティをループするために使用されます.
    構文は次のとおりです.
    for (   in     ) {
        //       
    }
    

    構文の変数はカスタマイズされており、ネーミング仕様に合致する必要があります.通常、この変数をkまたはkeyと書きます.
    for (var k in obj) {
        console.log(k);      //     k     
        console.log(obj[k]); //     obj[k]     
    }
    

    5.まとめ

  • オブジェクトは、コード構造をより明確にすることができる
  • オブジェクト複雑なデータ型object.
  • 本質:オブジェクトは無秩序な関連属性とメソッドのセットである.
  • 構造関数は、赤いりんごでも緑のりんごでも、りんごと総称される大きな種類を指す.
  • 対象例とは、このりんご、あなたたちに講義しているpink先生など、特に一つのことを指します.
  • for...in文は、オブジェクトのプロパティをループ操作するために使用されます.