オブジェクト指向の基礎と、JS でオブジェクト指向を実装する方法について説明します。

このブログでは、オブジェクト指向の基本的な概念オブジェクトの作成方法コンストラクタで注意すべき問題など、オブジェクト指向        に関する話題を中心に書いています

目次

まずはオブジェクト指向の基本的な考え方

1. オブジェクト指向とは何ですか?

2. オブジェクト指向の3大特徴

3. オブジェクト指向開発のメリット

オブジェクトを作成する 2 つまたは 4 つの方法

1. リテラルの作成方法

2. システムの組み込みコンストラクターを呼び出します。

3. 工場機能のあり方

4. カスタム コンストラクターを作成する

3. カスタムコンストラクタで注意すべき問題点

1. 関数名の最初の文字は大文字にする必要があります

2. コンストラクタは return を記述する必要はありません

3. コンストラクタは通常の関数として使用できますか?

4. 関数内のこれは問題を示しています


まずはオブジェクト指向の基本的な考え方

1. オブジェクト指向とは何ですか?

        オブジェクト指向に触れる前に、1 つ理解する必要があります。オブジェクト指向は文法ではなく、思考、つまりプログラミング モデルであるということです。

        2 つのプログラミング モードがあります。

  • プロセス指向開発: 開発プロセスに焦点を当て、各ステップ、各変数の作成、変数間の関係、実行順序などに焦点を当て、特定の関数に特化して記述される場合がほとんどです。
  • オブジェクト指向開発: 焦点はオブジェクトにあり、物事を行うのに役立つオブジェクトが必要ですが、オブジェクト内の実装プロセスに注意を払う必要はなく、その実行結果のみが必要です。

· プロセス指向の開発:

var a=0;
a++;
a++;
alert(a)

· オブジェクト指向開発:

var num=Math.random()
console.log(num)

・上記 2 つの例を通して、プロセス指向とオブジェクト指向の開発手法の違いを理解するのは難しくありません。また、JS:Math などの関数はすべてプログラマによってオブジェクト指向形式で呼び出され、結果が得られることもわかります。

では、なぜプログラマはメソッドを直接実行し、オブジェクト名.メソッド名()のメソッドを通じて結果を取得できるのでしょうか? これには、オブジェクト指向の 3 つの主要な特徴の 1 つであるカプセル化が関係します。

2. オブジェクト指向の3大特徴

        オブジェクト指向には、カプセル化、継承、ポリモーフィズムという3 つの特徴があります。

  • カプセル化: 簡単に言うと、特定の繰り返しコードをカスタム関数に記述し、このコードが必要なときにその関数を直接呼び出すことです。
  • 継承: 関数のカプセル化に基づいて、元の関数のすべてのプロパティとメソッドを使用でき、また独自のプロパティとメソッドを持つこともできる新しい関数を作成します。
  • ポリモーフィズム: 渡されたパラメーターの数とタイプに応じて、異なる結果を返すことができます。

3. オブジェクト指向開発のメリット

  1. 初心者には向きませんが、ハイエンドです!
  2. 将来のメンテナンスを容易にするために、各関数を個別に記述します。
  3. コードの重複を減らします。

オブジェクトを作成する 2 つまたは 4 つの方法

1. リテラルの作成方法

        つまり、var を使用して変数を直接宣言し、その後中括弧を使用します。

var obj={

    "属性名":属性值,
    ...

    "方法名":function(形参列表){
        函数体
    }
}

        オブジェクト内のプロパティとメソッドにアクセスするにはどうすればよいですか?

  • オブジェクト名.プロパティ名===オブジェクト名["プロパティ名"]
  • オブジェクト名.メソッド名() === オブジェクト名["メソッド名"]()

        知らせ:

                1.存在しないプロパティやメソッドにアクセスすると、返される結果は未定義になります。

                2. 存在しないプロパティやメソッドをいつでもどこでも追加できます。

                3. オブジェクト内のすべてのものを取得したい場合は、for...in ループを使用してトラバースする必要があります。

 

2. システムの組み込みコンストラクターを呼び出します。

        JS はオブジェクト コンストラクターを提供します。

var obj=new Object()
obj.属性名="属性值"

3. 工場機能のあり方

        それはカスタム関数です。

function createObj(name,age,arr){
    var obj={}
    obj.name=name,
    obj.age=age,
    obj.material=arr
    return obj
}
createObj("xxx",11,[1,2,3,4]) 

        ファクトリ関数の使用方法はコードの再利用をサポートしており、関数がどのように実行され返されるかを気にする必要はなく、結果を取得するためにパラメーターを渡すだけで済みます。

4. カスタム コンストラクターを作成する

        つまり、方法 3 をベースに、new キーワードを使用して、関数の内部も少し変更します。

function createObj(name,age){
    this.name=name
    this.age=age
}
var obj=new createObj("xxx",18)
console.log(obj)

        new キーワードを使用すると、コンストラクターになり、関数内でオブジェクトが自動的に作成されそれが自動的に返されます呼び出し時に変数受信を使用します。

これを        関数内で使用して、コンストラクターのインスタンス化されたオブジェクトにプロパティとメソッドを追加します。

        メソッド 3 とメソッド 4 は両方ともオブジェクト指向開発モデルを形成できますが、ファクトリ関数メソッドは依然としてコンストラクターメソッドほど単純ではありません。

3. カスタムコンストラクタで注意すべき問題点

1. 関数名の最初の文字は大文字にする必要があります

        これは厳しい要件ではありませんが、仕様に沿ったものです。

function CreateObj(){}

2. コンストラクタは return を記述する必要はありません

        コンストラクタを使用するとreturn が自動的に生成されるためです。

        return が書かれている場合:

  • 戻り値が基本的なデータ型である場合、関数を呼び出す人にとっては役に立たない可能性があります。
  • 複雑なデータ型が返された場合、関数の元の内容は上書きされ、返される結果は期待したものではなくなります。

3. コンストラクタは通常の関数として使用できますか?

        通常の関数として使用できますが、最終的な結果は必要なものではない可能性があります。

  • まず、この関数には return がない、つまり戻り値がないため、外部変数を使用して受け取った場合、結果は未定義になります
  • 次に、グローバル スコープで定義されたコンストラクターで、関数内の this は window のグローバル オブジェクトを指します。つまり、コンストラクター内のthis.property name=xxxは、プロパティを window オブジェクトに追加し、値を xxx に割り当てます。そのため、このプロパティを取得したい場合は、 window.property name を実行する必要があります。

4. 関数内のこれは問題を示しています

  • コンストラクターが定義されているだけで、新しいステージが実行されていない場合、関数内の this はどこも指しません。
  • new キーワード (インスタンス化とも呼ばれます) を使用します。新しいフェーズでは、インスタンス オブジェクトはすでに生成されており、それを受け取るために変数は必ずしも必要ではないため (スタックストレージとヒープストレージの問題)、これは新しいフェーズで生成されたインスタンス化されたオブジェクトを指します。
function CreateObj(name){
    this.name=name
}
new CreateObj("xxx") //new过程===实例化过程
//此时对象已经生成了

おすすめ

転載: blog.csdn.net/txl2498459886/article/details/126795263