箭头函数的this指向
这里先明确一点:箭头函数的 this 指向比较特殊,它总是指向其最近的外层函数作用域的 this 所指对象
箭头函数
箭头函数为以下形式的函数
const func = (paramList) => {// 函数体
}
按照习惯,将箭头函数作为单独一个函数来使用的情况并不多,往往是当要传入的参数是函数时才使用箭头函数
// 比如事件处理函数
elem.addEventListener("click", () => {// 函数体
})
this在函数中的指向
我们常用函数关键字function
来声明一个函数,在一个function()
中,this
总是指向调用这个函数的对象。但箭头函数的this
指向有点特别,它总是指向最近的外层作用域中的this
所指对象
下面用例子来说明:
// 这里有两个点击事件,一个绑定的事件处理函数为普通函数,一个为箭头函数func.addEventListener("click", function() {console.log(this);
});arrow.addEventListener("click", () => {console.log(this);
});
代码效果图如下:
由控制台打印结果可以看到:
普通函数构造的事件处理函数的this
指向的是事件源对象(button
)
箭头函数构造的事件处理函数中的this
指向的是其最近外层函数作用域中的this
指向的Window
对象
再看一个例子:
const obj = {func1() {setTimeout(function() {console.log(this);})},func2() {setTimeout(() => {console.log(this);})}
}
obj.func1(); // 打印出 Window
obj.func2(); // 打印出 当前对象obj
代码效果图如下:
这一次function
构造的函数中的this
指向了调用它的window
对象,而箭头函数中的this
指向了最近的外层函数作用域中的this
指向的对象obj
文章源码:https://gitee.com/thisismyaddress/bocheng-blogs/tree/master/js/箭头函数的this指向
箭头函数的this指向相关推荐
- 箭头函数的this指向谁_高阶函数
NodeJS 系列文章,本篇是第一篇,首先,预计将后续高频使用逻辑串一遍,依次是高阶函数,promise以及事件机制.本篇主要是高阶函数. call.bind.apply call.apply 都是改 ...
- 箭头函数的this指向谁_你好,我是 JavaScript 的 this
JavaScript 有个关键字 this, 时不时冒出来,让你猜一猜,"我到底指向谁?" 这个 this 指向 window, 那个 this 又是刚刚 new 出来的新对象,这 ...
- 箭头函数 改变this指向
1.箭头函数 <div>我是div</div><script>const oDiv = document.querySelector('div');// 普通函数o ...
- ES6语法---箭头函数/关于this指向
this指向问题: ES5:var obj = {x:1,func:function(){console.log(this.x);},test:function(){//定时器为异步setTimeou ...
- ES6 箭头函数及this指向
1.箭头函数 用箭头 => 定义函数 var fn = function(num){return num; }var fn1 = (num)=>num;var fn3 = ()=>1 ...
- 关于箭头函数中this指向问题
对于箭头函数中的this指向问题一直困扰我很久,查阅文章现在终于弄懂了. 先上一段代码: var user="Absorbed-22";let person={user:" ...
- javascript箭头函数和this的指向问题
箭头函数 下面两代码等价: const fun1 = function(x){return x*x;}const fun = x => x*x; function换成=>,放在参数和函数体 ...
- Vue中的methods配置项中的箭头函数this指向及相关源码分析
之前在使用Vue时遇到一个问题,我们知道在Vue的methods中定义函数时,要想使用到Vue实例或者组件实例的this时,我们就不能使用箭头函数定义方法,因为箭头函数中的this是在函数定义时生成的 ...
- js箭头函数/函数this指向
一.函数的this指向 this是每一个函数都 一定有的关键词 this本质上是一个对象数据结构 用于指向数据 通过this关键词,可以调用操作这个 数据 1.this指向window 声明式函 ...
最新文章
- JSF实现“Hello World!”
- HGST:中国将成为新云端运算大国
- python分发包_Python 分发包中添加额外文件的方法
- 关于华科的计算系统结构专业
- USB共享网络:android手机通过USB与Ubuntu进行socket网络通信
- ajax跨域请求的问题
- 字节跳动AI Lab招聘算法工程师,含全职和实习
- jvm 参数_JVM快速调优手册之六:JVM参数设置及分析
- python物业管理系统_小型物业管理系统的设计与实现研究背景及意义
- 数据库——添加外键约束
- php 京东 联盟 链接,京东联盟推广链接在微信上如何直接跳转接入到京东小程序下单购买?...
- 如何删除双系统中的其中一个(完全删除)
- 在一起计时器_浅谈§1.4 实验:用打点计时器测速度
- U8文件服务器备份,u8备份缓存文件在哪
- 常见的java开发面试题整理
- android获取uid,Android获得UID的办法
- 实行会员制能够从哪些方面帮助到门店经营?
- 1 小时 47 分钟破 1000 亿, 双 11 十周年,你剁手了多少钱?
- BBKi370孢子手机版java_孢子进化手机游戏
- Bella Fang做客耳朵财经,详述新加坡WBF交易所的流量运营之道