當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS中的this的应用总结
生活随笔
收集整理的這篇文章主要介紹了
JS中的this的应用总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
簡述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" οnclick="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" οnclick="console.log(this)"> 21 <div> 22 23 <script type="text/javascript"> 24 var c=document.getElementById("b"); 25 c.οnclick=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" οnclick="console.log(this)"> 40 <div> 41 42 <script type="text/javascript"> 43 var c=document.getElementById("b"); 44 c.οnclick=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元素本身。
“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" οnclick="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" οnclick="console.log(this)"> 21 <div> 22 23 <script type="text/javascript"> 24 var c=document.getElementById("b"); 25 c.οnclick=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" οnclick="console.log(this)"> 40 <div> 41 42 <script type="text/javascript"> 43 var c=document.getElementById("b"); 44 c.οnclick=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元素本身。
轉載于:https://www.cnblogs.com/xiaoyinspy/p/7812087.html
總結
以上是生活随笔為你收集整理的JS中的this的应用总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用WSW将Nginx创建为Window
- 下一篇： 套接字I/O模型-重叠I/O