web前端開發this指向問題

? 函數內部中的 this 指向誰,不是在函數定義時決定的,而是在函數第一次調用并執行的時候決定的

1. call 方法

語法:函數名.call(調用者, 參數1, …)
作用:函數被借用時,會立即執行,并且函數體內的this會指向借用者或調用者

function fn(name, age) {
? ? this.name = name;
? ? this.age = age;
}
const obj = {}
// 經過call,this指向obj,obj開始有name、age屬性
fn.call(obj, '李四', 100)
// 以下this均指向window,name:undefined,age:undefined
fn.call()
fn.call(null)
fn.call(undefined)
結果:普通函數的this指向window,利用call方法將this指向了obj

2. apply方法

語法:函數名.apply(調用者, [參數, …])
作用:函數被借用時,會立即執行,并且函數體內的this會指向借用者或調用者

function fn(name, age) {
? ? this.name = name;
? ? this.age = age;
}
const obj = {}
// 經過apply,this指向obj,obj開始有name、age屬性
fn.apply(obj, ['李四', 100])
// 以下this均指向window,name:undefined,age:undefined
fn.apply()
fn.apply(null)
fn.apply(undefined)

結果:普通函數的this指向window,利用apply方法將this指向了obj

3. bind方法

語法:函數名.bind(調用者, 參數, …)
作用:函數被借用時,不會立即執行,而是返回一個新的函數。需要自己手動調用新的函數來改變this指向

function fn(name, age) {
? ? this.name = name;
? ? this.age = age;
}
const obj = {}
// const newFn = fn.bind(obj, '李四', 100)
// newFn()
fn.bind(obj, '李四', 100)()

結果:普通函數的this指向window,利用bind方法將this指向了obj

💤總結:
相同點: 三者都可以把一個函數應用到其他對象身上,注意不是自身對象
不同點:
○ call,apply是直接執行函數調用。bind是綁定,執行需要再次調用。
○ call,bind接收逗號分隔的無限個參數列表;apply接收數組作為參數。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/696153.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/696153.shtml
英文地址,請注明出處:http://en.pswp.cn/news/696153.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Facebook Horizon:探索虛擬現實中的社交空間

隨著科技的不斷進步,虛擬現實(VR)技術正成為社交互動和娛樂體驗的新前沿。在這個數字時代,Facebook作為全球最大的社交媒體平臺之一,正在引領虛擬社交的新時代,其推出的虛擬社交平臺Facebook Horizon成為了…

Tomcat線程池原理(下篇:工作原理)

文章目錄 前言正文一、執行線程的基本流程1.1 JUC中的線程池執行線程1.2 Tomcat 中線程池執行線程 二、被改造的阻塞隊列2.1 TaskQueue的 offer(...)2.2 TaskQueue的 force(...) 三、總結 前言 Tomcat 線程池,是依據 JUC 中的線程池 ThreadPoolExecutor 重新自定義…

深入理解C語言(5):程序環境和預處理詳解

文章主題:程序環境和預處理詳解🌏所屬專欄:深入理解C語言📔作者簡介:更新有關深入理解C語言知識的博主一枚,記錄分享自己對C語言的深入解讀。😆個人主頁:[?]的個人主頁&#x1f3c4…

Imagewheel私人圖床搭建結合內網穿透實現無公網IP遠程訪問教程

文章目錄 1.前言2. Imagewheel網站搭建2.1. Imagewheel下載和安裝2.2. Imagewheel網頁測試2.3.cpolar的安裝和注冊 3.本地網頁發布3.1.Cpolar臨時數據隧道3.2.Cpolar穩定隧道(云端設置)3.3.Cpolar穩定隧道(本地設置) 4.公網訪問測…

flutter 文件上傳組件和大文件分片上傳

文件分片上傳 資料 https://www.cnblogs.com/caijinglong/p/11558389.html 使用分段上傳來上傳和復制對象 - Amazon Simple Storage Service 因為公司使用的是亞馬遜的s3桶 下面是查閱資料獲得的 亞馬遜s3桶的文件上傳分片 分段上分為三個步驟:開始上傳、上傳對…

CSP-J 2023 T3 一元二次方程

文章目錄 題目題目背景題目描述輸入格式輸出格式樣例 #1樣例輸入 #1樣例輸出 #1 提示 題目傳送門題解思路總代碼 提交結果尾聲 題目 題目背景 眾所周知,對一元二次方程 a x 2 b x c 0 , ( a ≠ 0 ) ax ^ 2 bx c 0, (a \neq 0) ax2bxc0,(a0),可…

STM32G030C8T6:定時器1ms中斷(以64MHz外部晶振為例)

本專欄記錄STM32開發各個功能的詳細過程,方便自己后續查看,當然也供正在入門STM32單片機的兄弟們參考; 本小節的目標是,系統主頻64 MHZ,采用高速外部晶振,通過定時器3 每秒中斷控制 PB9 引腳輸出高低電平,從…

