js中的this問題

来源:http://www.cnblogs.com/xiao-he-shang/archive/2017/08/30/7455869.html
-Advertisement-
Play Games

this this的指向在函數定義的時候是確定不了的,只有函數執行的時候才能確定this到底指向誰,實際上 this的最終指向的是那個調用它的對象(這裡其實並不完全對,this的指向有時候會很微妙,得靠自己去慢慢體會) 只有方法在對象上,對象調用當前方法,指向當前對象 來個料咋們看看this這家伙 ...


this

this的指向在函數定義的時候是確定不了的,只有函數執行的時候才能確定this到底指向誰,實際上

this的最終指向的是那個調用它的對象(這裡其實並不完全對,this的指向有時候會很微妙,得靠自己去慢慢體會)

只有方法在對象上,對象調用當前方法,指向當前對象

function  fnThis(){
	let user='js';
	console.log(this.user)//undefined
	console.log(this)//global(window)
}
fnThis();
這裡為什麼會輸出一個全局的對象?因為我們申明的函數,在全局裡,現在執行這個函數
實際上是全局在調用
let obj={
	user:'js',
	fn:function(){
		console.log(this.user)
	}
obj.fn();
這裡是obj在調用,所以指向我們的obj,這並不能說明,我們一開始就說的this最終調用他的那個
對象

let obj={
	user:'js',
	objTwo:{
		user:'css',
		fn:function(){
			console.log(this.user)
		}
	}
}
obj.objTwo.fn();
這裡只是指向了obj2,而並沒有指向最終調用它的obj.

來個料咋們看看this這家伙

<button id="myBtn" value="按鈕">按鈕</button> <script>
let myBtn=document.querySelector("#myBtn") let fn=function(){   console.log(this); } myBtn.onclick=function(){   fn();//輸出的全局   console.log(this);//輸出的是這個button } </script>

這裡從錶面看,會認為第一個輸出的是這個btn按鈕,不是說誰調用指向誰麽,但是咋們仔細看這個是btn在調用麽???

其實是這個點擊事件的匿名函數在調用,而這fn()本身是全局上下文的函數,它的this指向的是全局,它是作為這個匿名函數的普通函數,自然指向的全局

我們如果這樣寫

myBtn.onclick=fn;//btn點擊的時候就指向這個btn了,這時候輸出結果為這個button,

總結

1. 全局上下文,或者普通函數上下文裡面的this,包括函數裡面的普通函數,都是指向全局 2. 在對象方法裡面的this指向該對象 3. 在事件方法裡面的this指向發生事件的這個對象

特殊情況

let obj={
	user:'js',
	objTwo:{
		user:'css',
		fn:function(){
			console.log(this.user)
			console.log(this)
		}
	}
}

let objThre=obj.objTwo.fn;
objThree();
把函數賦值給了objThree,而objThree是在全局上,所以輸出的是全局

補充

let chinesePeople=function(){
		this.name='張飛';
		return obj
	}
 如果返回的是對象,this就指向返回的那個對象,否則就指向實例對象

改變的幾種方式

let obj={a:80}
let objTwo={
		a:70,
		fn:function(){
			console.log(this.a);
		}
}
objTwo.fn.call(obj);
調用一個方法,並改變其this指向
objTwo.fn.apply(obj);
調用一個方法,並改變其this指向

前2者區別,在於後面的參數,一個是順序,一個是數組

objTwo.fn.bind(obj)();		

bind()方法會創建一個新函數,在綁定後,我們可以加括弧立即執行,也可以等需要執行再執行
第一個參數對象,以後的順序傳參

new方法,其實是隱藏的調用了一個call的方法

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 箱線圖 箱線圖是能同時反映數據統計量和整體分佈,又很漂亮的展示圖。在2014年的Nature Method上有2篇Correspondence論述了使用箱線圖的好處和一個線上繪製箱線圖的工具。就這樣都可以發兩篇Nature method,沒天理,但也說明瞭箱線圖的重要意義。 下麵這張圖展示了Bar ...
  • 私有方法不能被覆蓋: 因為private被自動認為final,對子類是屏蔽的,那麼子類中的相同方法就是一個新的方法,編譯器不會報錯但也不會按期望運行: 輸出為A。public、protected或預設情況下輸出都為B。 靜態方法不能被覆蓋: 靜態方法是與類,而非單個的對象的關聯。單個對象調用靜態方法 ...
  • 上一篇隨筆我們學了全局解釋器鎖,前面也學了互斥鎖,今天學習一些與鎖相關的點,例如遞歸鎖,信號量,Event,還會學習我們已經很熟悉的隊列,不過這次的隊列是作為一個模塊出現的。 ...
  • 使用單例模式,可以確保在整個系統中僅有該類的一個實例。此外,單例模式的類會提供一個訪問類實例的全局訪問點。相比使用關鍵字 new來直接實例化一個對象 ,使用單例模式,將對象的創建"委托"給了類的一個靜態方法。在該靜態方法中實現對象的實例化並將其返回,同時該方法的執行過程也提供了控制實例化對象的時機。 ...
  • 定義(百度百科): 在不破壞封閉的前提下,捕獲一個對象的內部狀態,併在該對象之外保存這個狀態。這樣以後就可將該對象恢復到原先保存的狀態。 UML類圖: 具體代碼: 各模塊說明:Memento:備忘錄,存儲Originator的對象狀態,存儲哪些應該由Originator決定。Originator:原 ...
  • 一、直接導出 二、導出資料庫的數據 添加列名 附jar包 ...
  • `Nginx`(engine x)是一個輕量級、高性能的`Web`和**反向代理**伺服器,也是一個`IMAP`、`POP3`和`SMTP`伺服器,並且安裝十分簡單,配置文件非常簡潔,啟動特別容易,運行十分穩定,幾乎可以做到`7*24`小時不間斷運行,在國內大廠(如:`BATJ`)均得到廣泛應用。 ...
  • 開發中面對的問題1 (一)a href="javascript:;" 作用:讓點擊效果執行JavaScript空語句,防止點擊超鏈接標簽進行跳轉。 (二)$(this).index() 作用:返回自身所在的位置 (三)toggleClass() 現實開發中常會有多個class一起用 。 作用:切換指 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...