ES6---箭头函数

ES6---箭头函数

一、基本用法

  • 特点：保证上下文this指针一致
  • ES6 允许使用“箭头”（=>）定义函数。
  • 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
    var f=()=>5;
    console.log(f());//5
    //等同于
    var f=function(){return 5;}
    console.log(f());//5
    var 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);//sleep
               setTimeout(function(){
                   console.log(this);//window
               },1000);
           }
       };
       obj.sleep();
  • 计时器里面的this指针指的是window，那么怎样让this指针指向当前对象呢？
	   let obj = {
           sleep:function(){
               console.log(this);//sleep
               setTimeout(()=>{
                   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);//sleep
            return ()=>{
                console.log(this);//sleep
            }
        }
    }
    fun.sleep()();