ES6---箭头函数

• 一、基本用法
• 二、箭头函数的写法
• • 1. 没有返回值
  • • （1）不带参数
    • （2）带参数
  • 2. 有返回值
  • 3. 对象上的函数es6缩写
• 三、箭头函数可以与变量解构结合使用
• 四、箭头函数简化回调函数
• 五、rest 参数与箭头函数
• 六、计时器里面的箭头函数的使用
• 七、箭头函数使用注意点
• 八、箭头函数不适用场景
• 九、箭头函数嵌套问题

一、基本用法

• 特点：保证上下文this指针一致
• ES6 允许使用“箭头”（=>）定义函数。
• 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

    var f=()=>5;console.log(f());//5//等同于var f=function(){return 5;}console.log(f());//5var sum=(num1,num2)=>num1+num2;console.log(sum(1, 2));//3//等同于var sum=function(num1,num2){return num1+num2;}console.log(sum(1, 2));//3

• 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
• 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

    let obj=()=>({a:1,b:2});console.log(obj());//{a: 1, b: 2}let obj=()=>{a:1,b:2};console.log(obj());//报错SyntaxError: Unexpected token :

二、箭头函数的写法

• 箭头函数可以分为有返回值和无返回值

1. 没有返回值

（1）不带参数

		   //不带参let data = () => {}

（2）带参数

			//1个参//es5写法let data1 = function(a){}//es6写法let data2 = a => {}//2个参//es5写法let data3 = function(a,b){}//es6写法let data2 = (a,b) => {    }

2. 有返回值

           let d1 = () => {return 123;}let d2 = () => 123;

• 返回对象

           let d3 = () => ({a:1,b:2});console.log(d3());//但是不能像下面这样写，会报错let d3 = () => {a:1,b:2};console.log(d3());//报错

3. 对象上的函数es6缩写

			let stus = {eat(){}}

三、箭头函数可以与变量解构结合使用

    const obj={first:1,last:2};const full=({first,last})=>first+' '+last;console.log(full(obj));//1 2//等同于function full(person){return person.first+' '+person.last;}console.log(full(obj));//1 2

四、箭头函数简化回调函数

    //普通函数[1,2,3].map(function(x){return x*x;});//箭头函数[1,2,3].map(x=>x*x);

五、rest 参数与箭头函数

    const numbers= (...nums)=>nums;console.log(numbers(1, 2, 3, 4, 5));//[1, 2, 3, 4, 5]const a=(head,...tail)=>[head,tail];console.log(a(1, 2, 3, 4, 5));//[1,[2,3,4,5]]

六、计时器里面的箭头函数的使用

	  let obj = {sleep:function(){console.log(this);//sleepsetTimeout(function(){console.log(this);//window},1000);}};obj.sleep();

• 计时器里面的this指针指的是window，那么怎样让this指针指向当前对象呢？

	   let obj = {sleep:function(){console.log(this);//sleepsetTimeout(()=>{console.log(this);//sleep},1000);}};obj.sleep();

• 可以使用箭头函数来实现，因为箭头函数可以保证上下文this指针一致。

七、箭头函数使用注意点

• （1）箭头函数没有自己的this对象。
• （2）不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。
• （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
• （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
  对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。

八、箭头函数不适用场景

• (1)第一个场合是定义对象的方法，且该方法内部包括this。

       let stu = {sleep:() => {console.log(this);//window}}stu.sleep();}

• (2)第二个场合是需要动态this的时候，也不应使用箭头函数。

           var button = document.getElementById('press');button.addEventListener('click', () => {this.classList.toggle('on');});

• 上面代码运行时，点击按钮会报错，因为button的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通函数，this就会动态指向被点击的按钮对象。

九、箭头函数嵌套问题

• 嵌套之后，找最外层的this

    let fun={sleep(){console.log(this);//sleepreturn ()=>{console.log(this);//sleep}}}fun.sleep()();

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！