Javascript中this的用法詳解
前些日子面試的時(shí)候用到了this,面試官說(shuō)我的理解有點(diǎn)偏差,回來(lái)看了下書和一些博客,做了點(diǎn)測(cè)試,發(fā)現(xiàn)自己的理解的確有誤
1.全局變量
應(yīng)該是最常用的吧,函數(shù)中調(diào)用一個(gè)this,這里其實(shí)就是全局變量
var value="0"; function mei(){
var value="1";
console.log(this.value); //0 console.log(value); //1 }
mei();
輸出0就是因?yàn)閠his指向的是全局
2.構(gòu)造函數(shù)
這是我比較熟悉的用法,構(gòu)造函數(shù)中用this,new一個(gè)新的對(duì)象后this就指向了這個(gè)新的對(duì)象
var value="window"; function mei(){
this.value=1;
this.show=function(){
console.log(this.value)
}
} var m=new mei();
console.log(m.value); //1 m.show(); //1
可以看到輸出的是1而并不是window,可見由于構(gòu)造函數(shù),這里的this已經(jīng)指向新的對(duì)象了而不是全局變量
3.call和apply
直接借用我的call和apply的博客中的例子
var p="456";
function f1(){
this.p="123";
}
function f2() {
console.log(this.p);
}
f2(); //456 f2.call(f1()); //123 f2.apply(f1()); //123
第一行輸出456很好理解,this指向全局,后面的123是因?yàn)槭褂昧薱all或者apply后,f2中的this指向了f1,而f1中的p為123,具體解釋直接戳那篇博文
4.函數(shù)作為某個(gè)對(duì)象的方法調(diào)用(我出錯(cuò)的地方)
當(dāng)時(shí)讓我寫一個(gè)對(duì)象有幾個(gè)方法,我腦子一抽定義了個(gè)全局變量,然后在對(duì)象的方法里用this調(diào)用,面試官問(wèn)我這個(gè)this是什么?我說(shuō)應(yīng)該是window,因?yàn)檫@種方式我用的少,以為只有new或者call才會(huì)改變this的指向,他就說(shuō)不對(duì),讓我回去自己看看,現(xiàn)在試了試,我還真是錯(cuò)了,貼代碼
var value="father"; function mei(){}
mei.value="child";
mei.get=function(){console.log(this.value)};
mei.show=function(){console.log(value)};
mei.get(); //child mei.show(); //father
由于get是作為mei的方法調(diào)用的,因此這里的this指向了mei.value所以輸出child
至于father我是這樣理解的,show指向的函數(shù)是定義在全局環(huán)境下的,由于作用域鏈,在show中沒(méi)有找到value,于是就去定義他的環(huán)境中找,這就找到了全局的value,如果這里有理解錯(cuò)誤的話希望有朋友可以指出來(lái)!
相關(guān)文章
BOM中l(wèi)ocation對(duì)象的屬性和方法
這篇文章主要介紹了BOM中l(wèi)ocation對(duì)象的屬性和方法,作為前端基礎(chǔ)location對(duì)象的屬性方法還是要掌握的,需要的朋友可以參考下2023-04-04
舉例講解JavaScript中將數(shù)組元素轉(zhuǎn)換為字符串的方法
這篇文章主要介紹了JavaScript中將數(shù)組元素轉(zhuǎn)換為字符串的方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-10-10
javascript中的onkeyup和onkeydown區(qū)別介紹
文本框里輸入的時(shí)候要開始計(jì)算文本框里面輸入了多少字,自然想到了onkeydown事件,然后計(jì)算value.length的方法,下面看下具體的代碼2013-04-04
js四舍五入數(shù)學(xué)函數(shù)round使用實(shí)例
這篇文章主要介紹了js四舍五入數(shù)學(xué)函數(shù)round使用實(shí)例,需要的朋友可以參考下2014-05-05
javascript學(xué)習(xí)筆記(十七) 檢測(cè)瀏覽器插件代碼
javascript學(xué)習(xí)筆記之檢測(cè)瀏覽器插件代碼,需要的朋友可以參考下2012-06-06
JavaSacript中charCodeAt()方法的使用詳解
這篇文章主要介紹了JavaSacript中charCodeAt()方法的使用詳解,是JS入門學(xué)習(xí)中的基本知識(shí),需要的朋友可以參考下2015-06-06
簡(jiǎn)單的ajax連接庫(kù)分享(不用jquery的ajax)
自己寫了一個(gè)簡(jiǎn)單的ajax連接庫(kù),沒(méi)有使用jquery的ajax,這個(gè)代碼要比jquery輕量,大家參考使用吧,2014-01-01
JavaScript學(xué)習(xí)筆記之JS對(duì)象
這篇文章向我們?cè)敿?xì)介紹了javascript中的對(duì)象,包括默認(rèn)對(duì)象、數(shù)組對(duì)象、字符串對(duì)象、自定義對(duì)象,并通過(guò)示例對(duì)這4中對(duì)象做了對(duì)比分析,推薦給大家。2015-01-01
JavaScript數(shù)據(jù)類型判定的總結(jié)筆記
這篇文章主要給大家分享的是JavaScript數(shù)據(jù)類型判定,感興趣的朋友可以參考下2015-07-07

