this,this,再次討論javascript中的this,超全面(經典)_javascript技巧

JavaScript 是一種腳本語言，因此被很多人認為是簡單易學的。然而情況恰恰相反，JavaScript 支援函數式程式設計、閉包、基於原型的繼承等進階功能。本文僅採擷其中的一個例子：JavaScript 中的 this 關鍵字，深入淺出的分析其在不同情況下的含義，形成這種情況的原因以及 Dojo 等 JavaScript 工具中提供的綁定 this 的方法。可以這樣說，正確掌握了 JavaScript 中的 this 關鍵字，才算邁入了 JavaScript 這門語言的門檻。

 至於js中this這個東西，好多淫解釋過了，看起來好高端的樣子，不曉得你看懂了木有？

先引用比較高階的，腳本之家裡 的， yes this 

好了，下面加上鄙比較挫的解釋

論點： this 不是變量，不是屬性，不能為其賦值，它總是指向調用它的物件

感覺還TM太虛了，只要記住最重要的一條即可 」它總是指向調用它的對象“ ，所以找到調用this的對象，就知道this到底指向誰了

1、

alert(this); 

瞅瞅，彈出來的是麼子，要么是”object window“ ,要么 "object" 總之就對象了，是那個對象呢？

alert(this === window); 

結果為'true' 所以了，現在呼叫它的物件是window了

2、

var test = function(){
  alert(this);
}
test(); 

猜猜上面彈出什麼，是不是跟"alert(this)" 這句一樣的

var test = function(){
  alert(this === window);
 }
test(); 

運行上面的程式碼，是不是彈出了'true' ?

事情就這樣完了？

要這麼簡單的話​​，何必那麼多人都去論述這個鳥了？

3、

再來

var test = function(){
  alert(this === window);
 }
new test(); 

哎哎，這次咋成'false'呢？

記住」this 總是指向呼叫它的物件「，第」1、「處呼叫該段程式碼的直接物件是全域對象，即"window" ；第」2、「處雖然是函數，但是呼叫其的仍然是」window「(不要搞混了，函數雖然是對象，但是調用它的是另一個對象)；第」3、「處，使用了」new「 這時其實已經改變了，這是一個建構函數，建構函數在建立時建立了一個新的空的對象，即」new test()「建立了一個新的對象，然後再由這個物件指向函數"test"中的程式碼，因此此時this不在是window對象，而是該建構函式所建立的新對象。

4、

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
test.b(); 

有了上面的論點，這下一下子清楚了吧！

5、

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b(); 

so, 你不會認為結果為"false"吧，錯了，雖然'test1'的值為'test'  但是'test1'不還是'test'對象麼，它有新產生對象，你暫且理解為引用的了，兩個都指向一個對象，奉上下面一段代碼為證

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test.a = 2;
alert(test1.a); 

如果彈出了」1「，你來罵我

6、再整個複雜的

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test);
   }
  }
 }
test.b.b1(); 

這是"true"還是"false"呢？

依照上面的理論，這時"this"不再直接被'test'調用了，而是被'test.b' 調用, 奉上下面一段代碼為證

var test ={
  'a':1,
  'b':{
   'b1':function(){
    alert(this === test.b);
   }
  }
 }
test.b.b1(); 

 7、好再整個複雜點的

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test(); 

你不會認為彈出"true"吧，不是按照上面的理論'innerTest'是被'test'調用的，然後'this'就指向'test'嗎？
額，錯就錯在是誰調用的'innerTest', 其實這種函數都是'window'對象調用的，及時你嵌套一千層，調用各個函數的都是'window'對象,奉上下面這段碼為證

var test = function(){
  var innerTest = function(){
   alert(this === window);
   var innerTest1 = function(){
    alert(this === window);
   }
   innerTest1();
  }
  innerTest();
 }
test(); 

8、再來一段特殊的

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1); 

這個我覺得大家都不會猜錯，該函數的作用就是”調用一個對象的一個方法，以另一個對象替換當前對象“ 所以了'window' 對像已經被替代為'test1'，自然為'false'了,奉上如下代碼以為證明

var test = function(){
  alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1); 

 那麼諸如'call'之類的也就相似了

9.再來一個原型的繼承，區別於字面量的繼承

var test = function(){
 }
 var my = function(){
  this.a = function(){
   alert(this === mytest2);
  }
 }
 var mytest = new my();
 test.prototype = mytest;
 var mytest2 = new test();
 mytest2.a(); 

10、還剩下些什麼了，可能就是'dom'對象了

<script>
  var mytest = function(context){
   alert(context.getAttribute('id'));
   alert(this === window);
  }
 </script>
 <div id="test" onclick="mytest(this)">aaaa</div> 

看了上面的應該了解了吧，裡面的'this'分別代表神馬