淺談js中的this問題
this
this的指向在函數(shù)定義的時(shí)候是確定不了的,只有函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰,實(shí)際上
this的最終指向的是那個(gè)調(diào)用它的對象(這里其實(shí)并不完全對,this的指向有時(shí)候會很微妙,得靠自己去慢慢體會)
只有方法在對象上,對象調(diào)用當(dāng)前方法,指向當(dāng)前對象
function fnThis(){ let user='js'; console.log(this.user)//undefined console.log(this)//global(window) } fnThis();
這里為什么會輸出一個(gè)全局的對象?因?yàn)槲覀兩昝鞯暮瘮?shù),在全局里,現(xiàn)在執(zhí)行這個(gè)函數(shù)
實(shí)際上是全局在調(diào)用
let obj={ user:'js', fn:function(){ console.log(this.user) } obj.fn();
這里是obj在調(diào)用,所以指向我們的obj,這并不能說明,我們一開始就說的this最終調(diào)用他的那個(gè)
對象
let obj={ user:'js', objTwo:{ user:'css', fn:function(){ console.log(this.user) } } } obj.objTwo.fn();
這里只是指向了obj2,而并沒有指向最終調(diào)用它的obj.
來個(gè)料咋們看看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);//輸出的是這個(gè)button } </script>
這里從表面看,會認(rèn)為第一個(gè)輸出的是這個(gè)btn按鈕,不是說誰調(diào)用指向誰么,但是咋們仔細(xì)看這個(gè)是btn在調(diào)用么???
其實(shí)是這個(gè)點(diǎn)擊事件的匿名函數(shù)在調(diào)用,而這fn()本身是全局上下文的函數(shù),它的this指向的是全局,它是作為這個(gè)匿名函數(shù)的普通函數(shù),自然指向的全局
我們?nèi)绻@樣寫
myBtn.onclick=fn;//btn點(diǎn)擊的時(shí)候就指向這個(gè)btn了,這時(shí)候輸出結(jié)果為這個(gè)button,
總結(jié)
1. 全局上下文,或者普通函數(shù)上下文里面的this,包括函數(shù)里面的普通函數(shù),都是指向全局
2. 在對象方法里面的this指向該對象
3. 在事件方法里面的this指向發(fā)生事件的這個(gè)對象
特殊情況
let obj={ user:'js', objTwo:{ user:'css', fn:function(){ console.log(this.user) console.log(this) } } } let objThre=obj.objTwo.fn; objThree();
把函數(shù)賦值給了objThree,而objThree是在全局上,所以輸出的是全局
補(bǔ)充
let chinesePeople=function(){ this.name='張飛'; return obj }
如果返回的是對象,this就指向返回的那個(gè)對象,否則就指向?qū)嵗龑ο?/p>
改變的幾種方式
let obj={a:80} let objTwo={ a:70, fn:function(){ console.log(this.a); } }
objTwo.fn.call(obj);
調(diào)用一個(gè)方法,并改變其this指向
objTwo.fn.apply(obj);
調(diào)用一個(gè)方法,并改變其this指向
前2者區(qū)別,在于后面的參數(shù),一個(gè)是順序,一個(gè)是數(shù)組
objTwo.fn.bind(obj)();
bind()方法會創(chuàng)建一個(gè)新函數(shù),在綁定后,我們可以加括號立即執(zhí)行,也可以等需要執(zhí)行再執(zhí)行
第一個(gè)參數(shù)對象,以后的順序傳參
new方法,其實(shí)是隱藏的調(diào)用了一個(gè)call的方法
以上這篇淺談js中的this問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法
這篇文章主要介紹了JavaScript將Web頁面內(nèi)容導(dǎo)出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02use jscript List Installed Software
use jscript List Installed Software...2007-06-06JS實(shí)現(xiàn)的模仿QQ頭像資料卡顯示與隱藏效果
這篇文章主要介紹了JS實(shí)現(xiàn)的模仿QQ頭像資料卡顯示與隱藏效果,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-04-04JS獲取指定月份的天數(shù)兩種實(shí)現(xiàn)方法
這篇文章主要介紹了JS獲取指定月份的天數(shù)兩種實(shí)現(xiàn)方法,需要的朋友可以參考下2018-06-06js中獲取鍵盤按下鍵值event.keyCode、event.charCode和event.which的兼容性詳解
這篇文章主要給大家介紹了關(guān)于Javascript中獲取鍵盤按下鍵值event.keyCode、event.charCode和event.which的兼容性的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-03-03js實(shí)現(xiàn)按一下刪除鍵刪除整個(gè)單詞附demo
使用代碼實(shí)現(xiàn)當(dāng)刪除單詞時(shí)就一次性刪除整個(gè)單詞,有個(gè)demo,相信大家看過之后就知道是什么意思了2014-09-09