关于this

有时候我们会搞不明白在javascript中this到底指向谁，下面我们就整理一下怎么判断this指向

this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁，实际上 this 的最终指向的是那个调用它的对象。当函数被调用的时候，有一个最简单的判断 this 指向的方法：看前面时候有 ., .前面是谁， this 就指向谁。

    var name = 'James';
    function fn(){
        var name = 'Curry';
        console.log(this.name);     //"James"
        console.log(this);      //"Window"
    }
    fn();

定义的 name 属性为全局属性，函数 fn() 是一个全局函数，全局属性和全局函数都是对象 Window的方法。当函数 fn() 被调用的时候就是就相当于被 Window 对象调用，即 Window.fn() ,只不过 Window 对象不需要显示，所以函数 fn() 被调用时，this 指向 Window。

    var obj = {
        name: 'James',
        fn: function (){
            console.log(this.name);     //"James"
            console.log(this);       //{name: "James", fn: ƒ}
        }
    };
    obj.fn()

这里的 this 指向的是对象 obj，因为你调用这个 fn() 是通过 obj.fn() 执行的，那自然指向对象 obj。

为dom元素添加事件，当这个事件被触发的时候，会执行一个函数，函数中的 this 指向当前这个元素

    <style>
        #btn{
            width: 200px;
            height: 50px;
            background: rgba(24, 195, 225, 0.84);
        }
    </style>

    <div id="btn"></div>

    <script>
        var oBtn = document.getElementById('btn')
        oBtn.onclick = function (){
            console.log(this);      //<div id="btn"></div>
        }
    </script>

立即执行函数的 this ，永远都是指向 window

    var obj = {
        num: 999,
        number: 3,
        fn: (function () {
            console.log(this);      //"Window"
            //console.log(num);       //报错：num is not defined
            console.log(this.num);      //undefined
        })()      //立即执行函数
    }

立即执行函数是指声明完之后便直接执行的函数，不管实例对象 obj 中的 fn() 函数有没有调用，所以立即执行函数中的 this 指向 Window 。而在全局作用域中由于并不存在变量 num，所以 this.num (即 window.age )便不存在，就返回了 undefined 。

回调函数的 this ,一般都是指向 window

    var obj = {
        age: 18,
        say: function (){
            function callback(){
                return this.age;
            }
            fn(callback)
        }
    }
    function fn(callback){
        var name = 'James';
        console.log(name + ' is ' + callback() + ' years old')
    }
    obj.say();      //"James is undefined years old"

fn()中执行的回调函数 callback() 返回的结果是 undefined 而不是 12，函数内部的 this 指向于此函数的调用者（拥有者）。在上面这个例子中，虽然 callback 函数定义于对象 obj 的 say() 方法中，但实际上由于 callback 是在fn 函数中进行的普通调用，那么 fn 中的 callback 的调用者我们便可以理解为是 window 对象，因此， callback 中的 this 便指向了 window ，而在全局作用域中由于并不存在变量 age ，所以 this.age (即 window.age )便不存在，就返回了 undefined 。

那么我们怎么得到我们需要的值呢，可以使用 call/apply/bind 改变this指向来得到我们需要的值
将 fn 中对 callback() 的调用方式换成

callback.call(obj)

或

callback.apply(obj)

或者

callback.bind(obj)

通过使用方法 call/apply/bind 将 callback 内部的 this 指向对象 obj ,这样可得到我们想要的结果

 console.log(name + ' is ' + callback.call(obj) + ' years old');      //"James is 18 years old"

    var age = 100;
    var obj = {
        age: 18,
        say: function (callback){
            this.fn = callback;
            this.fn()
        },
        say2: function (callback){
            callback()
        }

    }
    function callback(){
        console.log(this.age)
    }
    obj.say(callback);      //"18"
    obj.say2(callback);      //"100"

obj.say(callback) 触发时，进入 say 函数的执行上下文，此时this指向 say 函数的调用者 obj
obj.say2(callback) 触发时，进入 say 函数里的 callback 函数，也就是全局函数 callback 函数本身，此时的 this 指向全局作用域中 callback 的调用者 window 对象。