JS函數(shù)this的用法實(shí)例分析
本文實(shí)例講述了JS函數(shù)this的用法。分享給大家供大家參考。具體如下:
在js中寫函數(shù)時(shí),很多用到this. this究竟是什么,this是個(gè)關(guān)鍵字,是個(gè)指針,指向執(zhí)行環(huán)境作用域,也稱之為上下文。
先說下函數(shù)吧,個(gè)人理解是函數(shù)是在語言中重復(fù)調(diào)用的代碼塊.
在JS里,把函數(shù)賦值給對(duì)象的屬性時(shí),稱之為方法
如:
var m={};
m.title='title';
m.show=function(){
alert(this.title)
}
m.show()
就是把函數(shù)作為對(duì)象m的方法來調(diào)用
這樣的話,this指向的就是m這個(gè)對(duì)象.
直接調(diào)函數(shù)名的叫函數(shù):
var a=1212;
function show(){
alert(a)//1212
}
show()// 1212
在全局環(huán)境里,可以把全局變量理解為window的屬性,全局函數(shù)為window的方法
看下面的例子:
var m ={};
m.id='mmm';
m.show=function(){
alert(this.id);
}
var a={};
a.id='aaa';
a.show=m.show;
a.show(); //aaa
a.show=m.show; 先理解這句話,因?yàn)楹瘮?shù)是個(gè)對(duì)象,
m.show=function(){
alert(this.id)
}
這表達(dá)式相當(dāng)于a.show 與m.show同時(shí)引用指向
function(){
alert(this.id)
}
其實(shí)相當(dāng)于
a.show=function(){
alert(this.id)
}
所以調(diào)用a.show()時(shí),this指向的是a對(duì)象,
再看以下一個(gè)栗子
var m ={};
m.id='mmm'
m.show=function(){
alert(this.id)
}
var a={}
a.id='aaa'
a.show=function(){
m.show()
};
a.show(); //mmm
所以調(diào)用a.show()時(shí),相當(dāng)于調(diào)用了m.show()的方法,所以this.指向的是m對(duì)象。
再看以下一個(gè)例子,一開始還是不很懂
var color='red';
var app = {};
app.color="green";
app.paint=function(node){
node.style.color=this.color;
alert(this.color);
}
function findNode(callback){
var btn =document.querySelector('.btn');
callback(btn);//傳進(jìn)來,
}
findNode(app.paint);
alert(this.color); //red 而不是green
函數(shù)傳參時(shí),是按值傳參的,而不是引用
所以findNode(app.paint);傳進(jìn)來時(shí),其實(shí)是
function(node){
node.style.color=this.color;
alert(this.color);
}
的引用,又因?yàn)閒indNode是全局定義的,所以this指向WINDOW OR UNDEFINED;
關(guān)于傳參,按值傳遞過去的
function show(a){
alert(a)
}
參數(shù)為基本數(shù)據(jù)類型時(shí)好理解
var b=10; show(b)//alert(10);
至于對(duì)象
var c ={};
c.prop=true;
var showProp=function(obj){
obj.prop=false
}
showProp(c); //c.prop = false
有些人覺得是上面例子是按引用傳參
其實(shí)上面還是按值傳參,showProp(c)把c傳進(jìn)函數(shù)里時(shí),c其實(shí)相當(dāng)于一個(gè)引用, 函數(shù)里對(duì)obj.prop=false,相當(dāng)于對(duì)引用的對(duì)象 改成{prop:false}
再看下面一例子
var c ={};
c.prop=true;
var showProp=function(obj){
obj = new Object();
obj.prop=false
return obj;
}
showProp(c);
alert(c.prop); //true
這里明明把傳入obj修改了,如果按照函數(shù)按引用傳參,函數(shù)里面的修改肯定會(huì)反映到外部
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
不刷新網(wǎng)頁就能鏈接新的js文件方法總結(jié)
在本篇文章里小編給大家整理的是關(guān)于不刷新網(wǎng)頁就能鏈接新的js文件方法總結(jié),需要的朋友們參考下。2020-03-03
在Webpack中用url-loader處理圖片和字體的問題
這篇文章主要介紹了在Webpack中用url-loader處理圖片和字體的問題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
JavaScript文件的同步和異步加載的實(shí)現(xiàn)代碼
本篇文章主要介紹了JavaScript文件的同步和異步加載的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
js語法學(xué)習(xí)之判斷一個(gè)對(duì)象是否為數(shù)組
這篇文章主要介紹了從javascript判斷一個(gè)對(duì)象是否為數(shù)組中學(xué)習(xí)js語法,需要的朋友可以參考下2014-05-05
Javascript連接多個(gè)數(shù)組不用concat來解決
這篇文章主要介紹了不用concat解決Javascript連接多個(gè)數(shù)組,需要的朋友可以參考下2014-03-03
JS實(shí)現(xiàn)懸浮移動(dòng)窗口(懸浮廣告)的特效
頁面加載完成之后向頁面插入窗口,之后向窗口插入關(guān)閉按鈕,使用setInterval()函數(shù)觸發(fā)moves()函數(shù)開始動(dòng)畫2013-03-03
js實(shí)現(xiàn)點(diǎn)擊生成隨機(jī)div
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊生成隨機(jī)div,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01

