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でマウントされたディレクトリが読み書きできない問題を解決する

次のコマンドを使用してコンテナを作成し、ローカルの /home/dock/Downloads ディレ...

vscode で Prettier Code プラグインを使用する詳細なチュートリアル

なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...

入力タイプ=テキスト値=str を使用するための不完全なソリューション

今日、非常に奇妙な問題に遭遇しました。次のコードを見てください。 SimpleDateFormat ...

バックエンド管理システムを構築するためのvue-element-adminの実装手順

最近、カンファレンスの健康申告システムに取り組んでいたとき、バックエンドを構築する必要があり、vue...

Linux で MySQL スケジュールタスクを実装する方法

前提: ストアド プロシージャは、毎日午後 10 時から午前 5 時まで 10 分ごとに実行されます...

JSが5つ星の賞賛を獲得

この記事では、5つ星の評価を獲得するためのJSの具体的なコードを参考までに共有します。具体的な内容は...

要素のフォーム要素の使用の概要

フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...

Linux のバックグラウンドで & と nohup を使用する方法

ターミナルやコンソールで作業しているときは、メールを読むなど、もっと重要な作業があるかもしれないので...

Alibaba Cloud ECS サーバーの開始プロセス (初心者必読のチュートリアル)

1. Alibaba Cloudは、個人のニーズに応じて適切なクラウドサーバーを選択し、CPU、メ...

Tkinterはjsキャンバスを使用してグラデーションカラーを実現します

目次1. RGBを使用して色を表す2. Tkinter キャンバスコンポーネント3. グラデーション...

Vueプロジェクトをパッケージ化してリリースする手順

目次1. 開発環境から本番環境への移行2. 統一されたリクエストパスを設定する3. パッケージ化コマ...

データベースを削除せずにMySQLのすべてのテーブルを素早く削除する方法

この記事では、例を使用して、データベースを削除せずに MySQL 内のすべてのテーブルをすばやく削除...

mysql8.0.23 Linux (centos7) のインストールの完全かつ詳細なチュートリアル

目次リレーショナルデータベースとは何ですか?非リレーショナルデータベースとは何ですか? MySQL ...

複数のサーバーにNginxリバースプロキシを実装する方法

Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...