箭头函数

箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或new.target。这些函数表达式更适用于那些本来就需要匿名函数的地方,并且它们不能用作构造函数。

基础语法

(参数1,参数2,...,参数N) => { 函数表达式 }
(参数1,参数2,...,参数N) =>表达式(单一)
//相当于:(参数1,参数2,...,参数N) => {return 表达式;}

//当只有一个参数时,圆括号是可选的:
(单一参数) => {函数声明}
单一参数 => {函数声明}

//没有参数的函数应该写成一对圆括号。
() => {函数声明}

高级语法

// 加括号的函数体返回对象字面表达式:
参数 => ({foo: bar})

//支持剩余参数和默认参数
(参数1,参数2,...rest) => {函数声明}
(参数1 = 默认值1,参数2,...,参数N = 默认值N) => {函数声明}

//同样支持参数列表结构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); //6

引入箭头函数有两个方面的作用:更简短的函数并且不绑定this
在箭头函数出现之前:每个新定义的函数都有它自己的this值(在构造函数的情况下是一个新对象,在严格模式的函数调用中为undefined,如果该函数被作为“对象方法”调用则为基础对象等)。

function Person() {
	//Person() 构造函数定义`this`作为它自己的实例
	this.age = 0;
	setInterval(function growUp(){
		//在非严格模式,growUp()函数定义`this`作为全局对象,
		//与在Person()构造函数中定义的`this`并不相同,
		this.age++;
	}, 1000)}
var p = new Person();

通过将this值分配给封闭的变量,可以解决this问题。

function Person() {
	var that = this;
	that.age = 0;
	setInterval(functon growUp() {
		// 回调引用的是`that`变量,其值是预期的对象
		that.age++;
	}, 1000);
}

或者,可以创建绑定函数,以便将预先分配的this值传递到绑定的目标函数

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

补充:js几乎全部是词法作用域(静态作用域)(顺着作用域链进行查找),只有eval()和this是动态作用域(顺着调用者的作用域进行查找),然而箭头函数内部的this是词法作用域。

function Person() {
	this.age = 0;
	
	setInterval(() => {
		this.age++; // this 正确地指向person对象
	}, 1000);
}
var p = new Person();

通过call或apply调用

由于箭头函数没有自己的this指针,call和apply不能绑定this,只能传递参数。

不绑定arguments

箭头函数不绑定Arguments对象。
所以,在大多数情况下,使用剩余参数是相较使用arguments对象的更好选择。

function foo() {
	var f = (...args) => args[0];
	return f(2);
}

foo(1);
//2

像函数一样使用箭头函数

箭头函数表达式对非方法函数是最合适的。作为方法时的问题:

'use strict';
var obj = {
	i: 10,
	b: () => console.log(this.i, this),
	c: function() {
		console.log(this.i, this);
	}
}
obj.b();
//undefined
obj.c();
//10,Object {...}

箭头函数没有定义this绑定。另一个涉及Object.defineProperty()的示例:

'use strict';
var obj = {
	a: 10
};
Object.defineProperty(obj, 'b', {
	get: () => {
		console.log(this.a, typeof this.a, this);
		return this.a + 10;	
		// 代表全局对象 'window', 因此'this.a' 返回 'undefined'
	}
});

使用new操作符
箭头函数不能用作构造器,和new一起用会抛出错误。

var Foo = () => {};
var foo = new Foo();  // TypeError: Foo is not a constructor

使用prototype属性
箭头函数没有prototype属性。

var Foo = () => {};
console.log(Foo.prototype); // undefined

使用yield关键字
不能使用

解析顺序

let callback;

callback = callback || function() {};//ok
callback = callback || () => {};
//报错
callback = callback || (() => {}); //ok

箭头函数闭包

//标准的闭包函数
function A(){
	var i = 0;
	return function b(){
		return (++i);
	};
};
//箭头函数体的闭包
var Add = (i=0) => {return (() => (++i))};
var v = Add();
v();//1
v();//2

//因为仅有一个返回,return及括号()也可以省略
var Add = (i=0) => () => (++i);
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值