當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS中的this的应用总结
生活随笔
收集整理的這篇文章主要介紹了
JS中的this的应用总结
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
簡述this的用法
“this是由被調(diào)用的方式確定”這個(gè)事實(shí)，使得this可以被改變，從而為函數(shù)增加了動(dòng)態(tài)性，可變性，使得變成更加靈活。目前因?yàn)楣ぷ鹘?jīng)驗(yàn)有限，暫時(shí)總結(jié)
一下五種情況下的this的用法，以后有時(shí)間應(yīng)該從ECMA規(guī)范上來深入地理解一下this的應(yīng)用。 1.情況一：以函數(shù)的形式調(diào)用，this是window 1 console.log(this);//window 2 function fu(){ 3 console.log(this); 4 } 5 fu();//window 2.情況二：以方法的形式調(diào)用，this是調(diào)用方法的對(duì)象 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.情況三 ： 以構(gòu)造函數(shù)的形式調(diào)用
1 function D() { 2 this.name ='test'; 3 this.age =18; 4 console.log(this); 5 } 6 var d = new D();//輸出d對(duì)象 7 d.name ='hewenfeng'; 8 D();//window 9 console.log(d);//輸出d對(duì)象 4.情況四： 在全局作用域中調(diào)用
1 console.log(this);//window?
5. 情況五：在響應(yīng)函數(shù)中，給誰綁定事件，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的綁定方式會(huì)覆蓋內(nèi)聯(lián)式的事件綁定。也可以在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不會(huì)覆蓋c.onclick綁定的函數(shù)，（自然也不會(huì)覆蓋內(nèi)聯(lián)的onclick，addEventListener就是以疊加的方式綁定事件處理函數(shù)的，
就像用addEventListener也可以綁定幾個(gè)事件處理函數(shù)一樣）也可以在addEventListener的事件處理函數(shù)里輸出this，可知道this代表div元素本身。
“this是由被調(diào)用的方式確定”這個(gè)事實(shí)，使得this可以被改變，從而為函數(shù)增加了動(dòng)態(tài)性，可變性，使得變成更加靈活。目前因?yàn)楣ぷ鹘?jīng)驗(yàn)有限，暫時(shí)總結(jié)
一下五種情況下的this的用法，以后有時(shí)間應(yīng)該從ECMA規(guī)范上來深入地理解一下this的應(yīng)用。 1.情況一：以函數(shù)的形式調(diào)用，this是window 1 console.log(this);//window 2 function fu(){ 3 console.log(this); 4 } 5 fu();//window 2.情況二：以方法的形式調(diào)用，this是調(diào)用方法的對(duì)象 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.情況三 ： 以構(gòu)造函數(shù)的形式調(diào)用
1 function D() { 2 this.name ='test'; 3 this.age =18; 4 console.log(this); 5 } 6 var d = new D();//輸出d對(duì)象 7 d.name ='hewenfeng'; 8 D();//window 9 console.log(d);//輸出d對(duì)象 4.情況四： 在全局作用域中調(diào)用
1 console.log(this);//window?
5. 情況五：在響應(yīng)函數(shù)中，給誰綁定事件，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的綁定方式會(huì)覆蓋內(nèi)聯(lián)式的事件綁定。也可以在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不會(huì)覆蓋c.onclick綁定的函數(shù)，（自然也不會(huì)覆蓋內(nèi)聯(lián)的onclick，addEventListener就是以疊加的方式綁定事件處理函數(shù)的，
就像用addEventListener也可以綁定幾個(gè)事件處理函數(shù)一樣）也可以在addEventListener的事件處理函數(shù)里輸出this，可知道this代表div元素本身。
轉(zhuǎn)載于:https://www.cnblogs.com/xiaoyinspy/p/7812087.html
總結(jié)
以上是生活随笔為你收集整理的JS中的this的应用总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用WSW将Nginx创建为Window
- 下一篇： 套接字I/O模型-重叠I/O