ホームページ > 記事 > ウェブフロントエンド > jqueryでのval関数のオーバーロードの実装方法（コード付き）

jqueryでのval関数のオーバーロードの実装方法（コード付き）

不言オリジナル: 2018-08-21 09:52:301487ブラウズ

この記事の内容は、jquery での val 関数のオーバーロードの実装方法 (コード付き) です。必要な方は参考にしていただければ幸いです。

いわゆるオーバーロードは、異なる数のパラメーターを持つ同じ関数のセットであり、それを使用する場合、関数名を呼び出し、パラメーターの数に応じて、異なる関数を使用することを決定できます。！しかし、後で定義された関数が同じ名前の前の関数を上書きするため、js にはオーバーロードがないことはわかっていますが、関数のオーバーロードを実装したい場合はどうすればよいでしょうか?

最初の方法:

この方法は、誰もが間違いなく理解できる比較的単純なアイデアを説明します。それは、関数内で switch ステートメントを使用し、渡されたパラメーターの数に応じて異なる case ステートメントを呼び出すことです。で、機能的にオーバーロードの効果を実現します。

このメソッドはシンプルで粗雑です

2 番目のメソッド:

function method(obj,name,fnc){
            var old = obj[name];
            console.log(old instanceof Function);
            obj[name] = function(){
                console.log(arguments.length+" "+fnc.length);
                if(arguments.length === fnc.length){
                    return fnc.apply(this,arguments);
                }else if(typeof old === "function"){
                    return old.apply(this,arguments);
                }
            }
        }
        var people = {
            values:["Zhang san","Li si"]
        };
        method(people,"find",function(){
            console.log("无参数");
            return this.values;
        })
        method(people,"find",function(firstname){
            console.log("一个参数");
            var ret = [];
            for(var i = 0;i < this.values.length;i++){
                if(this.values[i].indexOf(firstname) === 0){
                    ret.push(this.values[i])
                }
            }
            return ret;
        })
        method(people,"find",function(firstname,lastname){
            console.log("两个参数");
            var ret = [];
            for(var i = 0;i < this.values.length;i++){
                if(this.values[i] == firstname + " " + lastname){
                    ret.push(this.values[i])
                }
            }
            return ret;
        })
        console.log(people.find());
        console.log(people.find("Zhang"));

実装プロセス: 上記のコードを見てみましょう。最も重要なことは、メソッドメソッドの定義です。このメソッドの最も重要な点です。これは古いです、この古いものは本当に賢いです。この関数は、最後に呼び出されたメソッド関数を指すポインターに相当します。コードによると、js の解析順序は上から下です。

1.メソッドを解析します（最初は中身を無視します）

2.method(people,"find",function() この文が実行されると、上で定義したメソッドを実行するために戻り、その後、この時点では old は Empty です。この関数は定義されていないため、この時点では未定義です。これは、obj[name] = function() を定義した後、js が解析されるときに実行を続けます。 fnc 関数が返されることがわかります。さらに重要なのは、fnc 関数はメソッド内の変数も呼び出すことです。これは、fnc 関数の実装が呼び出されたときにのみ実装されるため、js はそう考えます。実行後は削除しないでください。そうしないと外部で削除されます。そのために使用されるものは何でも、そのままにしておいてください (ここでは、fnc 関数内の this ポインターを変更するために call 関数が使用されています)

3. さて、最初のです。 Method の使用が終わり、2 番目の文が始まります。method (people, " find",function(firstname) では、今回使用するときは、old = obj[name] を実行する必要があります。このとき、old とは何ですか?前のステートメントは定義されており、削除されていないため、これは関数です。したがって、今回の I old は、前回定義されたメソッドを指し、前回定義された obj[name] を指します。次に解析を続けます。これはクロージャであり、保持する必要があります。

4. 同様に、old は前回定義した obj[name] を指します。これもクロージャであり、保持する必要があります。 5. この時点では、[name] には実際には 3 つの obj が存在します。3 つのメソッドのメモリは削除されていないため、これで 3 つの関数の共存が実現され、old を使用してそれらをリンクすることもできます。とても賢いですね

6. people.find()を使用すると、パラメータの数が同じ場合、つまりarguments.length ===の場合、メソッドが最後に呼び出されたときに定義された関数が最初に呼び出されます。 fnc.length を指定すると実行され、別の関数を見つける必要はありません。異なる場合は、old return old.apply(this,arguments); のときに定義された関数を使用する必要があります。このメソッドは最後に呼び出されたものであるため、最後に戻ってそれを見つけます。見つかった場合は、arguments.length === の実行を続けます。fnc.length が見つからない場合は、old を再度呼び出し、上方向に検索を続けます。あなたはそれを定義しました、あなたは間違いなくそれを見つけることができますね!

要約: クロージャの原理を使用して、3 つの関数をメモリ内に共存させ、ポインタは最後に定義されたそれぞれの関数を指します。呼び出されたときに、検索する必要があるかどうかが決定されます。

フォローアップ: 上記を完了し、以下の理解を比較すると、プロトタイプとプロトタイプチェーンについてより深く理解できるようになります

var array=[]
addMethod(array,&#39;sub0&#39;,function(){
  return 0;
})
addMethod(array,&#39;sub0&#39;,function(prefix){
  console.log("prefix===>",prefix);
  return prefix[0];
})
array.sub0([1,2,3,5])  //这里是array对象拥有了sub0这样的方法，而不是Array，addMethod是继承

// 区别于方法直接作用于原型上
//例子  String的 startsWith 实现
function addstartsWithToString(){
   if (typeof String.prototype.startsWith1 != &#39;function&#39; ) {
     String.prototype.startsWith1 = function(subString){
       return this.slice(0,subString.length)==subString
     }
   }
}

addstartsWithToString();
&#39;120000&#39;.startsWith1(&#39;1&#39;)

jqueryでのval関数のオーバーロードの実装方法（コード付き）

関連記事