JavaScript 是一種腳本語(yǔ)言，因此被很多人認(rèn)為是簡(jiǎn)單易學(xué)的。然而情況恰恰相反，JavaScript 支持函數(shù)式編程、閉包、基于原型的繼承等高級(jí)功能。本文僅采擷其中的一例：JavaScript 中的 this 關(guān)鍵字，深入淺出的分析其在不同情況下的含義，形成這種情況的原因以及 Dojo 等 JavaScript 工具中提供的綁定 this 的方法。可以這樣說(shuō)，正確掌握了 JavaScript 中的 this 關(guān)鍵字，才算邁入了 JavaScript 這門語(yǔ)言的門檻。

 至于js中this這個(gè)東西，好多淫解釋過(guò)了，看起來(lái)好高端的樣子，不曉得你看懂了木有？

先引用比較高端的，腳本之家里 的， yes this 

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

論點(diǎn)： this 不是變量，不是屬性，不能為其賦值，它始終指向調(diào)用它的對(duì)象

感覺(jué)還TM太虛了，只要記住最重要的一條即可 ”它始終指向調(diào)用它的對(duì)象“ ，所以找到調(diào)用this的對(duì)象，就知道this到底指向誰(shuí)了

1、

alert(this); 

瞅瞅，彈出來(lái)的是么子，要么是”object window“ ,要么 "object" 總之就對(duì)象了，是那個(gè)對(duì)象呢？

alert(this === window); 

結(jié)果為'true' 所以了，現(xiàn)在調(diào)用它的對(duì)象是window了

2、

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

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

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

運(yùn)行上面的代碼，是不是彈出了'true' ?

事情就這樣完了？

要這么簡(jiǎn)單的話，何必那么多人都去論述這個(gè)鳥了？

3、

再來(lái)

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

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

記住”this 始終指向調(diào)用它的對(duì)象“，第”1、“處調(diào)用該段代碼的直接對(duì)象是全局對(duì)象，即"window" ；第”2、“處雖然是函數(shù)，但是調(diào)用其的仍然是”window“(不要弄混了，函數(shù)雖然是對(duì)象，但是調(diào)用它的是另一個(gè)對(duì)象)；第”3、“處，使用了”new“ 這時(shí)其實(shí)已經(jīng)發(fā)生變化了，這是一個(gè)構(gòu)造函數(shù)，構(gòu)造函數(shù)創(chuàng)建時(shí)創(chuàng)建了一個(gè)新的空的對(duì)象，即”new test()“創(chuàng)建了一個(gè)新的對(duì)象，然后再由這個(gè)對(duì)象指向函數(shù)"test"中的代碼，因此此時(shí)this不在是window對(duì)象，而是該構(gòu)造函數(shù)創(chuàng)建的新對(duì)象。

4、

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

有了上面的論點(diǎn)，這下一下子清楚了吧！

5、

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

so, 你不會(huì)認(rèn)為結(jié)果為"false"吧，錯(cuò)了，雖然'test1'的值為'test'  但是'test1'不還是'test'對(duì)象么，它有新產(chǎn)生對(duì)象，你暫且理解為引用的了，兩個(gè)都指向一個(gè)對(duì)象，奉上下面一段代碼為證

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

如果彈出了”1“，你來(lái)罵我

6、再整個(gè)復(fù)雜的

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

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

按照上面的理論，這時(shí)"this"不再直接被'test'調(diào)用了，而是被'test.b' 調(diào)用, 奉上下面一段代碼為證

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

 7、好再整個(gè)復(fù)雜點(diǎn)的

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

你不會(huì)認(rèn)為彈出"true"吧，不是按照上面的理論'innerTest'是被'test'調(diào)用的，然后'this'就指向'test'嗎？
額，錯(cuò)就錯(cuò)在是誰(shuí)調(diào)用的'innerTest', 其實(shí)這種函數(shù)都是'window'對(duì)象調(diào)用的，及時(shí)你嵌套一千層，調(diào)用各個(gè)函數(shù)的都是'window'對(duì)象,奉上下面這段代碼為證

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

8、再來(lái)一段特殊的

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

這個(gè)我覺(jué)得大家都不會(huì)猜錯(cuò)，該函數(shù)的作用就是”調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象“ 所以了'window' 對(duì)象已經(jīng)被替代為'test1'，自然為'false'了,奉上如下代碼以為證明

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

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

9、再來(lái)一個(gè)原型的繼承，區(qū)別于字面量的繼承

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'對(duì)象了

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

看了上面的應(yīng)該了解了吧，里面的'this'分別代表神馬

最新評(píng)論