5.深入理解箭头函数 - JS

什么是箭头函数?

箭头函数是指通过箭头函数表达式创建的函数,是匿名函数。

箭头函数表达式的语法更简洁,但语义有差异,所以用法上也有一些限制。尽管如此,箭头函数依旧被广泛运用在需要执行“小函数”的场景。

箭头函数表达式的基本语法

/* 函数体只有一个语句 */
() => 单个语句
单个参数 => 单个语句
(单个参数) => 单个语句
(参数1, 参数2) => 单个语句
let f = ()=>console.log(111)
f() === undefined		// true

/* 函数体有多个语句,使用{} */
() => { 多个语句 }
单个参数 => { 多个语句 }
(单个参数) => { 多个语句 }
(参数1, 参数2) => { 多个语句 }
let g = ()=>{}

箭头函数表达式的语法说明

  1. 只有一个参数时,() 可以省略;
  2. 函数体只有单个语句,{} 可以省略,返回值就是该语句/表达式的值;
  3. 函数体有多个语句,必须使用 {} 包围;
  4. 语法上,返回一个对象字面量时,加 ()
  5. 箭头是复合符号,不要空格或换行;
  6. 参数列表和箭头之间不要换行;
  7. 箭头 => 的优先级不高,在符合运算中尽量用 () 包围。
let f = ()=>{ a:1 }			// 不报错,a被当成一个标签,执行了表达式 “1”,返回 undefined
let f = ()=>{ a: 1, b: 2 }	// 报错
let f = ()=>{ a: 1; b: 2 }	// 不报错,a,b都时标签
let f = ()=>( {a:1, b:2} )	// 不报错,()改变了优先级

let g = () = > {}			// 报错
let g = () 					// 报错
	=> {}

let x = f || ( ()=>{} )

箭头函数的限制:

  • 箭头函数不绑定 this,会捕获其声明所在上下文this,且 call/apply/bind 方法都不会改变其指向;
  • 不能用作构造函数,不能使用 new 调用,会引发类型错误,函数体内也无法访问 new.target
  • 不能使用 yield,不能用做生成器函数;
  • 没有 arguments 对象,可以使用剩余参数取而代之;
  • 没有原型对象 prototype 这个属性。

this 的绑定问题

箭头函数没有独立的 this,下面将依次总结其如何绑定上下文的 this、避免用作方法等限制问题。

绑定上下文的 this

箭头函数捕获声明所在上下文this 并绑定,考虑捕获绑定顺序如下:

  1. 外层函数:内部的箭头函数和外部(临近)的普通函数有相同的 this 绑定;
  2. :类具有封闭独立的 this 上下文,箭头函数作为方法时,将自动绑定实例的 this;本质就像闭包,有独立的变量环境,不会因为属性解构等操作改变其绑定。
  3. 全局:当以上不符合,一般和全局 globalThis 绑定。

由于箭头函数会绑定外部函数的 t h i s this this,所以在一些需要访问外部属性时常用,诸如函数 setTimeout/setInterval、方法 forEach/map 等。下面一个例子中:

  • showGroup2 内部的箭头函数绑定的是外部函数的 this,指向 w b 对象 wb对象 wb对象,所以能够访问其属性 group
  • showGroup3 绑定的是全局(globalThis),指向 全局对象 全局对象 全局对象,访问的是全局属性;
  • convert 内部的箭头函数绑定的是 this.datathis,指向 w b 对象 wb对象 wb对象,能够正确访问属性 group
  • convert2 内部的箭头函数绑定的也是 this.datathis,但外部也是箭头函数,指向 全局对象 全局对象 全局对象,将会报错或者得到错误的结果,所以尽量不使用箭头函数作为方法。
const wb = {
	group: '第一组',
	data: [1, 2, 3, 4],
	showGroup: function () { console.log(this.group); },
	showGroup2: function () { (() => { console.log(this.group) })(); },
	showGroup3: () => { console.log(this.group) },
	convert: function() {
		let res = new Array;
		this.data.forEach( (elem)=>{ res.push(this.group + ':' + elem); } );
		return res;
	},
	convert2: () => {
		let res = new Array;
		// console.log(this == globalThis),	// true
		// console.log(this.data);			// undefined/其他
		this.data.forEach( (elem)=>{ res.push(this.group + ':' + elem); } );
		return res;
	},
}

类的封闭性使得箭头函数与实例自动绑定,每创建一个实例,都分配一个闭包,和实例环境自动绑定。下面一个例子中:

  • 箭头函数 fa 绑定具体的实例对象,解构赋值不会改变 this 指向;
  • 普通方法 fd 在构造时绑定自身,解构赋值也不会改变 this 指向;
  • 另外的 fb/fc 作为普通方法,在构造时没有绑定自身,解构赋值会改变 this 指向。
class C {
	constructor() { this.fd = this.fd.bind(this) };
  	a = 1;
  	fa = ()=>{ console.log(this.a); };
  	fb = function () { console.log(this.a); };
  	fc () { console.log(this.a); };
  	fd = function () { console.log(this.a); };
}

