javascript

箭头函数副作用

Posted by WWJ on August 10, 2018

箭头函数副作用

没有this和arguments变量

在函数内定义的箭头函数，this和arguments变量都是继承自父级作用域中的

let foo = function() {
	a = 1;
	let b = () => {
		console.log(this.a, arguments[0]);
	}
	b();
}
foo(2,3,4); // 1, 2

在对象内定义的箭头函数this指向全局作用域，arguments变量访问不到

let a = 2;
let foo = {
	a: 1,
	b: () => {console.log(this.a, arguments)}
}
foo.b(1,2,3); // Uncaught ReferenceError: arguments is not defined

var a = 2;
let foo = {
	a: 1,
	b: () => {console.log(this.a, this.arguments)}
}
// this指向window,故this.a === 2, this.arguments === undefined
foo.b(1,2,3) // 2 undefined

但是如果变量a用let声明的话，那么在全局作用域中是访问不到变量的，即window.a === undefined，只有用var声明的变量才会自动成为window的属性

在原型中使用箭头函数

let Foo = function(a) {
    this.a = a;
}
Foo.prototype.bar = () => {
    console.log(this.a);
}

let foo = new Foo('lingwu');
foo.bar(); // undefined

箭头函数中的this不是指向Foo，而是追溯到了全部作用域，全局作用域中不存在变量a，所以打印的是undefined ***

通过以上例子，我们可以得出一下结论

  • 箭头函数除了本身传入的参数外，什么都没有，如果可以在箭头函数内部访问到this或者arguments的话，那么一定是继承自父级作用域的
  • 箭头函数只适用于纯函数，像map, filter, reducer之类的高阶函数
  • 不要在全局作用域中定义箭头函数，可能会污染全局作用域
  • 定义箭头函数时，应该在其外部包裹一层函数，将箭头函数控制在一定的范围以内
CATALOG