JavaScript の呼び出し、適用、バインドの違い

1. 呼び出し、適用、バインドの違い

電話：

関数を呼び出し、関数内の this ポインタを変更し、渡されたパラメータのリストを受け取り、関数の戻り値を返します。

fun.call(thisArg, arg1, arg2, ...)

thisArg: 関数 fun の実行時に指定された this の値

arg1、arg2、...: 追加の引数が渡されました

    var o = {
      name: 'zs'
    }
    function fun() {
      console.log(this)
    }
    fun()  //this指向window
    fun.call()  //this指向window
    fun.call(o)  //调用call方法改变了this指向o这个对象

    var o = {
      name: 'zs'
    }
    function fun(a, b) {
      console.log(this)  //调用call方法改变了this指向o这个对象
      console.log(a + b)  //3
    }

    fun.call(o, 1, 2) //传递了参数时，可以参与运算

使用シナリオ: 継承の実装

    function Father(name, age) {
      this.name = name
      this.age = age
    }
    function Son(name, age) {
      Father.call(this, name, age)
    }
    let son = new Son('zs', 18)
    console.log(son)  //Son {name: 'zs', age: 18}

申し込み：

関数を呼び出し、関数内の this ポインタを変更し、渡された配列を受け取り、関数の戻り値を返します。

fun.apply(thisArg, [argsArray])

thisArg: 関数 fun の実行時に指定された this の値

[argsArray]: 渡された値は配列に含まれている必要があります

    var o = {
      name: 'zs'
    }
    function fun(arr) {
      console.log(this)  //调用apply方法改变了this指向o这个对象
      console.log(arr)  //ls
    }

    fun.apply(o, ['ls'])

使用シナリオ: たとえば、apply を使用して、組み込みの数学オブジェクトを利用して最大値を見つけることができます。

    var arr = [1, 56, 23, 78, 64, 19]
    var max = Math.max.apply(Math, arr)
    //调用求数组里面求最大值   让this指向函数的调用者Math
    var min = Math.min.apply(Math, arr)
    console.log(`最大值是${max}`)
    console.log(`最大值是${min}`)

練る：

関数を呼び出しず、関数内の this ポイントを変更し、関数を返します (元の関数が this ポイントを変更した後の新しい関数)

 fun.bind(thisArg, arg1, arg2, ...)

thisArg: 関数 fun の実行時に指定された this の値

arg1、arg2、...: 追加の引数が渡されました

    var o = {
      name: 'andy'
    }
    function fun() {
      console.log(this)
    }
    var fn = fun.bind(o)
    fn() //调用bind方法改变了this指向o这个对象

使用シナリオ: この関数を呼び出したくないが、この点を変更したいだけの場合は、bind を使用できます。

2 秒後にこのボタンを無効にし、クリックするとこの機能を有効にするボタンがいくつかあります。

    let btns = document.querySelectorAll('button')
    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener('click', function () {
        this.disabled = true
        setTimeout(function () {
          this.disabled = false
          // 定时器里面的this指向的是window并不是按钮，这个时候就需要改变this的指向，让this指向按钮
        }.bind(this), 2000)
      })
    }

2. これが指摘する問題:

アロー関数では、 this が宣言されている領域の下にある this を指します。
グローバルスコープでは、これはウィンドウを指します
通常の関数では、これは呼び出し元を指します。
イベントバインディング。これはイベントソースを指します。
タイマー、これはウィンドウを指します
コンストラクター。インスタンス化されたオブジェクトを指します。