JS核心：用箭头函数解决this指向问题

背景

箭头函数是函数式编程的基础。这边文章主要分析如何用箭头函数解决匿名函数中的this指向问题。帮助您更加理解this的概念、熟悉箭头函数的使用场景。

箭头函数（ES6）

什么是箭头函数？ 箭头函数是常以匿名函数的形式出现，它有两个特点：它是更简短的函数，二是，它自己不产生面向对象中比较难以理解的this对象。下面详细分析它这两个特点：

1. 箭头函数是更短的函数

function main(args) {
 		return 表达式
}

转换成箭头函数后：

let main = (args) => 表达式
or
let main = args => 表达式 //如果只有一个参数，可以不写参数外面的括号。

2. 箭头函数没有自己的this

this。说到函数不得不说this对象，this是面向对象的产物。在普通函数中
，this可能有三种不同的含义：

1. 如果函数是一个对象的方法，那么它的this将指向这个对象。
2. 那么在严格模式下，函数调用，this将指向undefined.
3. 如果函数是构造函数，那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，这个语法概念，不能做面向对象编程，为了也能有它的特点（封装，继承，多态）， 它只能就通过各种函数类型（箭头函数，高阶函数等）来实现那些特性以达到代码复用的目的。
• 函数式编程的核心概念
  函数式编程主要有三个核心概念

1. 头等函数(First Class Functions)
   头等函数，是指您可以把函数可以当作值来使用。其可作为另一个函数的参数，或者返回值进行传递。高阶函数是它的具体实现形式。
2. 不变性
   不定性是指对象一旦创建，其状态不可再改变。
3. 没有副作用
   您用纯函数，基于相同的参数总是返回相同的结果。这意味纯函数不会直接修改外部对象的状态。

• 函数式编程的案例

/**
 * 验证码计时器。 控制验证码可重新发送的时机。
 */
const VerifyCodeCounter = () => {
        let count = RERIFY_CODE_TIMEOUT
        return function countDown() {
            return -- count
        }
    },

上面代码片段是函数式编程最小的单位。

1. 不可变：const关键字定义了一个不可变变量，
2. 头等函数：我们把箭头函数赋值这个这个变量，并返回一个函数。
3. 好处：代码复用。 这个函数封装了计时器功能。