JavaScript面向對象編程—this詳解
this詳解
作者的話
在JavaScriptOPPt面向對象編程中,this這位老大哥,相信大家不會陌生。大家在遇到this時,很多朋友難免會有個疑問:“這個this是什麼,它到底指向誰?”
今天,博主針對this的指向問題,進行了整理。本篇博客,博主給大家詳盡介紹了不同情況下,this的指向!!以下奉上博主總結的關於this的指向詳解,希望對各位開發者朋友有所幫助:
1、誰最終調用函數,this指向誰。
①this指向的,永遠只可能是對象!!!!!
②this指向誰,永遠不取決於this寫在哪,而是取決於this在哪調用;
③this指向的對象,我們稱之為函數的上下文context,也叫函數的調用者
2、*****this指向的規律(與函數調用的方式息息相關)
this指向的情況,取決於函數調用的方式有哪些:
①通過函數名直接調用的:this指向window
②通過對象.函數名調用的:this指向這個對象;
③函數作為數組的一個元素,通過數組下標調用的:this指向這個數組
④函數作為window內置函數的回調函數調用時:this指向window
setTimeout(func,1000);setInterval等
⑤函數作為構造函數,用new關鍵字調用時:this指向的是new出的新對象
實例演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>this詳解</title> </head> <body> <div id="div"></div> </body> <script type="text/javascript"> function func (name) { console.log(this); } func;//window //狹義對象 var obj={ name:"obj", func1:func }; obj.func1;//obj //廣義對象 document.getElementById("div").onclick=function { this.style.backgroundColor="red"; };//this指向div //函數作為數組的一個元素,通過數組下標調用的:this指向這個數組 var arr=[func,1,2,3] arr[0]; //函數作為window內置函數的回調函數調用時:this指向window setTimeout(func,1000); //setInterval等 //函數作為構造函數,用new關鍵字調用時:this指向的是new出的新對象 var obj=new func;//this指向的是new出的新obj /* * 綜合小練習 */ var obj1={ name:"obj1", arr:[setTimeout(func,5000),1,2,3] } document.getElementById("div").onclick=obj1.arr[0];//函數最終調用者:setTimeout;符合規律⑤,this指向window var obj1={ name:"obj1", arr:[func,1,2,3] } document.getElementById("div").onclick=obj1.arr[0];//函數最終調用者:arr數組下標;符合規律③,this指向arr var obj1={ name:"obj1", arr:[{name:'arrObj',fun:func},1,2,3] } document.getElementById("div").onclick=obj1.arr[0].fun;//函數最終調用者:對象;符合規律②,this指向{name:'arrObj',fun:func}這個對象 </script> </html>
以上為本期分享內容,希望本篇博客可以對廣大開發者朋友有所幫助!如果有需要補充的部分,可在下方評論區予以補充。
如果本篇內容對你有所幫助,歡迎收藏,原創內容,歡迎大家積極評論轉載和推薦!
相關推薦
'前端設計- JavaScript驗證碼製作及實例分析'
"在網頁設計中,尤其表單填寫提交過程中,為防止機器自動登錄,很多網頁都採用驗證碼技術,允許用戶輸入而儘量避免自動登錄。驗證碼實現的方法有很多,PHP繪圖技術可以在服務端生成驗證碼併發送客戶端,HTML5技術下可以使用canvas與JS腳本實現在客戶端瀏覽器自動生成驗證碼。本...
'noVnc遠程訪問Linux桌面(通過web方式)'
"OS:CentOS6 桌面1.介紹NoVnc是Web端的Vnc軟件、可以直接通過網頁訪問遠程主機,採用 HTML5、WebSockets、Canvas和 JavaScript實現,被普遍用在各大雲平臺中。網頁就是一個客戶端、類似 Windows 下的 vncviewer2...
'中秋佳節:沒編程合集大團圓!318本編出電子書籍➕視頻資料項目'
"中秋節佳節,小夥伴們都放假開心的回家團圓去了吧?這不、小編給你們帶來了更開心的事情、那就是給你們準備好了編程合集大團圓!全網最全編程語言視頻教程(從零基礎到大牛哦!)包含java、python、web、大數據、人工智能、等視頻教程+項目+源碼,現在免費分享給各位![領取方...
'京東前端工程師:10個JavaScript難點+最新JavaScript視頻教程'
"1. 立即執行函數立即執行函數,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是創建函數的同時立即執行。它沒有綁定任何事件,也無需等待任何異步操作:立即執行函數function(){…}是一個匿名函數,包圍...
'IT大牛彙總前端開發 JavaScript 乾貨知識點'
"很多初學的朋友經常問我,前端JavaScript都需要學習哪些東西呀?哪些是JavaScript的重點知識啊?其實做前端開發工程師,所有的知識點都是我們學習必備的東西,只有紮實的技術基礎才是高薪的關鍵!不過JavaScript的知識點比較多,一篇文章的內容沒辦法講完。今天...
'Mozilla發佈Firefox 69全面預設啟用增強追蹤保護'
"Mozilla發佈正式版Firefox 69,從這個版本開始,增強追蹤保護(Enhanced Tracking Protection,ETP)功能將會作為標準配置預設開啟,而阻擋影片自動播放的功能也獲得強化,另外,Mozilla還強化了Windows 10與macOS版本...
'清華IT流出的10個JavaScript難點+最新JavaScript視頻教程'
"1. 立即執行函數立即執行函數,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是創建函數的同時立即執行。它沒有綁定任何事件,也無需等待任何異步操作:立即執行函數function(){…}是一個匿名函數,包圍...
推薦中...