先来看代码:

var obj1={
id:4,
fn:function(){
var f=() => {
console.log(this); //object,f()定义在obj1对象中,this就指向obj1,这就是箭头函数this指向的关键
setTimeout(function() {
console.log(this);//window,非箭头函数的情况下还是要看宿主对象是谁,如果没有被对象调用,函数体中的this就绑定的window上
});
}
f();
}
}
obj1.fn();

  正如注释说的那样,可以描述出箭头函数里的this定义:

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象,

定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

上面的

var f=() => {
console.log(this);
这一部分,箭头函数定义在了obj1对象里面,所以this指向obj1。 那么我们再来改变一下代码:
var obj1={
id:4,
fn:()=>{
var f=() => {
console.log(this);
setTimeout(function() {
console.log(this);
});
}
f();
}
}
obj1.fn();

  这里,我们给obj1的fn属性也改成了箭头函数,那么他又会输出什么呢?

没错,放到浏览器运行后,发现this都指向window对象。为什么不是obj1呢?

不是说箭头函数的this由定义的时候的作用域对象决定的吗?

其实是这样的,

var obj1={
id:4,
fn:()=>{
这里面,obj1是{id:4,fn:()=>{}}这一整个的定义,而obj1是定义在整个代码空间下,或者说window下。
所以this继承自window!!

箭头函数里this理解的更多相关文章

  1. 理解JavaScript普通函数以及箭头函数里使用的this

    this 普通函数的this 普通函数的this是由动态作用域决定,它总指向于它的直接调用者.具体可以分为以下四项: this总是指向它的直接调用者, 例如 obj.func() ,那么func()里 ...

  2. 进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题

    首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数  函数 ...

  3. this(ES6箭头函数里的this)

    一,了解前须知 1,箭头函数:出现的作用除了让函数的书写变得很简洁,可读性很好外:最大的优点是解决了this执行环境所造成的一些问题.比如:解决了匿名函数this指向的问题(匿名函数的执行环境具有全局 ...

  4. 简单理解ECMAScript2015中的箭头函数新特性

    箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...

  5. JS中的箭头函数与this

    转载自:https://juejin.im/post/5aa1eb056fb9a028b77a66fd#heading-1 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不 ...

  6. React:JS中的this和箭头函数

    JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中 ...

  7. ES5与ES6 this 指向详细解析(箭头函数)

    首先要明白箭头函数的作用: 箭头函数除了让函数的书写变得很简洁,可读性很好外:最大的优点是解决了this执行环境所造成的一些问题.比如:解决了匿名函数this指向的问题(匿名函数的执行环境具有全局性) ...

  8. [ES6系列-02]Arrow Function:Whats this?(箭头函数及它的this及其它)

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...

  9. ES6 箭头函数中的 this?你可能想多了(翻译)

    箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...

随机推荐

  1. 数据库表中不建索引,在插入数据时,通过sql语句防止重复添加

    sql 语句 INSERT IGNORE INTO table(aaa,bbb) SELECT '1111','2222' FROM DUAL WHERE NOT EXISTS( ' ) mybati ...

  2. linux使用vim打开乱码问题

    在windows中编辑好的汉字文本文档,上传到Linux下打开乱码. [root@localhost ~]# rpm -ivh /mnt/Packages/lrzsz-0.12.20-36.el7.x ...

  3. sourceTree 代码未同步合并

    在同一个分支下,提交代码会有代码合并情形. 1.未同步代码前,提交代码 2.提交报错 3. 拉取未同步的提交代码 4.点击提交到暂存区, 5. 暂存区变成2条,再点击推送. 6.sourceTree ...

  4. JS运算符、NaN

    一.关系运算符  (< <= > >= == === != !==) 判断符号左右的两个数据的大小之间的关系,运算结果是一个布尔类型的值 ==   只判断值 ===即判断值并且 ...

  5. k8s构建镜像-基于centos的python环境+pip

    FROM centos:7.4.1708 #维护者信息MAINTAINER by icdss # 标签LABEL version="1.0" # 安装依赖RUN yum -y up ...

  6. Job for network.service failed because the control process exited with error code

    转自:https://blog.csdn.net/dongfei2033/article/details/81124465 今天在centOS 7下更改完静态ip后发现network服务重启不了,翻遍 ...

  7. @Autowired注入报错

    在用  @Autowired  注入多个类时,出现的错误 因为@Autowired 是按照类型注入,当找不到对应类型类时,才会去按照名称去找. 这时添加注解@Qualifier(“service”), ...

  8. bzoj 4767 两双手 - 动态规划 - 容斥原理

    题目传送门 传送门I 传送门II 题目大意 一个无限大的棋盘上有一只马,设马在某个时刻的位置为$(x, y)$, 每次移动可以将马移动到$(x + A_x, y + A_y)$或者$(x + B_x, ...

  9. linux下的缓存机制及清理buffer/cache/swap的方法梳理 (转)

    一.缓存机制介绍 在Linux系统中,为了提高文件系统性能,内核利用一部分物理内存分配出缓冲区,用于缓存系统操作和数据文件,当内核收到读写的请求时,内核先去缓存区找是否有请求的数据,有就直接返回,如果 ...

  10. javascript函数的上下文

    规律1:函数用圆括号调用,函数的上下文是windows对象 所有的全局变量都是windows对象的属性,而函数里面的局部变量,不是windows的属性,不是任何东西的属性,它就是一个变量! 规律2:函 ...