徹底弄懂bind,apply,call三者的區別 (轉)

来源:https://www.cnblogs.com/jane-panyiyun/archive/2022/08/29/16637780.html
-Advertisement-
Play Games

為什麼要改變this指向? 我們知道bind,call,apply的作用都是用來改變this指向的,那為什麼要改變this指向呢?請看下麵的例子: var name="lucy"; let obj={ name:"martin", say:function () { console.log(this ...


為什麼要改變this指向?

我們知道bind,call,apply的作用都是用來改變this指向的,那為什麼要改變this指向呢?請看下麵的例子:

var name="lucy";
let obj={
 name:"martin",
 say:function () {
 console.log(this.name);
 }
};
obj.say(); //martin,this指向obj對象
setTimeout(obj.say,0); //lucy,this指向window對象

可以觀察到,正常情況下 say 方法中的 this 是指向調用它的 obj 對象的,而定時器 setTimeout 中的 say 方法中的 this 是指向window對象的(在瀏覽器中),這是因為 say 方法在定時器中是作為回調函數來執行的,因此回到主棧執行時是在全局執行上下文的環境中執行的,但我們需要的是 say 方法中 this 指向obj對象,因此我們需要修改 this 的指向。

apply方法

apply接受兩個參數,第一個參數是this的指向,第二個參數是函數接受的參數,以數組的形式傳入,且當第一個參數為null、undefined的時候,預設指向window(在瀏覽器中),使用apply方法改變this指向後原函數會立即執行,且此方法只是臨時改變thi指向一次。

日常用法:改變this指向

示例:

回調函數綁定this指向:

var name="martin";
var obj={
 name:"lucy",
 say:function(year,place){
 console.log(this.name+" is "+year+" born from "+place);
 }
};
var say=obj.say;
setTimeout(function(){
 say.apply(obj,["1996","China"])
} ,0); //lucy is 1996 born from China,this改變指向了obj
say("1996","China") //martin is 1996 born from China,this指向window,說明apply只是臨時改變一次this指向

 

小技巧:改變參數傳入方式

示例:

求數組中的最大值:

var arr=[1,10,5,8,3];
console.log(Math.max.apply(null, arr)); //10

  

其中Math.max函數的參數是以參數列表,如:Math.max(1,10,5,8,3)的形式傳入的,因此我們沒法直接把數組當做參數,但是apply方法可以將數組參數轉換成列表參數傳入,從而直接求數組的最大值。

call方法

call方法的第一個參數也是this的指向,後面傳入的是一個參數列表(註意和apply傳參的區別)。當一個參數為null或undefined的時候,表示指向window(在瀏覽器中),和apply一樣,call也只是臨時改變一次this指向,並立即執行。

示例:

var arr=[1,10,5,8,3];
console.log(Math.max.call(null,arr[0],arr[1],arr[2],arr[3],arr[4])); //10

  

採納以參數列表的形式傳入,而apply以參數數組的形式傳入。

bind方法

bind方法和call很相似,第一參數也是this的指向,後面傳入的也是一個參數列表(但是這個參數列表可以分多次傳入,call則必須一次性傳入所有參數),但是它改變this指向後不會立即執行,而是返回一個永久改變this指向的函數。

示例:

var arr=[1,10,5,8,12];
var max=Math.max.bind(null,arr[0],arr[1],arr[2],arr[3])
console.log(max(arr[4])); //12,分兩次傳參

  

可以看出,bind方法可以分多次傳參,最後函數運行時會把所有參數連接起來一起放入函數運行。

實現bind方法(面試題):

簡易版

Function.prototype.bind=function () {
 var _this=this;
 var context=arguments[0];
 var arg=[].slice.call(arguments,1);
 return function(){
 arg=[].concat.apply(arg,arguments);
 _this.apply(context,arg);
 }
 };

  

完美版

//實現bind方法
 Function.prototype.bind = function(oThis) {
 if (typeof this !== 'function') {
 // closest thing possible to the ECMAScript 5
 // internal IsCallable function
 throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
 }
 var aArgs = Array.prototype.slice.call(arguments, 1),
 fToBind = this,
 fNOP = function() {},
 fBound = function() {
 // this instanceof fBound === true時,說明返回的fBound被當做new的構造函數調用
 return fToBind.apply(this instanceof fBound
 ? this
 : oThis,
 // 獲取調用時(fBound)的傳參.bind 返回的函數入參往往是這麼傳遞的
 aArgs.concat(Array.prototype.slice.call(arguments)));
 };
 // 維護原型關係
 if (this.prototype) {
 // 當執行Function.prototype.bind()時, this為Function.prototype 
 // this.prototype(即Function.prototype.prototype)為undefined
 fNOP.prototype = this.prototype; 
 }
 // 下行的代碼使fBound.prototype是fNOP的實例,因此
 // 返回的fBound若作為new的構造函數,new生成的新對象作為this傳入fBound,新對象的__proto__就是fNOP的實例
 fBound.prototype = new fNOP();
 return fBound;
 };
 var arr=[1,11,5,8,12];
 var max=Math.max.bind(null,arr[0],arr[1],arr[2],arr[3]);
 console.log(max(arr[4])); //12

  

apply,call,bind三者的區別

  • 三者都可以改變函數的this對象指向。
  • 三者第一個參數都是this要指向的對象,如果如果沒有這個參數或參數為undefined或null,則預設指向全局window。
  • 三者都可以傳參,但是apply是數組,而call是參數列表,且apply和call是一次性傳入參數,而bind可以分為多次傳入。
  • bind 是返回綁定this之後的函數,便於稍後調用;apply 、call 則是立即執行

 

 

ref: https://zhuanlan.zhihu.com/p/82340026

你好,我是Jane,如果萬幸對您有用,請幫忙點下推薦,謝謝啦~另外,咱們快閃記憶體見哦~
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 摘要:SQL語句解析完成後被解析成Query結構,在進行優化時是以Query為單位進行的,Query的優化分為基於規則的邏輯優化(查詢重寫)和基於代價的物理優化(計劃生成),主入口函數為subquery_planner。subquery_planner函數接收Query(查詢樹),返回一個Plan( ...
  • ClickHouse 是一個真正的列式資料庫管理系統(DBMS)。在 ClickHouse 中,數據始終是按列存儲的,包括矢量(向量或列塊)執行的過程。只要有可能,操作都是基於矢量進行分派的,而不是單個的值,這被稱為«矢量化查詢執行»,它有利於降低實際的數據處理開銷。 ...
  • 一、介紹 在介紹 MongoDB 之前,我先介紹一下業務開發的時候遇到的痛點,以便大家對它有一個更加清晰的認識! 最近在用資料庫存儲數據的時候發現這麼一個坑,例如從消息隊列中監聽消息的時候,原來的做法是將監聽的消息數據存儲在資料庫,以便好對異常消息數據進行追溯,消息內容使用text類型存儲,起初因為 ...
  • 首發微信公眾號:SQL資料庫運維 原文鏈接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1&sn=450e9e94fa709b5eeff0de371c62072b&chksm=ea37536cdd40da7 ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 事件起因:在測試一個數據遷移工具時,源端oracle19c數據遷移到目標端mysql8.0,提示遷移目標端 Unknown database 'SBTE ...
  • 興業證券優理寶App聯合華為HMS Core,集成HMS Core統一掃碼服務,在提升掃碼成功率的同時,還支持C端用戶用手機端APP掃描手錶端二維碼,實現行情在手機與手錶間跨終端流轉,行情信息,抬腕可見,為用戶提供貼心金融服務。 為保持品牌色調一致性,興業證券在活動中會使用金色二維碼,在接入HMS ...
  • 作用域的概念 同級作用域 在一個作用域中聲明相同名稱的變數會發生變數名衝突的問題。假如在作用域 A 中聲明一個變數 a,作用域 B 也聲明一個變數 a,兩個作用域的變數都互不影響。 // 作用域 A { let a = 0; console.log(a); } // 作用域 B { let a = ...
  • 1 diff演算法到底是什麼? diff演算法是一種通過同層的樹節點進行比較的高效演算法,它可以不用頻繁操作DOM,而是選用虛擬DOM節點操作,說人話就是專門用來處理虛擬DOM節點的。 2 操作流程? 為了更好理解Vue的diff演算法,請先看一位B站大佬精心製作的 動畫演示。 通過上面視頻可以很好理解di ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...