本篇內(nèi)容介紹了“如何改變函數(shù)的this指向”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司主營寧河網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā),寧河h5小程序開發(fā)搭建,寧河網(wǎng)站營銷推廣歡迎寧河等地區(qū)企業(yè)咨詢

如果是函數(shù)聲明，那么函數(shù)內(nèi)部的this指向全局對象或者調(diào)用該函數(shù)的對象。

箭頭函數(shù)的this綁定的是父級作用域內(nèi)的this

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

apply，call不同之處在于調(diào)用的參數(shù)形式：

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

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

/* bind, call, apply調(diào)用示例 */

var obj = {

x: 'obj',

getX: function（） {

// 注意這里不能使用箭頭函數(shù)

return this.x;

}

};

// 調(diào)用 obj 對象上的函數(shù)屬性， 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]））;

自定義實現(xiàn)call，apply，bind

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

自定義實現(xiàn)myBind，myCall，myApply

// 先定義一個函數(shù)將任意類型都轉(zhuǎn)換成對象，用于指向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） {

  // 防止出現(xiàn) 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 函數(shù)賦值給一個對象的屬性

    let ret;

    if （this instanceof myBound） {

      // 調(diào)用 myBind 之后返回的是 myBound，假如調(diào)用 new myBound（），就會進(jìn)這個分支

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

    } else {

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

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

    }

    // 不會對對象造成污染

    delete thatArg.tempKey;

    return ret;

  };

  return myBound;

};

/* myCall */

// 與 myBind 相比直接調(diào)用了

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 相比，第二個參數(shù)希望是數(shù)組形式，多了個 CreateListFromArrayLike 用于轉(zhuǎn)化 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就完成了，下面進(jìn)行測試

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變成一個全局函數(shù)，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]））;

“如何改變函數(shù)的this指向”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

新聞標(biāo)題：如何改變函數(shù)的this指向
網(wǎng)站URL：http://www.rwnh.cn/article18/ghcpdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、網(wǎng)站內(nèi)鏈、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、定制開發(fā)、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)