ES6 箭头函数
非箭头函数与箭头函数的写法
//非箭头函数写法,函数声明
function sum(a, b) { return a + b; }
//非箭头函数写法,函数表达式 var sum = function(a,b){ return a+b; }
//箭头函数写法 把箭头函数赋给一个变量,省略function,()括号里面是参数,当参数是一个时,()括号可省略
let sum = (a, b) => {
省略不写return ,仍有返回值,可返回数组,对象,函数。。。
写法:去掉大括号,直接把要返回的值写到箭头的后面,但当返回对象是,{name:'zwq'}会被当成一个箭头函数的{},所以,当返回对象时,可用表达式包裹上。
let sum = (a, b) => a + b; //返回 a+b
使用箭头函数简化代码,如下代码
function sum(x) { return function (y) { return function (z) { return x + y + z; } } } var sum1 = sum(1); var sum2 = sum(2); console.log(sum2(3));
可以写成:箭头函数可以省略return ,并把大括号去掉,参数是一个的时候也可以去掉。
let sum = x => y => z => x + y + z console.log(sum(1)(2)(3));
参数不能重复命名
function sum(a,a){ console.log(a); //不报错 } let sum = (a,a) =>{ console.log(a); //报错 }
箭头函数不能new,并且没有原型
let person = () => { this.a = 10; } new person(); // uncaught typeerror: person is not a constructor
箭头函数的arguments和this的值是外围最近一层非箭头函数的arguments和this值。是词法作用域下,也就是说是你写代码时你眼睛直观看到的。即使这个函数执行时被保存到外部。
如下代码箭头函数外部没有非箭头函数,所以没有arguments。
let a = (x,y) =>{ console.log(arguments); //uncaught referenceerror: arguments is not defined } a(3,4);
当前箭头函数外面套着非箭头函数,不管执行时函数是否保存到外部,只是当前肉眼看到的词法作用域,当前里面的箭头函数外面套着非箭头函数,所以可以拿到外部非箭头函数的arguments.
function fn(a,b){ return (x,y) =>{ console.log(arguments,x,y); } } fn(3,4)(5,6); //[3,4] 5 6
例如有这样的需求。我们定义一个函数fn()并且在fn里面定义了其他函数,在这个函数里面需要接受fn函数的参数,当传入参数不固定时,我们接受arguments,但是每个函数的arguments都是自己函数的参数的arguments,我们需要外部函数的arguments只能用一个变量先保存起来。
function fn(){ // var a = arguments; return function(){
console.log(a); //[3,4] console.log(arguments) //一个空的arguments } } fn(3,4)();
这是箭头函数的特点,箭头函数的arguments只能由外部非箭头函数的arguments决定
function fn(){ return () =>{ console.log(arguments); } } fn(3,4)(); //[3,4]
this指向问题
普通函数的this,谁调用它,他就指向谁。 如下打印的是对象里的innerobj;
var a = 'outobj'; var obj = { a:'innerobj', fn:function(){ console.log(this.a); //innerobj } } obj.fn();
箭头函数的this跟arguments一样是外围离自己最近一层的非箭头函数,当箭头函数外面没有非箭头函数时,this指向window
var a = 'outobj'; //注意 变量声明不能用let。如果用let a 的话会打印undefined,因为当前this指向全局,但通过let定义的属性不会定义成window属性
let obj = { a:'innerobj', fn:()=>{ console.log(this.a); // outobj因为this和arguments的值取决于外面最近一层的非箭头函数,而当前的箭头函数外面没有箭头函数所以this绑定在全局上。 } } obj.fn();
如果想打印对象obj里面的属性需要在箭头函数外面套一个非箭头函数
将变量返回到外部也是一样
let obj = { a:'innerobj', fn(){ let sum = () =>{ console.log(this.a); //innerobj } return sum; } } let outersum = obj.fn();
当用普通函数是使用settimeout,由于没有对象调用settimeout里面的函数,因此他指向的window。利用保存外部函数this,或者用call改变this指向来改变this。
let obj = { ms:'abx', fn(){ var self = this; settimeout(function(){ console.log(this.ms); console.log(self.ms); 或者改变this指向 },500) } } obj.fn();
使用箭头函数解决this指向问题
let obj = { ms:'abc', fn(){ settimeout(() => { console.log(this.ms); //abc }, 500); } } obj.fn();