背景
箭头函数是函数式编程的基础。这边文章主要分析如何用箭头函数解决匿名函数中的this指向问题。帮助您更加理解this的概念、熟悉箭头函数的使用场景。
箭头函数(ES6)
什么是箭头函数? 箭头函数是常以匿名函数的形式出现,它有两个特点:它是更简短的函数,二是,它自己不产生面向对象中比较难以理解的this对象。下面详细分析它这两个特点:
1. 箭头函数是更短的函数
function main(args) {
return 表达式
}
转换成箭头函数后:
let main = (args) => 表达式
or
let main = args => 表达式 //如果只有一个参数,可以不写参数外面的括号。
2. 箭头函数没有自己的this
this。说到函数不得不说this对象,this是面向对象的产物。在普通函数中
,this可能有三种不同的含义:
- 如果函数是一个对象的方法,那么它的this将指向这个对象。
- 那么在严格模式下,函数调用,this将指向undefined.
- 如果函数是构造函数,那this将指的新的对象。
参考如下代码片段:
function Persion() { //定义构造函数
this.age = 0; // this指向p
setInterval(function() {
this.age++; // 在严格模式下 this指向undefined。非严苛模式 p指向全局对象
},1000)
var p = new Persion()
如果要解决严苛模式下this指向undefined的问题,可以这样做:
解决this指向undefined的问题
在老版本ES5, 将this先分配一个局部变量,可以解决匿名函数内部this指向undefined。
function Persion() { //定义构造函数
var that = this //将this分配一个局部变量
that.age = 0; // this指向p
setInterval(function() {
that.age++; // 这个时候that可以访问的p对象。
},1000)
var p = new Persion()
除了用上面的办法,我们可以使用箭头函数,让代码逻辑更加清晰:
function Persion() { //定义构造函数
this.age = 0; // this指向p
setInterval(() => {
this.age++; // 箭头函数从自己的作用域链上一层继承的this,所以这个this也指向p
},1000)
var p = new Persion()
箭头函数不会产生this,它会从作用域链的上一层继承this。所以这里传递给setInterval函数内部的this和其局部变量this的指向一致。
总结
本文通过解决一个问题(严苛模式下,匿名函数中this指向undefined),向您介绍了this可能表示的三种含义,以及什么是箭头函数,箭头函数内部this的使用原理。
参考链接
扩展:函数式编程
- 函数式编程的目的
为什么要用函数式编程?旧的js没有Class,这个语法概念,不能做面向对象编程,为了也能有它的特点(封装,继承,多态), 它只能就通过各种函数类型(箭头函数,高阶函数等)来实现那些特性以达到代码复用的目的。 - 函数式编程的核心概念
函数式编程主要有三个核心概念
- 头等函数(First Class Functions)
头等函数,是指您可以把函数可以当作值来使用。其可作为另一个函数的参数,或者返回值进行传递。高阶函数是它的具体实现形式。 - 不变性
不定性是指对象一旦创建,其状态不可再改变。 - 没有副作用
您用纯函数,基于相同的参数总是返回相同的结果。这意味纯函数不会直接修改外部对象的状态。
- 函数式编程的案例
/**
* 验证码计时器。 控制验证码可重新发送的时机。
*/
const VerifyCodeCounter = () => {
let count = RERIFY_CODE_TIMEOUT
return function countDown() {
return -- count
}
},
上面代码片段是函数式编程最小的单位。
- 不可变:const关键字定义了一个不可变变量,
- 头等函数:我们把箭头函数赋值这个这个变量,并返回一个函数。
- 好处:代码复用。 这个函数封装了计时器功能。