20240222作業

完善對話框,點擊登錄對話框,如果賬號和密碼匹配,則彈出信息對話框,給出提示“登錄成功",提供一個Ok按鈕,用戶點擊OK后,關閉登錄界面,跳轉到其他界面 如果賬號和密碼不匹配&…

Java基礎-注解

注解 注解是用來干什么的它有什么作用注解的常見分類內置注解Override注解定義 Deprecated注解定義 SuppressWarnings注解定義 元注解Target注解定義ElementType Retention&&RetentionTarget注解定義RetentionPolicy Documented注解定義 Inherited注解定義用法 Repeata…

低代碼開發:推動互聯網企業數字化轉型的關鍵因素

聯網行業作為我國數字經濟發展的核心驅動力,在推動國家數字化轉型中扮演著至關重要的角色。與其他傳統行業相比,互聯網企業面臨更加緊迫的數字化轉型需求,因為它們需要不斷適應快速變化的市場環境和技術趨勢。 然而,由于互聯網企業…

深入理解APDU協議與Java開發

1. 什么是APDU? APDU,即應用協議數據單元(Application Protocol Data Unit),是一種在智能卡與卡片讀卡器之間進行通信的協議。APDU定義了在交互中傳輸的數據格式和規則,允許讀卡器發送指令并接收響應。 2…

MFC 皮膚庫配置

1.創建MFC 對話框 2.添加皮膚資源 添加資源 添加頭文件 關閉SDL檢測 添加靜態庫文件 修改字符集 添加頭文件 將皮膚中的ssk文件加載到初始化實例中 > 運行即可

springboot 的 websocket 里面使用 @Autowired 注入 service 或 bean 時,報空指針異常

直接上解決方案: 在你的WebSocketServer服務器中 public static MessageService messageService; //要注入的類// 注入的時候,給類的 service 注入Autowiredpublic void setChatService(MessageService messageService) {WebSocketServer.messageSer…

【寸鐵的刷題筆記】樹、dfs、bfs、回溯、遞歸(一)

【寸鐵的刷題筆記】樹、dfs、bfs、回溯、遞歸(一) 大家好 我是寸鐵👊 總結了一篇刷題關于樹、dfs、bfs、回溯、遞歸的文章? 喜歡的小伙伴可以點點關注 💝 105. 從前序與中序遍歷序列構造二叉樹 模擬分析圖 代碼實現 /*** Definition for a binary tre…

HarmonyOS—添加/刪除Module

Module是應用/服務的基本功能單元,包含了源代碼、資源文件、第三方庫及應用/服務配置文件,每一個Module都可以獨立進行編譯和運行。一個HarmonyOS應用/服務通常會包含一個或多個Module,因此,可以在工程中創建多個Module&#xff0…

如何利用內網穿透工具在企業微信開發者中心實現本地接口服務回調

文章目錄 1. Windows安裝Cpolar2. 創建Cpolar域名3. 創建企業微信應用4. 定義回調本地接口5. 回調和可信域名接口校驗6. 設置固定Cpolar域名7. 使用固定域名校驗 企業微信開發者在應用的開發測試階段,應用服務通常是部署在開發環境,在有數據回調的開發場…

SQL查詢每個類別價格前3的數據

SELECTproduct_id,category,price FROM (SELECTproduct_id,category,price,ROW_NUMBER() OVER (PARTITION BY category ORDER BY price) AS rankFROMyour_products_table ) AS ranked_products WHERErank < 3;DENSE_RANK() 和 ROW_NUMBER() 是窗口函數&#xff08;Window Fu…

前端知識復習

1.symbol類型 Symbol 是 ECMAScript 6 中引入的一種新的基本數據類型&#xff0c;它表示獨一無二的值。Symbol 值是通過 Symbol() 函數創建的。 Symbol 值具有以下特點&#xff1a; 獨一無二性&#xff08;唯一性&#xff09;&#xff1a;每個通過 Symbol() 函數創建的 Symb…

十三:集合

提示&#xff1a;文章寫完后&#xff0c;目錄可以自動生成&#xff0c;如何生成可參考右邊的幫助文檔 文章目錄 01、Java 集合框架概述1.1、集合框架與數組的對比及概述1.2、集合框架涉及到的API 02、Collection接口方法2.1、Collection接口中的常用方法12.2、Collection接口中…

在idea中配置Tomcat

1.在idea中點擊右上角 2.點擊Edit Configurations,點擊加號 3.向下拉找到Tomcat Server下的Local,點一下 點擊Configure 找到tomcat文件路徑,選擇apache-tomcat-8.5.63(8.5.63是我的版本號) 選擇好路徑后點ok就配置好了 總步驟: