javascript對象---7 Function函數 this指針

時間 2019-11-15

標籤 javascript 對象 function 函數指針欄目 JavaScript 简体版

原文原文鏈接

this指針：this在js中很是靈活，通常在代碼運行時基於函數的運行環境綁定的，大體分5鍾狀況windows

1. 全局環境中 this 表明全局環境（Window 對象）；瀏覽器

不包含在任何function以內就是全局環境，dom

2.在普通函數或對象中， this表明運行環境對應的對象( 能夠理解爲調用者)；this

var obj = {
              win : this
           }
           debuggerspa

在調試臺查看 obj .win :window ------- this指window對象prototype

查看調用者----obj的調用者爲最外側的 window對象debug

var obj = {
              win : this,

              sayHello :function(){
                  var that = this ; //此時that指的是調用它的 Obj
                  debugger
              }
           }
           obj.sayHello()指針

例2：調試

function outer(){
               var that = this; // window對象
               debugger;
               inner();
               function inner(){
                   var that = this; // window對象
                   debugger;
               }
           }
           outer(); //在 windows 層級調用outer（）因此第一個that指 window對象
           //繼續向下執行，調用inner 此時第二個that 指的仍是 window對象
           //在window環境下調用 outer(),在代碼體執行狀況下順便調用 inner(),因此仍是 window觸發
       //window 觸發outer（） ---》 outer()觸發 inner(),整個執行的最終環境仍是window對象

例3：

   function outer(){ //函數也是一個對象

       }

       //上一種建立方法中 outer（）是沒法訪問 inner()
       //給函數對象outer擴展一個函數
       outer.inner=function(){
           var that = this; //this指針指向 outer對象
           debugger;
       }
       outer.inner()

3.在普通匿名函數中， this表明 window 對象。

//匿名函數 1. 在一個小括號內定義，定義後函數存在在內存中，但沒法經過名字調用函數--- 通常操做是定義後直接調用，在預加載時檢測不到，在運行時檢測 ------建立後面加（）調用

匿名函數執行完會清掉內存
(function(){
var that = this; //this 永遠爲window對象

}) （）； //調用

匿名函數的使用場景：對於Js來講能區分做用域的只有function

for(var i=0 ;i<3; i++) { //這裏聲明的 var i 爲全局變量 ,全局變量在內存中不會被清除掉，只要網頁不關閉，就會越執行越多，內存佔用愈來愈多 ------

}
console.log(i);

</script>

>爲了在程序執行後就將內存清除掉

1.執行後會彈棧等待垃圾回收但 bb()做爲全局變量仍會佔內存

   function bb(){
           for(var i=0 ;i<3; i++) {

           }
       console.log(i);
       }

較好的解決方式 --用匿名函數解決

       (function(){
           for(var i=0 ;i<3; i++) {

           }
       })

alert( i ) ;---- i is not defined // 執行完已經清除

匿名函數的好處，能夠替代不須要的全局變量，從而省略內存。匿名函數的 this 永遠是 window

4.在構造函數中， this 表明當前調用構造函數建立的對象 new出來的新對象

new Fun的執行過程

1.建立了一個空對象 obj

2.空對象的原型鏈（_proto_ )指向了函數對象prototype對象。

3.修改函數對象的this指針爲新建立的對象引用 ---表明新建立對象的內存

4.執行函數體

在事件綁定事件處理函數時， this 表明觸發事件的 dom對象

1.綁定方式1

function clickButton(){
           that = this; //this = window對象
       }
       </script>
   </head>
   <body>
       <input type="button" value="aniniu" onclick="clickButton()">
   </body>

2.綁定事件2

   function clickButton(){
           that = this; //this == input
           debuggers
       }
       </script>
   </head>
   <body>
       <input type="button" value="aniniu" id= "but">
       <script>
           document.getElementById("but"). addEventListener ("click",clickButton())

//當前按鈕對象綁定，因此 this是當前按鈕對象。 </script> </body>