JavaScriptカスタムオブジェクトメソッドの概要

JavaScriptカスタムオブジェクトメソッドの概要

1. オブジェクトを使用してオブジェクトを作成する

<スクリプト>
        // オブジェクトを作成する var stu = new Object()
        // オブジェクトに属性 stu.name='jibu' を追加します
        stu[9527] = 'jibu' // 特殊な属性名は括弧を使用する // オブジェクトにメソッドを追加する stu.study = function(){
            console.log('学習')
        }
        // オブジェクトのプロパティとメソッドを呼び出す console.log(stu.name,stu['name'])
        //メソッド stu.study() を呼び出す
    </スクリプト>

2. コンストラクタを使用してオブジェクトを作成する

<スクリプト>
        // 1. オブジェクトを作成するためのコンストラクタを定義する function Student() {
            // オブジェクトプロパティ this.name = 'jibu'
            年齢 = 18
                //オブジェクトメソッド this.study = function() {
                console.log('学習中...')
            }
        }
        // 2. コンストラクターを呼び出してオブジェクトを作成します var stu = new Student()
        console.log(stu.name)
        勉強()

        // パラメータ付きのコンストラクタを定義する // オブジェクトを作成するためのコンストラクタを定義する function Student(name, age) {
            // オブジェクトプロパティ this.name = name
            this.age = 年齢
                //オブジェクトメソッド this.study = function() {
                console.log('学習中...')
            }
        }
        //コンストラクタを呼び出してオブジェクトを作成します var stu = new Student('tom', 18)
        console.log(stu.name)
        勉強()
    </スクリプト>

3つの文字オブジェクト

