如何改變函數的this指向

本篇內容介紹了“如何改變函數的this指向”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

如果是函數聲明，那么函數內部的this指向全局對象或者調用該函數的對象。

箭頭函數的this綁定的是父級作用域內的this

使用call，apply，bind可以綁定this指向。其中bind是永久改變this指向并且不會立即執行。apply，call臨時改變this指向并且立即執行。

apply，call不同之處在于調用的參數形式：

call（thisArg, arg1?, arg2?, arg3?…）第一個參數代表this指向，剩下的參數就是原函數的參數。

apply（thisArg, argArray?）第一個參數代表this指向，第二個參數是以數組的形式傳遞參數。

/* bind, call, apply調用示例 */

var obj = {

x: 'obj',

getX: function（） {

// 注意這里不能使用箭頭函數

return this.x;

}

};

// 調用 obj 對象上的函數屬性， this就會綁定為obj

// 'obj'

console.log（obj.getX（））;

var x = 'window';

function target（a, b, c） {

console.log（a, b, c）;

return this.x;

}

/* bind */

// undefined undefined undefined

// 'window'

console.log（target（））;

const targetBound = target.bind（obj, 1）; // 此時targetBound就是一個改變了this指向的target

// 1 2 3

// 'obj'

console.log（targetBound（2, 3））;

/* call */

// 4 5 6

// 'obj'

console.log（target.call（obj, 4, 5, 6））;

/* apply */

// 7 8 9

// 'obj'

console.log（target.apply（obj, [7, 8, 9]））;

自定義實現call，apply，bind

這三個函數都有很強的錯誤處理功能，假如傳入的thisArg是一個基本類型，也會被使用包裝類替換，雖然不會報錯，但是不推薦這樣寫，盡量傳遞復雜類型的變量作為thisArg。

自定義實現myBind，myCall，myApply

// 先定義一個函數將任意類型都轉換成對象，用于指向this

function anyToObj（value） {

  // symbol, bigint 就不判斷了，直接在default中

  switch （typeof value） {

    case 'boolean':

      return new Boolean（value）;

    case 'number':

      return new Number（value）;

    case 'string':

      return new String（value）;

    case 'undefined':

      return this;

    case 'object':

      if （value === null） return this; // 這里的this就指向了全局對象

      return value;

    default:

      return value;

  }

}

/* myBind */

Function.prototype.myBind = function （thisArg, …argArray） {

  // 防止出現 const myBind = Function.prototype.myBind; myBind（）;

  if （typeof this !== 'function'） {

    throw new TypeError（'myBind must be called on a function'）;

  }

  const that = this; // this 就指向 f.myBind（） 的 f

  const thatArg = anyToObj（thisArg）; // 處理一下thisArg

  const myBound = function （…args） {

    // 指定唯一的鍵

    const tempKey = Symbol（'__innerFunction__'）;

    thatArg.tempKey = that; // 將 that 函數賦值給一個對象的屬性

    let ret;

    if （this instanceof myBound） {

      // 調用 myBind 之后返回的是 myBound，假如調用 new myBound（），就會進這個分支

      ret = new thatArg.tempKey（…argArray.concat（args））;

    } else {

      // 這里是調用 myBound（），這樣調用 tempKey 方法里的 this 就指向了 thatArg

      ret = thatArg.tempKey（…argArray.concat（args））;

    }

    // 不會對對象造成污染

    delete thatArg.tempKey;

    return ret;

  };

  return myBound;

};

/* myCall */

// 與 myBind 相比直接調用了

Function.prototype.myCall = function （thisArg, …argArray） {

  if （typeof this !== 'function'） {

    throw new TypeError（'myCall must be called on a function'）;

  }

  const thatArg = anyToObj（thisArg）;

  const tempKey = Symbol（'__innerFunction__'）;

  thatArg.tempKey = this;

  const ret = thatArg.tempKey（…argArray）;

  delete thatArg.tempKey;

  return ret;

};

/* myApply */

// 與 myCall 相比，第二個參數希望是數組形式，多了個 CreateListFromArrayLike 用于轉化 argArray

Function.prototype.myApply = function （thisArg, argArray） {

  if （typeof this !== 'function'） {

    throw new TypeError（'myApply must be called on a function'）;

  }

  const CreateListFromArrayLike = function （val） {

    // 同樣缺乏 bigint 的處理，直接放在 default 中

    switch （typeof val） {

      case 'string':

      case 'number':

      case 'boolean':

      case 'symbol':

        throw new TypeError（'CreateListFromArrayLike called on non-object'）;

      case 'object':

        if （Array.isArray（val）） return val;

        if （val === null） return [];

        return Array.from（val）;

      default:

        return [];

    }

  };

  // 檢測 argArray 的類型

  const tempArgArray = CreateListFromArrayLike（argArray）;

  const thatArg = anyToObj（thisArg）;

  const tempKey = Symbol（'__innerFunction__'）;

  thatArg.tempKey = this;

  const ret = thatArg.tempKey（…tempArgArray）;

  delete thatArg.tempKey;

  return ret;

};

// 這樣 myBind，myCall，myApply就完成了，下面進行測試

var obj = {

x: 'obj',

getX: function（a, b, c） {

console.log（a, b, c）;

return this.x;

}

}

var x = 'window';

// 1 2 3

// 'obj'

console.log（obj.getX（1, 2, 3））;

// target變成一個全局函數，this 指向全局對象

const target = obj.getX;

// 1 2 3

// 'window'

console.log（target（1, 2, 3））;

/* myBind */

const targetBound = target.myBind（obj, 1）;

// 1 2 3

// 'obj'

console.log（targetBound（2, 3））;

/* myCall */

// 4 5 6

// 'obj'

console.log（target.myCall（obj, 4, 5, 6））;

/* myApply */

// 7 8 9

// 'obj'

console.log（target.myApply（obj, [7, 8, 9]））;

“如何改變函數的this指向”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！