首页 > 代码库 > 箭头函数

箭头函数

2024-09-14 16:58:15   220人阅读

在ES6以前我们用 function 来定义函数，还记得楼主刚学js那会儿老是把function写错 (╯‵□′)╯︵┻━┻，但是自从ES6中出现了箭头函数以后，妈妈再也不担心我写成 fnuction了，那么我们下面开始正式学习！

基本语法：

  • ES6允许使用“箭头”（=>）定义函数。
let func = (num) => num;
  • 上面的箭头函数等同于：
let func = function (num) {
    return num;
}

小伙伴们发现了什么？没错， ES6的箭头函数去掉了function,使我们的代码变得更加简洁，下面再看看其他的写法

  • 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var func = () => num;
// 等同于
var func = function () { return num };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

让我们来看一个更丧心病狂的写法~

  • 如果箭头函数只有一个参数，可以省略掉括号。
let func = num => 1;
//等同于
let func = function (num) {
    return 1;
}
  • 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
var sum = (num1, num2) => { return num1 + num2; }
  • 需要注意的一点：因为大括号被解释成代码块，如果箭头函数直接返回一个对象，那么必须要在大括号外面加上括号。
var porson = name => ({ name: name, age: "18" });
  • 更加简洁的表达式。
const isEven = n => n % 2 == 0;
const square = n => n * n;

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数要写很多行代码，而且不如这个结构清晰

  • 箭头函数的一个用处是简化回调函数，例子如下。
// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

使用注意点：

  1. this指向问题
  • 让我们使用特定的例子来体现箭头函数的this。

先来看看这段代码：

        let person = {
            name:‘光头强‘,
            init:function(){ 
            //为body添加一个点击事件，看看这个点击后的this属性有什么不同
                document.body.onclick = function(){
                    alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？
                    alert(this);
                }
            }
        }
　　　　　person.init();

如我们所愿，第一个 alert 弹出的是 undefined，第二个是 body （object HTMLBodyElement）；

再来看一段代码：

           let person = {
            name:‘jike‘,
            init:function(){
            //为body添加一个点击事件，看看这个点击后的this属性有什么不同
                document.body.onclick = ()=>{
                    alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？                  
                }
            }
        }
        person.init();

答案是 jike ，答对了吗？

  • 其实箭头函数本身没有this，而自身的this会在函数声明的时候做绑定，它是根据上级的function中的this来做绑定的

那么问题又来了，如果上级的function也是箭头函数呢？

看看这段代码：

           let person = {
            name:‘jike‘,
            init:()=>{
            //为body添加一个点击事件，看看这个点击后的this属性有什么不同
                document.body.onclick = ()=>{
                    alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？                  
                }
            }
        }
        person.init();

毫无疑问 this 会指向 window （object Window）。

  • 总结出的结论就是：如果上级也是箭头函数，再上级查找

 

　　 2.箭头函数的构造函数

  • 问：箭头函数可以做构造函数吗？
  • 答：不可以！

请看下面代码：

function Person(p){
    //完成初始化
    this.name = p.name;
}

这是没有箭头函数的构造函数，但是用了箭头函数以后呢？

()=>{
   ......
}

等等....这是什么鬼！什么语法！不报错才怪。我故意让他报错的？嘿，你还不信，那再来一种写法。

var Person = (p)=>{
    this.??? 
}

好的，我们给他加上变量，再等等....这 this 指向哪里？向上级去找？

  • 根据上面代码可以得到结论：当我们知道箭头函数本没有this，而是借的,构造函数自然不攻自破，所以，箭头函数不能做构造函数。

 

　　　3. 箭头函数的 arguments

老规矩，先上代码：

let func = (n1,n2)=>{
       console.log(arguments);
     }       
func(2,3);

不用看了，答案是：报错，Uncaught ReferenceError: arguments is not defined

  • 箭头函数没有 arguments 吗 ？到这里是不是想到了 this？ 箭头函数本身没有this，可以通过向上级查找，那么 argument 呢？

我们来赌一把：

function func0(n1,n2,n3){ //[1, 2, 3]
      let func = (n1,n2)=>{
          console.log(arguments);
     }
        func();
   }
       
 func0(1,2,3);

恭喜你赌对了（可惜并没有奖励...）。

  • 箭头函数本身也没有 arguments，如果该箭头函数外部包含function,在函数的调用时，箭头函数会将外部arguments拿来

 

总结：

  • 在使用的时候，不必那么复杂，建议掌握一种就可以了 ()=>{}
  • 看到极为简单的情况也要认识let func = num => num;
  • 一个参数: var f = num => num; 也可以 var f = (num) => num;
  • 没有参数: var f = ()=> 1;
  • 多个参数: var f = (n1,n2)=> n1 + n2;
  • 多行代码: var f = (n1,n2)=>{//code.... return n1 + n2;}

箭头函数的注意点：

  • 箭头函数本身没有 this
  • 自身的 this 会在函数声明的时候做绑定
  • 根据上级的function中的this来做绑定,如果上级也是箭头函数，再上级查找，绑定以后就不再发生改变了,this不再多变
  • **箭头函数本没有this，绑定后不再多变**
  • 箭头函数不可以做构造函数
  • 箭头函数本身也没有arguments
  • 如果该箭头函数外部包含function,在函数的调用时，箭头函数会将外部arguments拿来

 

 

 

感谢观看，希望您看完能有一些收获。

最后安利阮老师的ES6入门：http://es6.ruanyifeng.com

箭头函数


联系
我们