JavaScript中函數的this指向!

JavaScript的this的指向問題!

這是我本身敲的， 報錯！

<button>點擊查看綁定事件的this指向！</button>
    <script>
        // 函數的不一樣調用方式決定了this 的指向不一樣！ 

        // 1 普通函數 this 指向window
        function fn() {
            console.log('普通函數的this指向' + this);
        }
        window.fn();
        // fn.call();

        // 2 對象的方法！就是函數放在對象裏面！this 指向當前的對象 obj！
        var obj = {
            sWhat() {
                console.log('對象中的方法的調用的this指向' + this);
            }
        }
        obj.sWhat();

        // 3 構造函數 this 指向咱們的實例化對象 xiaoshi
        function Singer() {};
        // 在咱們構造函數原型上的方法也是指向咱們實例化對象的！
        Singer.prototype.guitar = function () {

        }
        var xiaoshi = new Singer();
        // 4 綁定事件函數 this 指向的是函數的調用者 btn 這個按鈕對象！
        var btn = document.querySelector('button')
        btn.onclick = function () {
            console.log('綁定事件函數的this指向' + this)
        }; // 點擊了按鈕就會調用這個函數！

        // 5 定時器函數
            window.setTimeout(function () {
                console.log('定時器函數中的this指向' + this);
            }, 1000)

        // 6 當即執行函數
        // 當即函數的構成 (function() {})()
        (function() {
            console.log('當即執行函數的this' + this);
        })();
        // 當即執行函數的第二種寫法！
        // (function () {
        //     console.log(this)
        // }())
    </script>

{{uploading-image-628696.png(uploading...)}}

下面的是老師的代碼！

<button>點擊查看綁定事件的this指向！</button>
    <script>
        // 函數的不一樣調用方式決定了this 的指向不一樣
        // 1. 普通函數 this 指向window
        function fn() {
            console.log('普通函數的this' + this);
        }
        window.fn();
        // 2. 對象的方法 this指向的是對象 o
        var o = {
            sayHi: function() {
                console.log('對象方法的this:' + this);
            }
        }
        o.sayHi();
        // 3. 構造函數 this 指向 ldh 這個實例對象 原型對象裏面的this 指向的也是 ldh這個實例對象
        function Star() {};
        Star.prototype.sing = function() {

        }
        var ldh = new Star();
        // 4. 綁定事件函數 this 指向的是函數的調用者 btn這個按鈕對象
        var btn = document.querySelector('button');
        btn.onclick = function() {
            console.log('綁定時間函數的this:' + this);
        };
        // 5. 定時器函數 this 指向的也是window
        window.setTimeout(function() {
            console.log('定時器的this:' + this);

        }, 1000);
        // 6. 當即執行函數 this仍是指向window
        (function() {
            console.log('當即執行函數的this' + this);
        })();
        </script>

我本身以爲沒有什麼不同 啊!

詳細的請看下錶！

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