js の呼び出し、適用、バインドの違いと原則、および拡張機能の高度なアプリケーション

まえがき

面接の過程では、新たな質問がたくさん出てきて、新たな知識が増えたり、勉強で見落としていた点を発見したりすることもあります。

2 日前の面接で、面接官は、call、apply、bind の違いについて質問しました。実際には、面接官が何をもっと聞きたいのか、つまり何を拡張しているのかも理解する必要があります。

---

call

call は、すべての関数から呼び出すことができるメソッドであり、Function.prototype

function# のメソッドです。

1. ##関数を呼び出します

2. これを最初のパラメータとして変更します

3. 2 番目のパラメータの後にパラメータを渡しますパラメータ パラメータのすべての数

Case

function fn1(){
    console.log(1);
}
function fn2(){
    console.log(2);
}
fn1.call(fn2); //输出 1
fn1.call.call(fn2); //输出 2

分析:
fn1## を呼び出す出力の最初の行そして、this を fn2 の出力の 2 行目に指定します。実際、call()
の実行が重要であり、これが関係しています。 hereFunction.prototype.call() のメカニズム。 .call() の前のコード セグメントを変数として扱い、渡されたコード セグメントを this にポイントするだけです。 、fn1.call は fn2 を指すため、ここで渡される this が ## である点を除いて、fn2.call() に対して相対的になります。 #windowUse

継承メソッド

  function Father(uname,age){
      this.uname= uname;
      this.age=age;
  }
  Father.prototype={
      constructor:Father,
      sing:function(){
          console.log("唱跳rap");
      }
  }
  function Son(){
      Father.call(this,uname,age)
  }
  Son.prototype=new Father();

apply

apply も使用できます。すべての関数によって呼び出されます。メソッドは、

Function.prototype

Function

関数の呼び出し

1. ## のメソッドです。 ##これを変更します

2. パラメータ、2 番目のパラメータ以降のすべての配列パラメータを渡します

3. call の違い
   apply 2 番目のパラメータは配列であり、呼び出しは数値の形式でパラメータを渡すことです

Use

Math 関数を使用して最大値を取得します

  let arr=Array.of(2,42,56,89,1,24,56,22)
  let max=Math.max.apply(Math,arr)
  console.log(max);

• bind
  bind もすべての関数から呼び出すことができるメソッドであり、
Function.prototype

内のメソッドです。 function

これを変更します

##パラメータを渡します (2 番目のパラメータ以降のすべての数値パラメータを渡します)
Return new function
call と apply の違い

3. 最初の 2 つとの最大の違いは、関数が呼び出されず、変更後に新しい関数が返されることです。

Use

let btns=document.querySelectorAll("button")
for(let btn of btns){
    btn.onclick=function(){
        this.disabled=true;
        setTimeout(function(){
            this.disabled=false;
        }.bind(this),2000);
    }
}

上記の場合は、タイマーの

this

を変更し、関数を呼び出しません。しかし、実際には、アロー関数を使用すると、アロー関数の

this

がコンテキスト

this

に関連しているため、はるかに簡単になります。このケースは、 # を理解するのに役立つことを目的としています。 ##bindの使い方、アロー関数の書き方を下記に貼り付けます

let btns=document.querySelectorAll("button")
for(let btn of btns){
    btn.onclick=function(){
        this.disabled=true;
        setTimeout(()=>{
            this.disabled=false;
        },2000);
    }
}

推奨チュートリアル:「JSチュートリアル」

以上がjs の呼び出し、適用、バインドの違いと原則、および拡張機能の高度なアプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。