JS でオブジェクトを作成する 4 つの方法

JS でオブジェクトを作成する 4 つの方法

オブジェクトを作成するには 4 つの方法があります。

  • 1. リテラル値を使用してオブジェクトを作成する
  • 2. newキャラクターを使ってオブジェクトを作成する
  • 3. カスタムコンストラクタ
  • 4. ファクトリーパターンはオブジェクトを作成する

オブジェクトにはプロパティとメソッドがあります。

1. リテラル値でオブジェクトを作成する

var 人1 = {

    名前:「コナン」

    年齢:12歳

    性別: '男性'、

    食べる:関数(){

        console.log("お腹が空いたので食べたい")

    },

    言う:関数(){

        console.log("私の名前はコナンです")

    }

}

console.log("person.eat 出力関数",person.eat)

person.eat(); //直接出力「お腹が空いたので食べたい」

注意すべき点は、person.eatとperson.eat()の違いです。

  • person.eatは出力関数です
  • person.eat() は呼び出し関数です

2. 新しいキャラクターを使ってオブジェクトを作成する

var person2 = 新しいオブジェクト();

person2.name = 'コナン'

人2.年齢 = '21'

person2.sex = '男性'

person2.eat=関数(){

    console.log("お腹が空いたので食べたい")

}

person2.say=関数(){

    console.log("私の名前はコナンです")

}

console.log('sex',person2.sex) //出力は男性

上記の 2 つのオブジェクト作成方法の欠点:

上記のどちらもオブジェクトを作成できますが

しかし、作成したオブジェクトのタイプがわかりません。

もちろん、これらはOBject型であることは分かっています

この時点では、カスタムコンストラクタを使用してオブジェクトを作成する必要があります。

3. 独自のコンストラクタでオブジェクトを作成する

関数 Person(名前,年齢,性別,好み){

    console.log('likeパラメータに値が渡されていません。未定義です',like)

    // ここで this は Person オブジェクトを参照します console.log('this',this)

    this.name=名前;

    this.age=年齢;

    this.sex=セックス;

    this.say=関数(){

        console.log("私の名前は",name)

    }

}

//このコード行はオブジェクトの作成を意味します//同時にオブジェクトのインスタンスを作成し//このオブジェクトのプロパティを初期化します//したがって、このコード行は単純ではありませんlet per1=new Person('Conan',19,'男');

per1.say();

console.log(per1 インスタンスの Person);//true

これで、 per1 Person型であることがわかりました。これが、カスタム コンストラクターを使用してオブジェクトを作成する利点です。作成されるオブジェクトの型がわかります。

追記:コンストラクタは通常大文字で始まります


新しいオブジェクトを作成するときは、次の 4 つのことを行います。

カスタム オブジェクトを作成することで、新しいオブジェクトを作成するときに次の 4 つのことを実行することがわかります。

  • 1. 現在のオブジェクトを保存するスペースを作成する
  • 2. this現在のオブジェクトに設定する
  • 3. プロパティとメソッドを設定する
  • 4. thisオブジェクトを返す

4. ファクトリーパターンはオブジェクトを作成する

関数createObj(名前,年齢) {

    obj = new Object();

    obj.name=名前;

    obj.age=年齢;

    obj.sayHi=関数(){

        console.log(オブジェクト名)

    }

    obj を返します。

}

let per=createObj('司藤',200)

console.log(per.age); //200

per.sayHi(); //シ・テン

これで、JS でオブジェクトを作成する 4 つの方法についての記事は終了です。JS でオブジェクトを作成する 4 つの方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • js でオブジェクトを作成するさまざまな方法とその長所と短所のまとめ
  • js でオブジェクトとオブジェクト メソッドを作成するいくつかの方法の詳細な説明
  • JavaScriptオブジェクト指向オブジェクト作成方法のまとめ
  • JSで関数とオブジェクトを作成する方法
  • JavaScript オブジェクト作成方法のまとめ [ファクトリパターン、コンストラクターパターン、プロトタイプパターンなど]
  • JavaScript でオブジェクトを作成する一般的な方法の概要
  • JavaScript でカスタム オブジェクトを作成する一般的な方法の概要
  • JavaScript でオブジェクトを作成する 7 つの方法の包括的な概要
  • JS オブジェクトを作成するための一般的な方法と原則の分析
  • JavaScript でオブジェクトを作成する 7 つの方法 (推奨)

<<:  MYSQL row_number() および over() 関数の詳細な使用方法

>>:  CSS 垂直センタリングの代替実装コードの詳細な説明(非従来型)

推薦する

複数サーバーの負荷分散を実現するためのNginx構成

Nginx ロード バランシング サーバー: IP: 192.168.0.4 (Nginx-Serv...

Baidu百科事典UIの開発動向について議論する

<br />百度百科事典の正式版がついにオンラインになりました。2年間の「テスト版」の帽...

MySQL はカスタムシーケンスを使用して row_number 関数を実装します (詳細な手順)

いくつかの記事を読んだ後、ようやく MySQL で row_number() ソートを実装する方法が...

Vueベースのカスタムコンポーネントを実装してアイコンを導入する

序文プロジェクト開発では、アイコンを使用する方法はたくさんあります。iconfont で適切なアイコ...

CentOS7 systemdにカスタムシステムサービスを追加する方法

システムド: CentOS 7のサービスsystemctlスクリプトは、/usr/lib/syste...

mysql binlog ログを正しくクリーンアップする 2 つの方法

mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...

jsは双方向データバインディング(アクセサ監視)を実現します

この記事の例では、双方向データバインディングを実現するためのjsの具体的なコードを参考までに共有して...

202 無料の高品質 XHTML テンプレート (2)

前回の記事「202 個の無料高品質 XHTML テンプレート (1)」に続き、123WORDPRES...

Web でよく使われるフォントの紹介 (iOS および Android ブラウザでサポートされているフォント)

年末なので仕事も少なくなっています。私が何もせずにいるのを見ると、上司はきっと不快に思うでしょう。そ...

Apple 電卓の JS 実装

この記事の例では、Appleの電卓を実装するためのJSの具体的なコードを参考までに共有しています。具...

Python Django アプリケーションを Docker 化する方法

Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...

Vue印刷機能を実装する2つの方法の概要

方法1: npm経由でプラグインをインストールする1. npm install vue-print-...

Docker の詳細なイラスト

1. Dockerの紹介1.1 仮想化1.1.1 仮想化とは何ですか?コンピュータにおける仮想化とは...

MySQL DDL による同期遅延を解決する方法

目次序文解決ツールの紹介仕組み使用制限使用上の注意使用例いくつかのパラメータの説明出力例Tencen...

行の高さと垂直方向の配置についての深い理解

いくつかの概念行ボックス: インライン ボックスを囲むボックス。1 つ以上の行ボックスが積み重ねられ...