ES6新特性 JS 箭头函数 普通函数 this指向问题

普通函数的this

普通函数的 this 就是调用对象

	    let x = 111;
        let obj  = {
            x: 222,
            f() {
                console.log(this);
            }
        };
        obj.f();

        /*
            {x: 222, f: ƒ}
        */

如上面这个例子，obj 调用了 f()，所以 f() 打印的 this 是 obj

箭头函数的this

箭头函数没有自己的 this，那么他指向谁呢？是他定义所在的外层函数。

        let x = 111;
        let obj  = {
            x: 222,
            f() {
                let j = {
                    x: 222,
                    show: () => {
                        console.log(this);
                    }
                };
                j.show();
            }
        };
        obj.f();

        /*
            {x: 222, f: ƒ}
        */

如上面这个例子，找一下 show() 的外层函数，发现是 f()，而 f() 指向的 this 是 obj，所以打印出来是 obj

        let x = 111;
        let obj  = {
            x: 222,
            show: () => {
                console.log(this);
            }
        };
        obj.show();

        /*
            window
        */

再看上面这个例子，因为外层函数是不存在的，故指向 window，所以打印出来是 window

因为以上原因，所以不建议在json对象里面写箭头函数，建议在里面用普通函数。

输出哪个 x？

        let x = 111;
        let obj  = {
            x: 222,
            show() {
                console.log(x);
            }
        };
        obj.show();

        /*
            111
        */

如上，输出的是 obj 外层的 x 111，为什么呢？因为 obj 的 x，是 obj.x，不是 x，所以得这么写：

        let x = 111;
        let obj  = {
            x: 222,
            show() {
                console.log(this.x);
            }
        };
        obj.show();

        /*
            222
        */

这个 this 指向 obj，所以 this.x 就是 obj.x，即 222
如果里面的普通函数换成箭头函数，就出大事了。

        let x = 111;
        let obj  = {
            x: 222,
            show:() => {
                console.log(this.x);
            }
        };
        obj.show();

        /*
            undefined
        */

因为此时的箭头函数 show 的 this 指向 window，而 window 里面并没有 x，所以是 undefined，当然，如果把 let 声明的 x，换成 var，也是可以输出的，但是 ES6 新特性让咱们用 let，咱们就不要再思蜀了。

谢谢。