JS中的this的應用總結
阿新 • • 發佈：2017-11-10
規範 mic 響應 彈出 應該 utf con 事件綁定 har
簡述this的用法
“this是由被調用的方式確定”這個事實，使得this可以被改變，從而為函數增加了動態性，可變性，使得變成更加靈活。目前因為工作經驗有限，暫時總結
一下五種情況下的this的用法，以後有時間應該從ECMA規範上來深入地理解一下this的應用。
1.情況一：以函數的形式調用，this是window
1 console.log(this);//window 2 function fu(){ 3 console.log(this); 4 } 5 fu();//window
2.情況二：以方法的形式調用，this是調用方法的對象
1 var obj ={name:‘this‘}; 2 function foo(){ 3 console.log(this); 4 } 5 obj.foo=foo; 6 obj.foo();//輸出obj { name: ‘this‘, foo: [Function: foo] }
3.情況三 ： 以構造函數的形式調用
1 function D() { 2 this.name =‘test‘; 3 this.age =18;4 console.log(this); 5 } 6 var d = new D();//輸出d對象 7 d.name =‘hewenfeng‘; 8 D();//window 9 console.log(d);//輸出d對象
4.情況四： 在全局作用域中調用
1 console.log(this);//window
5. 情況五：在響應函數中，給誰綁定事件，this就是誰。
1 <!DOCTYPE HTML> 2 <html > 3 <head> 4<meta charset="UTF-8"> 5 6 </head> 7 <body> 8 <div id="b" onclick="console.log(this)"> 9 <div> 10 </body> 11 </html> 12 輸出：div元素本身 13 14 <!DOCTYPE HTML> 15 <html > 16 <head> 17 <meta charset="UTF-8"> 18 </head> 19 <body> 20 <div id="b" onclick="console.log(this)"> 21 <div> 22 23 <script type="text/javascript"> 24 var c=document.getElementById("b"); 25 c.onclick=function(){console.log(1)} 26 27 </script> 28 </body> 29 </html> 30 輸出：1 31 onclick的綁定方式會覆蓋內聯式的事件綁定。也可以在c.onclick裏輸出this，可知道this代表div元素本身。 32 33 <!DOCTYPE HTML> 34 <html > 35 <head> 36 <meta charset="UTF-8"> 37 </head> 38 <body> 39 <div id="b" onclick="console.log(this)"> 40 <div> 41 42 <script type="text/javascript"> 43 var c=document.getElementById("b"); 44 c.onclick=function(){console.log(1)} 45 c.addEventListener("click",function(){alert(‘2‘)},false) 46 </script> 47 </body> 48 </html> 49 輸出：1,彈出
addEventListener不會覆蓋c.onclick綁定的函數，（自然也不會覆蓋內聯的onclick，addEventListener就是以疊加的方式綁定事件處理函數的，
就像用addEventListener也可以綁定幾個事件處理函數一樣）也可以在addEventListener的事件處理函數裏輸出this，可知道this代表div元素本身。
JS中的this的應用總結