浅谈js中的this

js中的this大家都有基本的共识，那就是执行上下文，当前调用者。下面讲述一个简单的例子

var obj = {
    val: 2,
    a: function() {
        console.log(this)
    }
}
obj.a(); //obj对象
var x = obj.a;
x(); 

对于第一个打印是obj没有疑问，第二个为什么是window？定义x变量，其实是var x 等价于 window.x，x()也就等价于window.x(),调用者是window。
这只是js中this最常见的一个案例。下面将讲解this更魔性的地方。

箭头函数也普通匿名函数的区别

比如上面的例子，我将a使用箭头函数会有什么区别了

var obj = {
    val: 2,
    a: () => {
        console.log(this)
    }
}
obj.a(); 
var x = obj.a;
x(); 

2个都会打印window，魔性开始，这里我先说一个箭头函数的原理，在匿名函数的基础上箭头函数会绑定当前父环境的this。
obj所在的环境是window，箭头函数就会绑定window。下面难度升级

    var haha = {
        x: function () {
            var obj = {
                a: () => {
                    console.log(this)
                },
                b: function () {
                    console.log(this)
                }
            };
            return obj;
        }
    };
    var y = haha.x();
    y.a();
    y.b();

我们一步一步来看
执行完haha.x()，当前调用者是window,接着执行y.a(),obj所在的环境是haha这个对象，当前的环境是在haha这个对象中，执行y.b()时，调用者是obj这个对象，所以分别打印的是haha和obj

再看2个例子

    var obj = {
        say: function ()  {
            var f1 = () => {
                console.log(this);
                setTimeout(() => {
                    console.log(this);
                })
            }
            f1();
        }
    }
    obj.say()

    var obj = {
        say: function () {
            var f1 = function () {
                console.log(this); 
                setTimeout(() => {
                    console.log(this);
                })
            };
            f1();
        }
    }
    obj.say()

第一个例子都会打印obj，分析一下，执行obj.say时，此时箭头函数所处的环境是obj，执行完f1时，this为obj定时器也是obj
第二个例子都会打印window，明明是obj调用的怎么会是window，原因就是最终f1执行是，并没有宿主对象来调用这个f1，所有f1执行就是window调用的f1，而匿名函数又不能绑定当前环境，所以打印的就是window

在写js时，会经常用到回调，可以使用箭头函数，也可以使用匿名函数，箭头函数会绑定当前环境的this