javascript - 箭头函数的this指向问题
巴扎黑
巴扎黑 2017-04-11 11:50:18
[JavaScript讨论组]

箭头函数的this是在定义时就确定了,那obj.foo()的this应该指向obj啊,
为什么打印出来是window?

巴扎黑
巴扎黑

全部回复(6)
PHPz

箭头函数中的this是指向外部作用域中的this,你在执行obj.foo()时,foo的当前作用域是obj,外部作用域是window,所以得到window。你所说的obj.foo()的this应该指向obj是普通函数的情况,即:

var obj = {
    foo: function () {
        console.log(this)
    }
}

由于箭头函数的this指向外部作用域的this,所以要达到你说的效果,应该把foo再包装一层:

var obj = {
    foo: function () {
        /* 这是foo的作用域 */
        (() => {
            /* 这是箭头函数的作用域 */
            console.log(this)
        })()
    }
}

此时调用obj.foo()时,foo作用域的thisobj,内部的箭头函数指向外部作用域的this,即foo作用域下的this,因此得到obj

阿神

1.箭头函数作为函数的一种形式,对于this的处理和普通函数有所区别,其没有自己的this上下文,也就是说通过bind/call/apply函数方法设置this值时无效的,会被忽略
2.因为箭头函数没有自己的this上下文,那么当它作为对象的方法函数运行时,this并不指向这个对象
3.箭头函数的的函数体中出现的this在运行时绑定到最近的作用域上下文对象
4.你可以认为箭头函数的this和调用者无关,只和其定义时所在的上下文相关

对于问题中的代码

var obj = {
    foo: () => console.log(this)
}

运行foo箭头函数时,将会查找this绑定的上下文对象,如果obj定义在一个函数体内,那么这个this就绑定到这个函数体对应的this对象上;如果定义在一个全局作用域下,那么就绑定到全局window对象上(浏览器环境下)

function objWrapper(){
    var a=10;
    var obj = {
        foo: () => console.log(this.a)
    };
    obj.foo();
}
objWrapper.call({a:20});//20
objWrapper();//undefined
高洛峰

箭头函数不会产生自己作用域下的this,除了this还包括 arguments, super 和 new.target 等对象

PHP中文网

箭头函数没有自身的 this, arguments, super, new.target, 而是通过上溯词法作用域找到最近定义的那个.

var obj = {
    foo: () => console.log(this)
}

这段代码里箭头函数里头的 this 指向的是定义了箭头函数的那个执行上下文, 显然即 window.

PHPz

跟用不用箭头函数没关系啊、
JS中function的this指向调用者、
test() 和 window.test()是一样的、所以我写的这个例子this指向window

那就算用了箭头函数、只要看作用域的范围就行了、

怪我咯
var obj={a:this};
console.log(obj.a)

哪错了?既然要踩就把问题指出来,谢谢。
这么不就能看在对象中的this究竟是什么吗?箭头函数找的不也是同一个this?
箭头函数的this不是就近取的吗?
要从所在环境就近取this,最近的this就是window.

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号