日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
前端百題斬——快速手撕Call、Apply、Bind

在百題斬js中的這些“this”指向都值得了解中已經簡要概述了call、apply、bind三個方法，這三者作用是相同的，均可以改變this指向，從而讓某對象可以調用自身不具備的方法，本節(jié)將深入理解這三者的實現原理。

寶坻網站建設公司成都創(chuàng)新互聯(lián),寶坻網站設計制作，有大型網站制作公司豐富經驗。已為寶坻上千余家提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿網站建設要多少錢，請找那個售后服務好的寶坻做網站的公司定做！

15.1 call()

15.1.1 基礎

call() 方法使用一個指定的 this 值和單獨給出的一個或多個參數來調用一個函數。其返回值是使用調用者提供的this值和參數調用該函數的返回值，若該方法沒有返回值，則返回undefined。

基本用法：

 
 
 
 
      
  
  
  
  1. function.call(thisArg, arg1, arg2, ...) 
    2.

小試牛刀

 
 
 
 
      
  
  
  
  1. function method(val1, val2) { 
    2.   
  
  
  
  2.     return this.a + this.b + val1 + val2; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. const obj = { 
    6.   
  
  
  
  6.     a: 1, 
    7.   
  
  
  
  7.     b: 2 
    8.   
  
  
  
  8. }; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. console.log(method.call(obj, 3, 4)); // 10 
    11.

15.1.2 實現

實現一個call函數，將通過以下幾個步驟：

  1. 獲取第一個參數(注意第一個參數為null或undefined時，this指向window)，構建對象
  2. 將對應函數傳入該對象中
  3. 獲取參數并執(zhí)行相應函數
  4. 刪除該對象中函數，消除副作用
  5. 返回結果
 
 
 
 
      
  
  
  
  1. Function.prototype.myCall = function (context, ...args) { 
    2.   
  
  
  
  2.     // 獲取第一個參數（注意第一個參數為null或undefined時，this指向window），構建對象 
    3.   
  
  
  
  3.     context = context ? Object(context) : window; 
    4.   
  
  
  
  4.     // 將對應函數傳入該對象中 
    5.   
  
  
  
  5.     context.fn = this; 
    6.   
  
  
  
  6.     // 獲取參數并執(zhí)行相應函數 
    7.   
  
  
  
  7.     let result = context.fn(...args); 
    8.   
  
  
  
  8.     // 消除副作用 
    9.   
  
  
  
  9.     delete context.fn; 
    10.   
  
  
  
  10.     // 返回結果 
    11.   
  
  
  
  11.     return result; 
    12.   
  
  
  
  12. } 
    13.   
  
  
  
  13. // …… 
    14.   
  
  
  
  14. console.log(method.myCall(obj, 3, 4)); // 10 
    15.

15.2 apply()

15.2.1 基礎

apply() 方法調用一個具有給定this值的函數，以及以一個數組(或類數組對象)的形式提供的參數。其返回值是指定this值和參數的函數的結果。call() 和 apply()的區(qū)別是call()方法接受的是參數列表，而apply()方法接受的是一個參數數組;

基本用法

 
 
 
 
      
  
  
  
  1. func.apply(thisArg, [argsArray]) 
    2.

小試牛刀

 
 
 
 
      
  
  
  
  1. function method(val1, val2) { 
    2.   
  
  
  
  2.     return this.a + this.b + val1 + val2; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. const obj = { 
    6.   
  
  
  
  6.     a: 1, 
    7.   
  
  
  
  7.     b: 2 
    8.   
  
  
  
  8. }; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. console.log(method.apply(obj, [3, 4])); // 10 
    11.

15.2.2 實現

apply和call的區(qū)別主要是參數的不同，所以其實現步驟的call大體類似，如下所示：

 
 
 
 
      
  
  
  
  1. Function.prototype.myApply = function (context, arr) { 
    2.   
  
  
  
  2.     context = context ? Object(context) : window; 
    3.   
  
  
  
  3.     context.fn = this; 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.     let result = arr ? context.fn(...arr) : context.fun(); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.     delete context.fn; 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.     return result; 
    10.   
  
  
  
  10. } 
    11.   
  
  
  
  11. // …… 
    12.   
  
  
  
  12. console.log(method.myApply(obj, [3, 4])); // 10 
    13.

15.3 bind()

15.3.1 基礎

bind() 方法創(chuàng)建一個新的函數，在 bind() 被調用時，這個新函數的 this 被指定為 bind() 的第一個參數，而其余參數將作為新函數的參數，供調用時使用。該函數的返回值是一個原函數的拷貝，并擁有指定的this值和初始參數。

基本用法

 
 
 
 
      
  
  
  
  1. function.bind(thisArg[, arg1[, arg2[, ...]]]) 
    2.

小試牛刀

 
 
 
 
      
  
  
  
  1. function method(val1, val2) { 
    2.   
  
  
  
  2.     return this.a + this.b + val1 + val2; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. const obj = { 
    6.   
  
  
  
  6.     a: 1, 
    7.   
  
  
  
  7.     b: 2 
    8.   
  
  
  
  8. }; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. const bindMethod = method.bind(obj, 3, 4); 
    11.   
  
  
  
  11. console.log(bindMethod()); // 10 
    12.

15.3.2 實現

實現一個bind函數相對較復雜一些，應該注意以下幾點：

  1. 能夠改變this指向;
  2. 返回的是一個函數;
  3. 能夠接受多個參數;
  4. 支持柯里化形式傳參 fun(arg1)(arg2);
  5. 獲取到調用bind()返回值后，若使用new調用(當做構造函數)，bind()傳入的上下文context失效。
 
 
 
 
      
  
  
  
  1. Function.prototype.myBind = function (context, ...args) { 
    2.   
  
  
  
  2.     if (typeof(this) !== 'function') { 
    3.   
  
  
  
  3.         throw new TypeError('The bound object needs to be a function'); 
    4.   
  
  
  
  4.     } 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.     const self = this; 
    7.   
  
  
  
  7.     // 定義一個中裝函數 
    8.   
  
  
  
  8.     const fNOP = function() {}; 
    9.   
  
  
  
  9.     const fBound = function(...fBoundArgs) { 
    10.   
  
  
  
  10.         // 利用apply改變this指向 
    11.   
  
  
  
  11.         // 接受多個參數+支持柯里化形式傳參 
    12.   
  
  
  
  12.         // 當返回值通過new調用時，this指向當前實例 （因為this是當前實例，實例的隱士原型上有fNOP的實例（fnop）；fnop instanceof fNOP為true） 
    13.   
  
  
  
  13.         return self.apply(this instanceof fNOP ? this : context, [...args, ...fBoundArgs]); 
    14.   
  
  
  
  14.     } 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.     // 將調用函數的原型賦值到中轉函數的原型上 
    17.   
  
  
  
  17.     if (this.prototype) { 
    18.   
  
  
  
  18.         fNOP.prototype = this.prototype; 
    19.   
  
  
  
  19.     } 
    20.   
  
  
  
  20.     // 通過原型的方式繼承調用函數的原型 
    21.   
  
  
  
  21.     fBound.prototype = new fNOP(); 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23.     return fBound; 
    24.   
  
  
  
  24. } 
    25.

本文轉載自微信公眾號「執(zhí)鳶者」，可以通過以下二維碼關注。轉載本文請聯(lián)系執(zhí)鳶者公眾號。


文章題目：前端百題斬——快速手撕Call、Apply、Bind
標題URL：http://www.5511xx.com/article/dphssji.html