你真的懂this指向？

先搞清楚一点，如果this在函数里面，那么它指向的是“函数执行后”的上一级调用对象。

        var a="this is a";
        function main() {
        console.log(this.a)//这里this指向window.
        }
        main()//这里相当于window.main()，默认window对象了，所以可以省略;



var o={
            x:"this is x",
            y:"this is y",
            say:function(){
                console.log(this.x);
            }
        }
        o.say();//这里的this指向的是对象o，因为你调用这个say是通过o.say()执行的，那自然指向就是对象o，这里再次强调一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁，一定要搞清楚这个。



var o={
            name:"maomin",
            say1:function(){
                console.log(this.name);//maomin
            }
        }
        window.o.say1();
        // 上面几行代码和之前的代码几乎相似，为什么没有指向window,这就回到了我刚开始说的，this如果在函数内，那么它指向的是该函数执行后的上一级调用对象。



var o={
             a:"this is a",
             b:{
                 a:"I am a",
                 say:function(){
                     console.log(this.a);//this is a
                 }
             }
         }
         var f=o.b.say;
         f();
    // 这里肯定有疑问了？为什么会指向o呢，不是应该指向b吗？这时你应该注意到这里say没有调用执行，而是通过o.b.say赋值给变量f,然后才被执行。这样就指向o了。



    function Fn(job){
            this.job=job;
        }
        var i=new Fn("I am Engineer");
        console.log(i.job);//I am Engineer
    // 这里是一个构造函数，注意的是this指向构造函数new出来的对象。
    // 首先new关键字会创建一个空的对象，然后会自动调用一个函数的一个方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。



    function Fn1(age){
            this.age=age;
            return {};
        }
        var ii=new Fn1("I am 21");
        console.log(ii.age);//undefined
        function Fn2(love){
            this.love=love;
            return function(){

            }
        }
        var iii=new Fn1("My grilfriend is xqm");
        console.log(iii.love)//undefined
        function Fn3(like){
            this.like=like;
            return 1;
        }
        var iiii=new Fn3("I like playing CF")
        console.log(iiii.like)//I like playing CF
// 当return一个对象时，打印出undefined。其他情况指向函数的实例。



针对上面一大堆的代码和解释是不是对this指向有点头疼呢，当然上面的都是在函数体内的，还有其他情况的this指向这里没说。
下面只是简单的列举
规律1 函数圆括号直接调用 函数上下文为window
规律2 函数作为对象的方法打点调用 函数上下文就是这个对象
规律3 函数作为事件的处理函数 函数上下文就是出发这个事件的对象
规律4 定时器调用函数 函数上下文为window
规律5 数组存放的函数 被数组索引调用 this就是这个数组
其实这五个规律前四个都涉及过，就是第五个没有接触过

function fun() {
        console.log(this)
}
    var arr=[fun,"a","a"];
    arr[0]();



其实仔细总结，如果this在函数里面，那么它指向的是“函数执行后”的上一级调用对象一直适用。

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路