匿名函数和箭头函数理解

更新: 9/4/2025字数: 0 字 时长: 0 分钟

• 一、匿名函数
  • 1，基本概念
  • 2，匿名函数的应用场景
• 二 、箭头函数
  • 1，基本概念
  • 2，箭头函数写法的特殊性
  • 3，箭头函数的特点
  • 4，箭头函数 this 总是指向父级的 this：
• 三、扩展

一、匿名函数

1，基本概念

匿名函数顾名思义指的是没有名字的函数，在实际开发中使用的频率非常高！（在 ES5 中就已经有了匿名函数）

首先我们声明一个普通函数 fun：

function fun() {
  console.log("Eula");
}

然后将函数的名字去掉即是匿名函数：

function (){
    console.log("Eula");
}

这样直接写在 js 中会直接报错，不符合语法规范；需要使用小括号包括起来：

// 不在报错
(function () {
  console.log("Eula");
});

那怎么调用呢，普通函数的调用都是使用 ()小括号来调用，匿名函数也不例外；后面需要在加一个小括号实现自调用，同样括号里面也可以传参；

(function (value) {
  console.log("name:" + value);
})("Eula");
// 打印结果
name: Eula;

2，匿名函数的应用场景

1、自调用

匿名函数想要自调用需要放在（）里面并后面使用小括号调用，里面可以传参；

(function (value){
    console.log("name:"+value);
})("Eula")
输出结果：
name:Eula

2、事件的绑定函数

<input type="button" value="Eula！" id="btn">
<script>
    //获得按钮元素
    var btn=document.querySelector("#btn");
    //给按钮增加点击事件。
    btn.onclick=function(){
        alert("姐是尤菈你记住！");
    }
</script>

3、在对象中使用

var obj = {
  name: "Eula",
  fun: function () {
    return "我是" + this.name;
  }
};
console.log(obj.fun()); //我是Eula

4、函数表达式

JS 中定义函数的方式有两种：一种是函数声明，另一种就是函数表达式。

//  1，函数声明
function fun(params) {
  console.log(params);
  return "";
}

// 2，函数表达式写法 将匿名函数赋值给变量fun。
var fun = function (params) {
  console.log(params);
  return "";
};

//调用方式与调用普通函数一样
console.log(fun());

注意 函数声明，它的一个重要特征就是函数会进行声明提升，意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面；

函数表达式的写法则不会进行 js 预编译的函数提升；

5、回调函数

概念：回调函数就是一个被作为参数传递的函数；

setInterval(function () {
  console.log("我是一个回调函数，每次1秒钟会被执行一次");
}, 1000);

6、作为返回值返回

//将匿名函数作为返回值
function fun() {
  //返回匿名函数
  return function () {
    return "Eula";
  };
}
//调用匿名函数
console.log(fun()()); //Eula
//或
const handleFun = fun();
console.log(handleFun()); //Eula

二 、箭头函数

1，基本概念

箭头函数是 ES6 中新增一种语法，属于匿名函数； 将函数更加简单化的写法，很常用。

let funName = () => {
  console.log("今天天气很好  上课可惜了");
};

2，箭头函数写法的特殊性

他有一些特殊写法 在编辑函数的时候可以适当的做出一些省略：

1，当只有一个参数的时候 可以省略小括号

let fun1 = (num) => {
  console.log(num + 300);
};

2，当没有参数或者多个参数的时候 ，不能省略小括号；

// 没有参数
let fun2 = () => {
  console.log(300);
};
// 多个参数
let fun3 = (a, b, c) => {
  console.log(a);
  console.log(b);
  console.log(c);
};

3，当我们只有一句函数体的时候, 并且这句话是返回值的时候 ，可以同时省略 return 和大括号（函数体） ；

let fun4 = (num) => num + 200;
console.log(fun4(100)); // 300

4，如果说不省略return 那么大括号也不能省略；

let fun4 = (num) => {
  return num + 200;
};
console.log(fun4(100)); // 300

5，如果返回值是对象 ，在省略大括号和return的情况下，需要在对象外面加上一层小括号（因为有歧义无法确定大括号是箭头函数的还是对象的 ）

// 省略大括号和return的写法
let fun5 = () => ({
  name: "Eula",
  age: 18,
  sex: "女"
});
console.log(fun5());

// 正常写法
let fun5 = () => {
  return {
    name: "Eula",
    age: 18,
    sex: "女"
  };
};
console.log(fun5());

3，箭头函数的特点

特点

1. 只能定义匿名函数
2. 箭头函数没有原型对象
3. 箭头函数不能定义构造函数
4. 箭头函数不能使用 arguments new super
5. 箭头函数没有自己的 this （调用的是他的父级的 this）

4，箭头函数 this 总是指向父级的 this：

如下分情况进行讨论：

1，say 方法是箭头函数 指向父级 ，obj3 的父级是 window，所以 say 函数的 this 指向是 window。

let obj3 = {
  name: "Mary",
  age: 13,
  say: () => {
    return this; //返回的是window
  }
};
开始调用;
console.log(obj3.say());

2，say2 方法指向的是父级的 this,父级是 say1 函数，say1 函数是普通函数只指向 obj4； 所以 say2 的 this 指向是 obj4 对象。

let obj4 = {
  name: "Tom",
  age: 3,
  say1: function () {
    console.log("this:", this); // 此处的this 是 {name: 'Tom', age: 3, say1: ƒ}
    return {
      name: "Jerry",
      age: 2,
      say2: () => {
        // 指向的是父级的this  父级是say1函数  say1函数是普通函数只指向obj4 所以 此处的this指向是{name: 'Tom', age: 3, say1: ƒ}
        return this;
      }
    };
  }
};
开始调用;
console.log(obj4.say1().say2());

3，say2 的 this 指向父级 父级 say1 也是箭头函数，那么 this 也指向父级的 this，那么 obj5 对象的父级是 window 所以 say2 的 this 指向是 window。

let obj5 = {
  name: "Tom",
  age: 3,
  say1: () => {
    return {
      name: "Jerry",
      age: 2,
      say2: () => {
        // say2的this指向父级  父级say1也是箭头函数,那么this也指向父级的this,那么obj5对象的父级是window所以此处的this指向window
        return this;
      }
    };
  }
};
开始调用;
console.log(obj5.say1().say2()); // 指向的是window

三、扩展

对象里面的函数会有多种写法，如下：

const action = {
  // 1，省略键名的写法
  one() {
    console.log(111);
  },
  // 2，普通函数的写法
  two: function () {
    console.log(222);
  },
  // 3，匿名函数的写法
  three: () => {
    console.log(333);
  }
};