箭头函数里this理解
先来看代码:
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理解的更多相关文章
- 理解JavaScript普通函数以及箭头函数里使用的this
this 普通函数的this 普通函数的this是由动态作用域决定,它总指向于它的直接调用者.具体可以分为以下四项: this总是指向它的直接调用者, 例如 obj.func() ,那么func()里 ...
- 进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题
首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数 函数 ...
- this(ES6箭头函数里的this)
一,了解前须知 1,箭头函数:出现的作用除了让函数的书写变得很简洁,可读性很好外:最大的优点是解决了this执行环境所造成的一些问题.比如:解决了匿名函数this指向的问题(匿名函数的执行环境具有全局 ...
- 简单理解ECMAScript2015中的箭头函数新特性
箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...
- JS中的箭头函数与this
转载自:https://juejin.im/post/5aa1eb056fb9a028b77a66fd#heading-1 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不 ...
- React:JS中的this和箭头函数
JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中 ...
- ES5与ES6 this 指向详细解析(箭头函数)
首先要明白箭头函数的作用: 箭头函数除了让函数的书写变得很简洁,可读性很好外:最大的优点是解决了this执行环境所造成的一些问题.比如:解决了匿名函数this指向的问题(匿名函数的执行环境具有全局性) ...
- [ES6系列-02]Arrow Function:Whats this?(箭头函数及它的this及其它)
[原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...
- ES6 箭头函数中的 this?你可能想多了(翻译)
箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...
随机推荐
- 关于linux系统CPU篇--->上下文切换
1.什么是CPU上下文切换? linux是一个多任务操作系统,它支持远大于CPU数量的任务同时运行,当然这些任务实际上并不是真的同时在运行,而是因为系统在很短的时间内,将CPU轮流分配给它们,造成多任 ...
- Oracle GoldenGate 18.1 支持的DB和OS列表
Product Release Processor Type OS Version OS Update Type OS Update Level Run Mode 32/64 Bit Database ...
- python接口自动化-接口重定向和编码格式
1.如果测试的接口重定向,那么只需添加allow_redirects=False禁止重定向就可: 2.如果请求的结果,中文出现没有解码 \xe9\x83\xad\xe7\xbf\xa0\xe6\x99 ...
- .NET平台常用的开发组件(csdn)
.NET平台常用的开发组件 原创 2017年02月24日 09:20:04 工欲善其事,必先利其器.学习.NET也10年有余,其优雅的编程风格,高效率的开发速度,极度简单的可扩展性,足够强大开发类库, ...
- docker17.03.2安装
之前安装过docker 卸载 yum -y remove docker docker-common docker-selinux docker-engine docker-engine-selinux ...
- MySql 8.0 C#连接报错 MySql.Data.MySqlClient.MySqlException (0x80004005): Authentication to host '12.118.224.181' for user 'root' using method 'caching_sha2_password' failed with message: Reading from t
解决方法 在连接字符串后面加上 SslMode=None
- 纯CSS3完成选项卡,不要js完成的选项卡
我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天就来敲一敲,选项卡,注意哦,不是一般利用js完成的选项卡,今天是纯用HTML和CSS来完成的,这怎么可能?那你不用js的点击事件,怎么处理? ...
- gulp插件实现压缩一个文件夹下不同目录下的js文件(支持es6)
gulp-uglify:压缩js大小,只支持es5 安装: cnpm: cnpm i gulp-uglify -D yarn: yarn add gulp-uglify -D 使用: 代码实现1:压缩 ...
- mui中confirm在苹果出现bug,confirm点击确定跳转页面再返回后,页面被遮罩盖住无法使用
项目中使用confirm mui.confirm('您还未抽奖,现在去抽奖吗?', function (res) { if (res.index === 1) { window.location.hr ...
- 剑指offer 09:变态跳台阶
题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. /* f(n-1) = f(n-2) + f(n-3) + ... + f(0 ...