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

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

1.全域變數

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

var value="0"; function mei(){ 
 var value="1"; 
 console.log(this.value); //0  console.log(value);   //1 } 
mei();

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

2.建構子

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

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的部落格中的例子

 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的指向，他就說不對，讓我回去自己看看，現在試了試，我還真是錯了，貼代碼

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，如果這裡有理解錯誤的話希望有朋友可以指出來！