js中函數內部的this指向問題

一、函數內部的this指向

函數內this的指向，是當我們調用函數的時候才能確定，調用方式的不同決定了this的指向不同

 

調用方式	this指向
普通函數調用	window
構造函數調用	實例對象，原型對象里面的方法也執行實例對象
對象方法調用	該方法所屬的對象
事件綁定方法調用	綁定事件對象
定時器函數	window
立即執行函數	window

 

上述代碼演示驗證：

1、普通函數調用

  function fn() {
            console.log('普通函數this的指向為：' + this);
        }
        fn();

結果：

指向函數的調用者window，因為普通函數調用完整的寫法是window.fn(),故此時this指向函數的調用者即window

2、對象的方法調用

   var o = {
            fn: function() {
                console.log('對象方法中的this指向:' + this);
            }
        }
        o.fn();

結果：

 

 

 

指向方法所屬的對象o，對象o調用了fn（）方法，故指向對象o

3、構造函數調用

 function Star() {
            console.log('構造函數中的this指向：' + this);
        }
        var lhc = new Star();

結果：

 

指向由構造函數所創建的實例對象lhc

特殊：構造函數原型對象prototype里面方法中的this也指向被創建的實例對象lhc

 function Star() {
            // console.log('構造函數中的this指向：' + this);
        }
        Star.prototype.fn = function() {
            console.log('構造函數原型對象里方法中的this指向：' + this);
        }
        var lhc = new Star();
        lhc.fn();

結果：

指向由構造函數所創建的實例對象lhc

4、綁定事件函數

var btn = document.querySelector("button");
    btn.onclick = function() {
        console.log('綁定事件里面this的指向:' + this);
    };

結果：

 

 

 

指向函數的調用者,btn這個按鈕對象

5、定時器函數

 window.setInterval(function() {
        console.log('定時器函數里面的this指向:' + this);
    }, 1000)

結果：

 

指向函數的調用者window對象

6、立即執行函數

 (function() {
        console.log('立即執行函數里面的this指向：' + this);
    })();

結果：

指向函數的調用者window對象，立即執行函數不需要調用立即可以執行，同普通函數一樣