let c = new C();
c.fa(); 					// 1
let { fa, fb, fc, fd } = c;
fa(); 						// 1
fb();						// 报错,属性未定义
fc();						// 报错,属性未定义
fd();						// 1

call、bind 和 apply 不会改变箭头函数的 this 指向

箭头函数表达式是执行完创建的,所以 this 绑定声明定义所在上下文的 this。callbindapply 方法都不会改变其指向。下面一个例子中:

  • 普通函数的 this 绑定,可以根据需求被 call/apply/bind 改变,指向 o o o 对象;
  • 箭头函数的 this 绑定,不可以call/apply/bind 改变,依旧指向全局对象。
const o = {	a: 10 }
globalThis.a = 100;

const add = function (m, n) { return this.a + m + n; }
const add2 = n => this.a + m + n;

add.call(o, 2, 3)			// 15
add.apply(o, [2, 3])		// 15
let boundedAdd = add.bind(o);
boundedAdd(2, 3)			// 15

add2.call(o, 2, 3)			// 105
add2.apply(o, [2, 3])		// 105
let boundedAdd2 = add.bind(o);
boundedAdd2(2, 3)			// 105

在 setTimeout 中使用箭头函数

setTimeout 函数,使用一定封闭环境内的属性时,常用箭头函数作为回调函数。下面一个例子中:

  • loading 中箭头函数,绑定外部方法 loadingthis,指向 o 对象 o对象 o对象
  • loading2 中由 function 引导的声明式函数,将绑定全局(globalThis),指向 全局对象 全局对象 全局对象
  • setTimeout 不会影响内部箭头函数的 this 绑定,也不会影响内部普通函数的 this 绑定。
const o = {
	n: 0,
	loading () {
		setTimeout(() => {
			console.log(++this.n); // 箭头函数,this绑定声明所在上下文
		}, 1000)
	},
	loading2 () {
		setTimeout(function () {	
			console.log(++this.n); // 声明式函数,this绑定提升到全局
		}, 1000)
	},
}

o.loading()		// 1秒后,控制台输出 1
o.loading()		// 再1秒后,控制台输出 2
o.loading2()	// 再1秒后,控制台输出 NaN 或其他

更一般的,在需要控制函数内 this 绑定指定区域时,采用箭头函数,一个例子如下:

const o = {
    n: 1,
    f() {
        let fn = function () { console.log(++this.n); }; // 声明式函数,this绑定提升到全局
        fn();
    },
    g() {
        let gn = () => { console.log(++this.n); };		// 箭头函数,this绑定声明所在上下文
        gn();
    },
}

o.g()		// 2
o.f()		// NaN

不仅如此,箭头函数常出现在 promise 链中。或者说,箭头函数经常作为一个回调函数出现

没有 arguments 对象

箭头函数没有自己的 arguments 对象。类似 this 的绑定,箭头函数会使用上下文 / 外部的 arguments。下面一个例子中:

  • 内部箭头函数与外部函数 f 的参数隐式绑定;
  • arguments[0]f 的第一个参数 n
function f(n) {
  let g = () => arguments[0] + n; // f 的隐式参数绑定。arguments[0] 为 f 的第一个参数 n
  return g();
}

f(3); // 3 + 3 = 6

JS 类没有默认的 arguments 字段,下面的例子中:

  • 全局箭头函数可以访问全局变量 arguments (如果存在);
  • 类可以自定义 arguments 字段并进行访问(使用 this 指定)。
globalThis.arguments = [1, 2, 3]
let f = () => { console.log(arguments[0]); }
class C {
	constructor(a, ...r) { this.arguments = [a, ...r]; };
	// arguments = [1, 2, 3];
	g = () => { console.log(this.arguments[0]); };
}

f()						// 1
(new C(10, 1, 2)).g()	// 10

由于箭头函数的以上特性,在需要指定作用域的 this/arguments 时(setTimeout/Promise/闭包/装饰器/...),能够起到简化的作用。下面一个装饰器的例子中:

  • 内部箭头函数可以对外部函数的 thisarguments 访问,
function sayHi(name) { console.log(`Hello, ${name}!`); }

function decorator1(fn, ms) {
	return function () {
		setTimeout(() => fn.apply(this, arguments), ms); 
	}
}

function decorator2(fn, ms) {
	return function (...args) {
		let nt = this;
		setTimeout(function() { return f.apply(nt, args); }, ms);
	}
}

let f = decorator1(sayHi, 1000);
let g = decorator2(sayHi, 1000);
f('Lily');
g('Jack');

在大多情况下,使用剩余参比使用 arguments 是更好的选择

不能用作构造函数

  1. 箭头函数不能用作构造函数,当使用 new 调用时会出错。
const F = () => {
	this.a = 10;
}

let f = new F()			// 报错,不能作为构造器
  1. 更不允许在箭头函数中使用 new.target
const G = (v) => {
	if (!new.target) return new G(v);	// 报错,不允许在箭头函数中出现 new.target
	this.k = v;
}

你可能感兴趣的:(#,JS,函数进阶,javascript,原型模式,开发语言,ecmascript,学习,笔记)