JS中的箭头函数与this
转载自:https://juejin.im/post/5aa1eb056fb9a028b77a66fd#heading-1
JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不仅更加简洁,而且在this方面进行了改进。this作为JavaScript中比较诡异的存在,许多文章对于this的解释也不尽相同,本篇文章试图厘清JS中函数与this的关系。
一、JS中函数的写法
1.常规函数的写法
在ES6语法之前,JS中的函数由function关键字、params参数和被花括号包裹的函数体组成。为了与后面说到的箭头函数相区别,我们先把这样的函数叫做常规函数,常规函数既可以用声明式写法也可以用赋值式写法。例子:
function test(name) { //声明式写法
console.log(name)
}
test('Jerry') let test2 = function(name) { //赋值式写法
console.log(name)
}
test2('Tom')
2. 箭头函数的写法
ES6箭头函数的引入,使函数的写法变的更加简洁,但在书写上要遵循一定的规则。
规则一:箭头函数只能用赋值式写法,不能用声明式写法
const test = (name) => {
console.log(name)
}
test('Jerry')
规则二:如果参数只有一个,可以不加括号,如果没有参数或者参数多于一个就需要加括号
const test = name => {
console.log(name)
}
test('Jerry') const test2 = (name1, name2) => {
console.log(name1 + ' and ' + name2)
}
test2('Tom', 'Jerry')
规则三:如果函数体只有一句话,可以不加花括号
const test = name => console.log(name)
规则四:如果函数体没有括号,可以不写return,箭头函数会帮你return
const add = (p1, p2) => p1 + p2
add(10, 25)
记住:函数体的花括号与return关键字同在。
从以上的例子我们可以看出,箭头函数对常规函数的圆括号和花括号都进行了简化。除了这些简化,箭头函数对于常规函数最大的优化之处在于this。
二、理解常规函数中this
在探讨箭头函数对于this的优化之前,我们先得明白this究竟是什么,以及它是如何使用的。this是使用call方法调用函数时传递的第一个参数,它可以在函数调用时修改,在函数没有调用的时候,this的值是无法确定。
如果没有使用过call方法来调用函数的话,上面的对于this的定义可能不太明白。那么我们需要先理解函数调用的两种方法。
1. 纯粹的函数调用
function test(name) {
console.log(name)
console.log(this)
}
test('Jerry') //调用函数
这种方法我们使用最多,但是这种函数调用方法只是一种简写,它完整的写法是下面这样的:
function test(name) {
console.log(name)
console.log(this)
}
test.call(undefined, 'Tom')
注意到上面调用函数的call方法了吗?call方法接收的第一个参数就是this,这里我们传了一个undefined。那么,依据定义,函数执行了之后打出来的this会是undefined吗?也不是。
如果你传的 context 就 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)。
所以这里我们打出来的this是Window对象。
2. 对象中函数的调用
直接看例子:
const obj = {
name: 'Jerry',
greet: function() {
console.log(this.name)
}
}
obj.greet() //第一种调用方法
obj.greet.call(obj) //第二种调用方法
例子里第一种调用方法只是第二种调用方法的语法糖,第二种才是完整的调用方法,而且第二种方法厉害的地方在于它可以手动指定this。
手动指定this的例子:
const obj = {
name: 'Jerry',
greet: function() {
console.log(this.name)
}
}
obj.greet.call({name: 'Spike'}) //打出来的是 Spike
3. 构造函数中this
构造函数里的this稍微有点特殊,每个构造函数在new之后都会返回一个对象,这个对象就是this,也就是context上下文。
function Test() {
this.name = 'Tom'
}
let p = new Test()
console.log(typeof p) //object
console.log(p.name) // Tom
4. window.setTimeout()和window.setInterval()中函数的调用
window.setTimeout()和window.setInterval()的函数中的this有些特殊,里面的this默认是window对象。
test.call(context, name)
和obj.greet.call(context,name)
,这里的context就是函数调用时的上下文,也就是this,只不过这个this是可以通过call方法来修改的;构造函数稍微特殊一点,它的this直接指向new之后返回的对象;window.setTimeout()
和window.setInterval()
默认的是this是window对象。三、理解箭头函数中的this
上面关于this讲了很多,this是函数用call方法调用时传递的第一个参数,而且它还可以手动更改,这样要确定this的值就太麻烦了。不过,箭头函数的出现给我们确定this帮了一些忙。
1. 箭头函数的特性一:默认绑定外层this
上面提到:this的值是可以用call方法修改的,而且只有在调用的时候我们才能确定this的值。而当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层this的值,所以在箭头函数中this的值和外层的this是一样的。
不使用箭头函数例子:
const obj = {
a: function() { console.log(this) }
}
obj.a() //打出的是obj对象
使用箭头函数的例子:
const obj = {
a: () => {
console.log(this)
}
}
obj.a() //打出来的是window
在使用箭头函数的例子里,因为箭头函数默认不会使用自己的this,而是会和外层的this保持一致,最外层的this就是window对象。
2. 箭头函数的特性二:不能用call方法修改里面的this
这个也很好理解,我们之前一直在说,函数的this可以用call方法来手动指定,而为了减少this的复杂性,箭头函数无法用call方法来指定this。
const obj = {
a: () => {
console.log(this)
}
}
obj.a.call('123') //打出来的结果依然是window对象
因为上文我们说到window.setTimeout()中函数里的this默认是window,我们也可以通过箭头函数使它的this和外层的this保持一致:
window.setTimeout()的例子:
const obj = {
a: function() {
console.log(this)
window.setTimeout(() => {
console.log(this)
}, 1000)
}
}
obj.a.call(obj) //第一个this是obj对象,第二个this还是obj对象
四、多层对象嵌套里函数的this
箭头函数里的this是和外层保持一致的,但是如果这个外层有好多层,那它是和哪层保持一致呢?
直接上例子:
const obj = {
a: function() { console.log(this) },
b: {
c: function() {console.log(this)}
}
}
obj.a() // 打出的是obj对象, 相当于obj.a.call(obj)
obj.b.c() //打出的是obj.b对象, 相当于obj.b.c.call(obj.b)
上面的代码都符合直觉,接下来把obj.b.c对应的函数换成箭头函数,结果如下:
const obj = {
a: function() { console.log(this) },
b: {
c: () => {console.log(this)}
}
}
obj.a() //没有使用箭头函数打出的是obj
obj.b.c() //打出的是window对象!!
MDN官方文档里面描述箭头函数this定义的时候,描述的是“箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。",所以最后一个例子,打出window对象的原因,是window对象就是它的上一层this,而多层嵌套只是对象嵌套,这时候没有作用域链的嵌套。
JS中的箭头函数与this的更多相关文章
- JS中的普通函数和箭头函数
最近被问到了一个问题: >javaScript 中的箭头函数 (=>) 和普通函数 (function) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答 ...
- 简单理解ECMAScript2015中的箭头函数新特性
箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...
- ES6中的箭头函数与普通函数的区别
箭头函数与普通函数的区别 1.语法上更加简洁.清晰 基本语法: // 关于箭头函数的参数 // 如果箭头函数没有参数,直接写一个括号即可 let fun1 = () => { console.l ...
- js中的回调函数的理解和使用方法
js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...
- underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...
- ES6中的箭头函数
关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创 ...
- js中如何在一个函数里面执行另一个函数
1.js中如何在函数a里面执行函数b function a(参数c){ b(); } function b(参数c){ } 方法2: <script type="text/javasc ...
- JavaScript -- 时光流逝(七):js中的全局函数
JavaScript -- 知识点回顾篇(七):js中的全局函数 全局函数可用于所有内建的 JavaScript 对象. (1) encodeURI():把字符串编码为 URI. <script ...
- js中的匿名函数和匿名自执行函数
1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: <input type="button" value="点击" id ...
随机推荐
- Codeforces Round #554 (Div. 2) D 贪心 + 记忆化搜索
https://codeforces.com/contest/1152/problem/D 题意 给你一个n代表合法括号序列的长度一半,一颗有所有合法括号序列构成的字典树上,选择最大的边集,边集的边没 ...
- 【BZOJ4518】[SDOI2016] 征途(重拾斜率优化DP)
点此看题面 大致题意: 让你把一个长度为\(n\)的序列划分成\(m\)块,求每块数总和的最小方差乘\(m^2\)的值. 转化方差 首先方差显然是一个比较复杂的东西,需要进行一定转化. 设\(p_i\ ...
- STM32移植ROS--发布超声波信息
前言:之前ROS跟单片机的底层通讯主要是通过串口自定的协议来做,比如官网提供的arduino串口驱动一样,需要ROS往下发一个指令,单片机再回传一个指令,要写一大堆的协议,这样很麻烦,效率也比较低, ...
- HTTP和RPC是现代微服务架构,HTTP和RPC是现代微服务架构
.NET Core使用gRPC打造服务间通信基础设施 一.什么是RPC rpc(远程过程调用)是一个古老而新颖的名词,他几乎与http协议同时或更早诞生,也是互联网数据传输过程中非常重要的传输机制 ...
- 在Windows下的virtualenv中搭建Flask+MySQLDb开发环境
virtualenv和Flask的安装前面已经介绍过了,这里主要讲如何在venv中安装MySQL 安装MySQLdb 下载MySQL-python-1.2.3.win32-py2.7.exe并安装. ...
- Pytest 使用简介
前言 最近在听极客时间的课程,里面的讲师极力推崇 pytest 框架,鄙视 unittest 框架,哈哈!然后查了些资料,发现了一条 python 鄙视链:pytest 鄙视 > unittes ...
- SQL Server 判断各种对象是否存在和sysobjects的关系
一.判断表是否存在 object_id():获取表的ID,其中N表示Unicode类型.可以支持不同语种的对象名 ) drop table [dbo].[表名] 二.判断要创建的存储过程名是否存在 ) ...
- C# 消息队列之 RabbitMQ 基础入门
Ø 简介 C# 实现消息队列的方式有很多种,比如:MSMQ.RabbitMQ.EQueue 等,本文主要介绍使用 RabbitMQ 实现消息队列的基础入门.包括如下内容: 1. 什么是消息队列? ...
- RSA应用指数与模生成公钥(ArcGIS Server)
参考: https://www.cnblogs.com/luo30zhao/p/10515594.html https://blog.csdn.net/skiof007/article/details ...
- Thread 另类用法,如何执行一段可能死锁/卡死/死循环的代码
场景与需求 需要执行一段第三方的代码,这段代码可能死锁/卡死/死循环,在超时之后,如果没有结束,则认为任务执行失败,退出执行. 实现方案1:使用 Task 超时 实现方法参考: https://www ...