JavaScript this關鍵字指向常用情況解析
更新時間：2020年09月02日 11:24:50 作者：蔣先森
這篇文章主要介紹了JavaScript this關鍵字指向常用情況解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
在之前寫代碼的經歷中，常常試過寫著寫著this就莫名其妙的不知道指向到哪里去了。今天看了曾探的javascript設計模式，里面特別談到了this在不同情況下指代的對象，非常有意思。
this指代的情況
this有以下4種情況：
1、對象.函數(shù)的形式調用：object.function();
2、普通函數(shù)的形式調用：function();
3、構造器調用;
4、Function.prototype.call或Function.prototype.apply調用;
1、對象.函數(shù)的形式調用
對象.函數(shù)方式調用時，指代該對象。
var obj = {
num:1,
getNum:function(){
alert(this.num);//輸出1
}
}
obj.getNum();
2、普通函數(shù)形式調用
普通函數(shù)的方式被調用時，this指向全局對象。
window.num = 2;
var obj = {
num:1,
getNum:function(){
alert(this.num);
}
}
obj.getNum();//彈出1
var fun1 = obj.getNum;
fun1(); //彈出2
太神奇了，直接調用函數(shù) fun(); 與通過對象調用函數(shù) xxx.fun(); this指代的對象不同。
3、構造器調用
為了能夠用上new關鍵字，javascript的創(chuàng)建對象可以這樣定義。
var person = function(){
this.name = '劉備';
}
在這種情況下，this指代這個正在創(chuàng)建中的對象。
var p = new person();
alert(p.name);//彈出劉備
4、Function.prototype.call或Function.prototype.apply調用
var obj1 = {
name:'關羽',
getName:function(){
return this.name;
}
}
var obj2 = {
name:'劉備'
}
alert(obj1.getName()); //關羽
alert(obj1.getName.call(obj2)); //劉備
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
你也許是位樂于分享的技術人員，盡管你算不上什么技術高手，但是你都希望把自己所知道的通過博客與網(wǎng)友分享。為了讓更多人知道你的經驗，你可能會努力把博文發(fā)布到專業(yè)論壇。2009-11-11
這篇文章主要介紹了JS+CSS實現(xiàn)的藍色table選項卡效果,通過鼠標事件調用自定義函數(shù)實現(xiàn)頁面元素樣式的遍歷與動態(tài)切換效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
fastclick插件導致日期(input[type="date"])控件無法被觸發(fā)該如何解決
這篇文章主要介紹了fastclick插件導致日期(input[type="date"])控件無法被觸發(fā)該如何解決,需要的朋友可以參考下2015-11-11
D3.js支持從外部讀取數(shù)據(jù)進行圖形交互(Loading External Resources)，支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML數(shù)據(jù)結構，下面這篇文章主要給大家介紹了D3.js中CSV表格文件讀取的相關資料，需要的朋友可以參考下。2017-06-06
這篇文章主要介紹了微信小程序3種位置API的使用方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了微信小程序image圖片加載完成監(jiān)聽，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
簡單介紹JavaScript數(shù)據(jù)類型之隱式類型轉換
這篇文章主要介紹了簡單介紹JavaScript數(shù)據(jù)類型之隱式類型轉換的相關資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了js密碼強度檢測的相關資料，并給出了詳細代碼，需要的朋友可以參考下2016-01-01
在TypeScript中就像在EC5中一樣,任何包含頂級import或export的文件都被認為是一個模塊,下面這篇文章主要給大家介紹了關于如何在TypeScript使用模塊與命名空間以及注意事項的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了JavaScript常用的簡寫技巧,列舉了20條js中常用的簡寫技巧，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下2017-08-08