JavaScriptの継承-コンストラクターの継承を借りる

目次

1.ナレッジレビュー:

 次に、コンストラクターを使用して継承を実現します。

 3つ目は、コンストラクターを借用する問題です。


1.ナレッジレビュー:

新しい知識を学ぶ前にcall、apply、bindメソッドの使用法を簡単に確認しましょう

呼び出しと適用の共通点は、関数の実行のコンテキストを変更し、あるオブジェクトのメソッドを別のオブジェクトに渡して実行する機能です。これはすぐに実行されます。bind()メソッドは新しい関数を作成し、呼び出し時にこれを設定します。キーは指定された値です。

1.呼び出しメソッドの使用:

a:構文:

Function.call(obj、[param1 [、param2 [、…[、paramN]]]])

b:注意点:

(1)callメソッドは関数でなければなりません。

(2)呼び出しの最初のパラメーターはオブジェクトです。Functionの呼び出し元は、このオブジェクトを指します。渡されない場合、デフォルトでグローバルオブジェクトウィンドウになります。

(3)2番目のパラメータから、任意の数のパラメータを受け取ることができます。各パラメーターは、対応する位置の関数パラメーターにマップされます。ただし、すべてのパラメーターが配列として渡された場合、それらは関数全体に対応する最初のパラメーターにマップされ、その後、パラメーターは空になります。

c:コード例:

    var person = {
        fullName:function (city,country) {
            return this.firstName+" "+this.lastName+","+city+","+country;
        }
    };
    var person1 = {
        firstName:"1",
        lastName:"2"
    };
    var person2 = {
        firstName:"3",
        lastName:"4"
    };

    var x = person.fullName.call(person1,"HeNan","China");

    console.log(x);

2.適用方法の使用:

a:構文:

Function.apply(obj [、argArray])

 b:注意点:

(1)呼び出し元は関数である必要があり、2つのパラメーターのみを受け取ります。最初のパラメーターの規則は呼び出しと同じです。

(2)2番目のパラメーターは、配列またはクラス配列である必要があります。これらはクラス配列に変換され、関数に渡され、関数の対応するパラメーターにマップされます。これは、callとapplyの非常に重要な違いでもあります。

c:コード例:

    var person = {
        fullName:function (city,country) {
            return this.firstName+" "+this.lastName+","+city+","+country;
        }
    };
    var person1 = {
        firstName:"1",
        lastName:"2"
    };
    var person2 = {
        firstName:"3",
        lastName:"4"
    };
    
    var y = person.fullName.apply(person2,["HeNan","China"]);
    console.log(y);

 3. bindメソッドの使用:bind()最も簡単な使用法は、この関数がどのように呼び出されても同じこの値を持つように関数を作成することです。

a:構文:

Function.bind(thisArg [、arg1 [、arg2 [、...]]])

b:注意点:

bindメソッドの戻り値は関数であり、実行する前に後で呼び出す必要があります。

 c:コード:

    function add(a,b){
        console.log(a+b);
    }
    function sub(a,b) {
        console.log(a-b);
    }

    add.bind(sub,5,3)();

 次に、コンストラクターを使用して継承を実現します。

1.プロトタイプに参照型の値を含めることによって引き起こされる問題を解決するプロセスでは、借用コンストラクター(偽造オブジェクト/クラシック継承)と呼ばれる手法が使用されました。基本的な考え方:サブタイプコンストラクター内でスーパータイプコンストラクターを呼び出します。

    function SuperType() {
        this.colors = ["red","blue","green"];
    }
    function SubType() {
//        继承了SuperType
        SuperType.call(this);
    }

    var instance1 = new SubType();
    instance1.colors.push("black");
    console.log(instance1.colors);

    var instance2 = new SubType();
    console.log(instance2.colors);

 

 説明:

コード内のコメントは、スーパータイプコンストラクターを借用しています。call()メソッド(またはapply()メソッド)を使用して、関数thisのポイントを変更します。実際には、新しく作成された関数SubTypeインスタンスのコンテキストでSuperTypeコンストラクターを呼び出しました。このようにして、SuperType()関数で定義されたすべてのオブジェクト初期化コードが新しいSubTypeオブジェクトで実行されます。その結果、SubTypeの各インスタンスには、colors属性の独自のコピーがあります。

2.コンストラクターの利点を借りる:サブタイプコンストラクターのスーパータイプコンストラクターにパラメーターを渡すことができます。

    function SuperType2(name) {
        this.name = name;
    }

    function SubType2(){
//        继承了SyperType2,同时还传递了参数
        SuperType2.call(this,"萝卜头");
//        实例属性
        this.age = 29;
    }

    var instance2 = new SubType2();

   console.log(instance2.name);
   console.log(instance2.age);

 上記のコードのSuperType2は、属性に直接割り当てられる1つのパラメーター名のみを受け入れます。SuperType2コンストラクターがSubType2コンストラクター内で呼び出される場合、それは実際にはSubType2インスタンスのname属性です。

 3つ目は、コンストラクターを借用する問題です。

コンストラクターパターンの問題を回避することは不可能です。メソッドはコンストラクターで定義されているため、関数の再利用について話す方法はありません。スーパータイプのプロトタイプで定義されたメソッドもサブタイプからは見えないため、すべてのタイプでコンストラクターモードしか使用できません。


注:内容については、「JavaScriptAdvancedProgramming」を参照してください。

おすすめ

転載: blog.csdn.net/weixin_43690348/article/details/112979265