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 垂直センタリングの代替実装コードの詳細な説明(非従来型)

推薦する

dockerにmysqlをインストールした後にNavicatが接続できない問題に対する完璧な解決策

1. Dockerがイメージをプルするdocker pull mysql (デフォルトで最新バージョ...

Docker で ElasticSearch をデプロイする方法

1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...

mysql charset=utf8 本当に意味が分かりますか

1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...

Web 上の要素を非表示にする方法とその利点と欠点

ソースコードの例: https://codepen.io/shadeed/pen/03caf6b36...

Chromeブラウザの自動パスワード保存プロンプト機能を無効にする方法

注: Web 開発では、フォームに autocomplete="off" を追加...

モバイルウェブページのサイズ調整を実装する方法

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...

Linux サーバーに Java Web プロジェクトをデプロイするための完全なチュートリアル

この記事は主にインターネット上の他のチュートリアルを参考にしています。実際に操作した上でのまとめです...

nginx「504 ゲートウェイタイムアウト」エラーを解決する

ウェブサイトを作成する学生は、アクセス時に一部の nginx サーバーが 504 Gateway T...

HTML 背景画像と背景色_PowerNode Java アカデミー

1. HTML 画像 <img> 1. <img> タグとその src 属性...

Windows 2019 アクティベーション チュートリアル (Office2019)

数日前、Server2019の正式版がリリースされたことを知り、面白半分でインストールしてみることに...

Linuxプロセス監視と自動再起動の簡単な実装方法

目的: Linux では、さまざまな理由でサーバー プログラムがダンプされ、ユーザーの使用に影響する...

特定の MySQL テーブルの完全データと増分データをメッセージ キューに同期する - ソリューション

目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...

HTML のボタン タグをクリックしてページにジャンプする 3 つの方法

方法1: onclickイベントを使用する <input type="button&...

MySQL 外部キー制約の詳細な説明

公式ドキュメント: https://dev.mysql.com/doc/refman/5.7/en/...