js箭头函数的this指向

        var x = 11;
        var obb = {
            x: 222,
            y: {
                x:333,
                obc: function f() {
                    console.log(this)
                    var x = 111;
                    var obj = {
                        x: 22,
                        say: () => {
                            console.log(this.x);
                        }
                    }
                    obj.say()
                }
            }
        }
        obb.y.obc()

输出结果是333,
原因箭头函数没有this,剪头函数的this是继承父执行上下文里面的this ,这里箭头函数的执行上下文是函数f(),所以它就继承了f()的this,

注意:简单对象(非函数)是没有执行上下文的!

js箭头函数的this指向_第1张图片
所以就是333


    var x = 11;
    var obb = {
        x: 222,
        y: {
            x: 333,
            obc: f = () =>{
                console.log(this)
                var x = 111;
                var obj = {
                    x: 22,
                    say: () => {
                        console.log(this.x);
                    }
                }
                obj.say();
            }
        }
    }
    obb.y.obc()

如果f也是一个剪头函数,它就只能继续向上找也就是window了

js箭头函数的this指向_第2张图片


如果是普通函数

var x = 11;
        var obb = {
            x: 222,
            y: {
                x:333,
                obc: function() {
                    var x = 111;
                    var obj = {
                        x: 22,
                        say: function() {
                            console.log(this.x);
                        }
                    }
                     obj.say()
                }
            }
        }
        obb.y.obc()

输出结果是22,普通函数的this指向是调用它的那个对象,这里调用say进行打印的是obj对象。

无法使用 new 实例化对象 因为普通构造函数通过 new 实例化对象时 this 指向实例对象,而箭头函数没有 this 值,同时 箭头函数也没有 prototype。

你可能感兴趣的:(javascript)