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

重点： this指向并不是一开始就定义好的，而是在函数调用执行的时候才知道它指向的是谁！