var stu = {
            名前: 'jibu',
            年齢: 100,
            「特殊変数」: 1111
            研究: 関数() {
                console.log('学習中')
            },
            表示: 関数() {
                console.log('私の名前は' + this.name, '年齢:' + this.age)
            }
        }
        console.log(stu.name)
        console.log(stu['特殊変数']

このキーワード4つ

これは現在のオブジェクトを表します

  • 関数内のthisは、関数を呼び出す現在のオブジェクトを参照します。
  • thisイベントバインディングの匿名コールバック関数で、イベントソースを示します。
  • コンストラクタ内のこれは、将来new作成される現在のオブジェクトを表します。

例1

<スクリプト>
        // 関数内の this は関数の呼び出し元を参照します var a = 1

        関数f1() {
            変数a = 2
            console.log(これ)
                // ローカル変数とグローバル変数が同じ名前を持つ問題を解決する console.log('local variable: ', a)
            console.log('グローバル変数: ', window.a)
            console.log('グローバル変数: ', this.a)

        }
        f1()
    </スクリプト>

例2

 <スクリプト>
        window.onload = 関数() {
            document.querySelector('#btn').onclick = 関数() {
                console.log(this) //ここで、これはイベントをトリガーするイベント ソースのターゲット要素を表します}
        }
    </スクリプト>
</head>

<本文>
    <button id="btn">ボタン</button>
</本文>

例3

<スクリプト>
        関数 学生(名前, 年齢) {
            // コンストラクタ内の this は、将来新しく作成される現在のオブジェクトを表します。this.name = name
            this.age = 年齢
        }
    </スクリプト>

5つの基本データ型と参照データ型

基本的なデータ型

文字列、数値、ブール値、未定義、null

<スクリプト>
        変数a = 5
        var b = a
        8 です
        コンソールログ(a)
        コンソールログ(b)
    </スクリプト>

変数abを参照する変数bを作成することは、コピーを割り当てることと同等であり、変更は互いに影響しません。

参照データ型

オブジェクト、配列、学生…

<スクリプト>
        var stu1 = {
            名前: 'トム',
            年齢: 18
        }
        var stu2 = stu1; // stu1のアドレスをstu2に割り当てる
        stu1.name = 'アリス'
        コンソールログ(stu1.name)
        コンソールログ(stu2.name)
    </スクリプト>

ここでは、操作は基本データ型と同じですが、結果は異なり、互いに影響し合うことがわかります。
これは記憶の問題に関係している

メモリには 2 つの種類があります。

スタックメモリ:

基本データ型の変数と参照データ型の変数への参照はスタックメモリに格納され、アクセス速度は比較的高速です。

ヒープメモリ:

参照データ型の変数はヒープメモリに格納されるため、アクセス速度が遅い

参照データ型の変数はスタック (メモリ アドレス) に格納され、そのオブジェクトはヒープに格納されます。Stu1 を参照する Stu2 は実際には同じメモリ アドレス参照であり、すべての変更が行われた場合の結果は同じです。

基本データ型の変数と値はスタックに格納されます。a の値は b に与えられ、すべての変更は互いに影響しません。

6つの閉鎖

閉鎖をどう理解するか?

  • 関数は関数内で定義されます。この関数はクロージャと呼ばれます。
  • クロージャは、他の関数内の変数を読み取ることができる関数です。
  • クロージャは、スコープ内で定義され、そのスコープ内のすべての変数にアクセスできる関数です。
  • 機能の面では、クロージャは関数の内部機能と外部機能を接続するブリッジです。

クロージャの使用

  • 関数内では、関数内の変数を読み取ることができます
  • 変数の値をメモリに保存する

クロージャの使用

   <スクリプト>
        関数add(){
            (var i = 1; i <= 5; i++) の場合 {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.onclick = 関数() {
                    console.log('クリック' + i + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </スクリプト>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 300px;
            境界線: 1px 実線 #ccc;
        }
    </スタイル>
</head>

<本文>
    <button onclick="add()">要素を追加</button>
    <ul id="myul">

    </ul>
</本文>



要素ボタンがクリックされるとループが終了するため、取得されるのは最後の要素のみであり、これがクロージャを形成します。

解決策1:

関数内で定義するのではなく、関数の外で定義し、関数内で呼び出します。

<スクリプト>
        関数add(){
            (var i = 1; i <= 5; i++) の場合 {
                var li = createLi(i)
                document.getElementById('myul').appendChild(li)
            }
        }

        関数createLi(num) {
            var li = document.createElement('li')
            li.innerText = 'li' + 数値
            li.onclick = 関数() {
                console.log('クリック' + num + 'li')
            }
            戻る
        }

解決策2:

変数を格納するために要素に属性を追加する

<スクリプト>
        関数add(){
            (var i = 1; i <= 5; i++) の場合 {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.num = i; //データを保存 li.onclick = function() {
                    console.log('クリック' + this.num + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </スクリプト>

解決策3:

letを使った変数の定義

ブロックレベルスコープでは、変数が宣言されている領域は外部要因の影響を受けず、一時的な死と呼ばれます。

<スクリプト>
        関数add(){
            (i = 1; i <= 5; i++ とします) {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.onclick = 関数() {
                    console.log('クリック' + i + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </スクリプト>

7つのJSON

JavaScript Object NotationJavaScriptオブジェクトを表すために使用される軽量のデータ交換形式です。プログラミング言語に依存しないテキスト形式を使用し、書き込みや読み取りが簡単で、解析や生成も簡単です。

基本的な使い方

{“屬性名”:“屬性值”,“屬性名”:“屬性值”…}

知らせ:

  • Json構造はJsonオブジェクトと呼ばれる一連のキーと値のペアで構成されています。
  • 属性名には二重引用符を使用する
  • Json とオブジェクト リテラルの違い: JSON 属性では二重引用符を使用する必要がありますが、オブジェクト リテラルでは二重引用符が不要です。

属性に準拠する

<スクリプト>
        //複合属性値はJSONオブジェクトです var user = {
            "名前": {
                "firstName": "ji",
                "姓": "bu"
            },
            「年齢」: 100
        }
        console.log(ユーザー名.firstName)
    </スクリプト>

Jsonオブジェクトのコレクション

<スクリプト>
        //複合属性値はJSONオブジェクトです var user = [{
                    "id": 1,
                    "firstName": "ji",
                    "姓": "bu"
                }, {
                    "id": 1,
                    "firstName": "ji",
                    "姓": "bu"
                }, {
                    "id": 1,
                    "firstName": "ji",
                    "姓": "bu"
                },

            ]
            //ループ for (var i = 0; i < user.length; i++) {
            コンソールログ(ユーザー[i])
        }
    </スクリプト>

JSON操作

 <スクリプト>
        //JSonオブジェクトを文字列に変換する var stu = {
            "id": 1,
            「名前」:「治部」
        }
        console.log(typeof stu)
        var str = JSON.stringify(stu);
        console.log(文字列型)


        // 文字列をJSONに変換する
        var str = '{"id": 1,"name": "jibu"}'
        console.log(文字列型)

        var obj = JSON.parse(str)
        console.log(obj 型)
    </スクリプト>



JavaScriptカスタム オブジェクトに関するこの記事はこれで終わりです。JavaScript カスタム オブジェクトに関するより詳しい情報については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript のオブジェクトを理解する
  • Javascript のオブジェクトの詳細な説明
  • JavaScriptオブジェクトの詳細な概要
  • JS でオブジェクト属性が存在するかどうかを判断する 5 つの方法
  • JavaScriptはオブジェクトの不要なプロパティを削除します
  • springboot post インターフェースが json を受け入れる場合、それがオブジェクトに変換されると、プロパティはすべて null になります。
  • JavaScript でよく使われる 5 つのオブジェクト
  • 複雑なJSON文字列をJavaのネストされたオブジェクトに変換する実装
  • JavaScriptオブジェクトの追加、削除、変更、クエリのアプリケーションと例を理解する

<<:  HTMLウェブページの基本概念の簡単な分析

>>:  Hタグの定義と注意事項について簡単に説明します

推薦する

MySQL のフィールドに一意のインデックスを追加および削除する方法

1. PRIMARY KEY(主キーインデックス)を追加するmysql>ALTER TABLE...

入力ボックスのプレースホルダーテキストのデフォルトの色を変更する -webkit-input-placeholder メソッド

HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...

W3C チュートリアル (4): W3C XHTML アクティビティ

HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...

JSでHTML本文のスタイルを変更する

目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...

HTMLページ作成に関する私の経験の簡単な要約

Word of Mouth に入社して 3 ~ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュ...

サブクエリ最適化における MySQL 選択の実装

以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...

Dockerは単一のイメージを使用して複数のポートにマッピングします

必要:公式サイトのリソースサーバーは確かに1つのインスタンスでは使えず、複数のインスタンスを一緒に使...

CSSは半透明の境界と複数の境界のシーン分析を実現します

シナリオ 1:半透明の境界線を実現するには: CSS スタイルのデフォルトの動作により、背景色はコン...

WindowsとLinux間でファイルを転送する方法

WindowsとLinux間のファイル転送(1)WinSCPを使用して、WindowsファイルをLi...

LinuxカーネルマクロContainer_Ofの詳細な説明

目次1. 構造体はメモリにどのように保存されますか? 2. container_ofマクロ3. 型4...

アニメーションの再生と一時停止を制御するための CSS のヒント (非常に実用的)

今日は、CSS を使用してアニメーションの再生と一時停止を制御する非常に簡単なトリックを紹介します。...

mysql8.0.19 でパスワードを忘れた場合の完璧な解決策

おすすめの読み物: MySQL 8.0.19 は、間違ったパスワードを 3 回入力するとアカウント ...

Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル

1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...

VueのVuexの4つの補助機能について

目次1. 補助機能2. 例1. mapState と mapGetters 2. mapMutati...

Docker イメージのプルとタグ操作 pull | tag

Fabric プロジェクトのソースコードを読み直してみたところ、Docker の部分でよくわからな...