首頁 > web前端 > js教程 > Javascript中this的用法詳解_基礎知識

Javascript中this的用法詳解_基礎知識

WBOY
發布: 2016-05-16 16:35:45
原創
1296 人瀏覽過

前些日子麵試的時候用到了this,面試官說我的理解有點偏差,回來看了下書和一些博客,做了點測試,發現自己的理解的確有誤

1.全域變數

應該是最常用的吧,函數中呼叫一個this,這裡其實就是全域變數

1

2

3

4

var value="0"; function mei(){

 var value="1";

 console.log(this.value); //0  console.log(value);   //1 }

mei();

登入後複製

輸出0就是因為this指向的是全域

2.建構子

這是我比較熟悉的用法,建構子中用this,new一個新的物件後this就指向了這個新的物件

1

2

3

4

5

6

7

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,可見由於建構函數,這裡的this已經指向新的物件了而不是全域變數

3.call和apply

直接借用我的call和apply的部落格中的例子

1

2

3

4

5

6

7

8

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是因為使用了call或apply後,f2中的this指向了f1,而f1中的p為123,具體解釋直接戳那篇博文

4.函數作為某個物件的方法呼叫(我出錯的地方)

當時讓我寫一個物件有幾個方法,我腦子一抽定義了個全域變量,然後在物件的方法裡用this調用,面試官問我這個this是什麼?我說應該是window,因為這種方式我用的少,以為只有new或call才會改變this的指向,他就說不對,讓我回去自己看看,現在試了試,我還真是錯了,貼代碼

1

2

3

4

5

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的方法呼叫的,因此這裡的this指向了mei.value所以輸出child

至於father我是這樣理解的,show指向的函數是定義在全域環境下的,由於作用域鏈,在show中沒有找到value,於是就去定義他的環境中找,這就找到了全局的value,如果這裡有理解錯誤的話希望有朋友可以指出來!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板