移動端手機驗證碼四格、六格的input實現

阿新 • • 發佈：2020-10-14

1.函式內部的this指向

這些 this 的指向，是當我們呼叫函式的時候確定的。呼叫方式的不同決定了this 的指向不同

一般指向我們的呼叫者.

2.改變函式內部 this 指向

JavaScript為我們專門提供了一些函式方法來幫我們更優雅的處理函式內部 this的指向問題,常用的有bind()、call()、apply()三種方法。

2.1 call方法

call()方法呼叫一個物件。簡單理解為呼叫函式的方式，但是它可以改變函式的 this 指向

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

應用場景: 經常做繼承.

var o = {
    name: 'andy'
}
 function fn(a, b) {
   console.log(this);
   console.log(a+b)
};
fn(1,2)// 此時的this指向的是window 執行結果為3
fn.call(o,1,2)//此時的this指向的是物件o,引數使用逗號隔開,執行結果為3

以上程式碼執行結果為:

2.2. apply方法

apply() 方法呼叫一個函式。簡單理解為呼叫函式的方式，但是它可以改變函式的 this 指向。

fun. apply (thisArg, [argsArray])

thisArg :在fun函式執行時指定的this值
argsArray :傳遞的值,必須包含在陣列裡面
返回值就是函式的返回值,因為它就是呼叫函式

應用場景: 經常跟陣列有關係

var o = {
    name: 'andy'
}
 function fn(a, b) {
   console.log(this);
   console.log(a+b)
};
fn()// 此時的this指向的是window 執行結果為3
fn.apply(o,[1,2])//此時的this指向的是物件o,引數使用陣列傳遞 執行結果為3

應用：

<script>
    var o = {
      name: 'andy'
     }

    function fn(arr) {
      console.log(this);
      console.log(arr);
     }
    fn.apply(o, ['andy']);
    // 呼叫函式 改變this指向
    // 引數必須是陣列
    // apply的主要應用 比如藉助於Math內建物件求陣列最大值
    let arr = [2, 54, 7, 34, 76];
    let max = Math.max.apply(Math, arr);
    let min = Math.min.apply(Math, arr);
    console.log(max, min);
  </script>

2.3 bind方法

bind()方法不會呼叫函式。但是能改變函式內部this 指向

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

thisArg :在fun函式執行時指定的this值
arg1 , arg2 :傳遞的其他引數
返回由指定的this值和初始化引數改造的原函式拷貝（新函式）

如果只是想改變 this 指向，並且不想呼叫這個函式的時候，可以使用bind

應用場景:不呼叫函式,但是還想改變this指向

 var o = {
 name: 'andy'
 };

function fn(a, b) {
    console.log(this);
    console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此處的f是bind返回的新函式
f();//呼叫新函式  this指向的是物件o 引數使用逗號隔開

bind應用：

        // 不呼叫函式,但是還想改變this指向
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
      this.disabled = true;
      setTimeout(function () {
        this.disabled = false; //定時器裡面的this指向的是window 
        // 使用bind方法使定時器this指向btn
       }.bind(this), 3000) //這裡的this是在定時器外部，btn事件內部，所以指向的是btn
     })