JS中箭头函数和自执行函数区别

箭头函数

箭头函数是在es6中添加的一种规范，它相当于匿名函数，简化了函数的定义。

语法

• function用var，let，cost来表示；

• 参数要写在第一个等号后面；

  • 参数有多个，需要加一个小括号，参数用逗号隔开）
  • 只有一个参数时，可以不需要括号
  • 没有参数，写一对空的小括号。

• 函数的主体内容放在箭头后面

  • 如果主体有多条语句，需要把它们放在一对大括号里
  • 如果主体只有一条语句，那就直接写（如果这条语句里有return,依然需要加上大括号）
  • 如果主体只有一条语句，并且是个对象，需要把它用括号括起来。

<script>
    //多个参数
    const fn = (a, b) => {
        let result = a + b;
        console.log(result);//3
    }
    fn(1, 2)

    //只有一个参数
    var fn2 = c => {
        console.log(c); //davina
    }
    fn2('davina');

    //没有参数
    let fn3 = () => {
        console.log('123');
    }
    fn3(); //123

    //函数里只有一句话
    const fn4 = d => console.log(d); //lisa
    fn4('lisa');

    //函数里只有return一句话时
    const fn5=()=>{return{a:10,b:20}};
    console.log(fn5()); //{a: 10, b: 20}
</script>

注意：

• 箭头函数只能先定义再使用
• 箭头函数里没有this对象，函数在哪里定义的，this就指向谁（箭头函数会继承外层函数调用的this绑定）
• 没有this也就不能调用函数的call，apply，bind方法了
• 没有this就不是构造函数，不能用new去调用
• 箭头函数里没有arguments对象。

<script>
    const dog = {
        color: 'white',
        show1: function () {
            console.log(this.color);
        },
        show2: () => {
            console.log(this.color);
        },
        show3: function () {
            const show4 = () => {
                console.log(this.color);
            }
            show4();
        }
    }
dog.show1();//white
dog.show2();//undefined
dog.show3(); //white

//不用用call和没有arguments对象
const bigDog =
      {
          color: 'black'
      }
dog.show2.call(bigDog); //undefined

const fn6 = () => {
    console.log(arguments) // ReferenceError: arguments is not defined
}
fn6(1, 3);
</script>

自执行函数

函数被定义后，会自动执行一次。

函数表达式可以直接加上小括号调用但函数声明不能直接调用。

因为小括号里只能放表达式，不能放语句，function关键字既可以当作语句，也可以当作表达式。

但js规定function关键字出现在行首，一律解释成语句。

<script>
    var fn1 = function () {
        console.log('这是一个函数表达式'); //这是一个函数表达式
    }();

// function fn2(){
//     console.log('这是一个函数声明'); //函数声明加上小挌号报错
// }();</script>

解决方法：不让function出现在行首

a. 用括号把function主体括起来，转成表达式，后面加括号

b.借助运算符（new + - ! typeof && || …）

//1、加括号  最常用
(function fn2() {
    console.log('这是一个函数声明'); //这是一个函数声明
})();

(function fn2() { console.log('这是一个函数声明') }());//这是一个函数声明

//两种模式
(function () { })();
(function () { }());

//2、函数变成表达式
0 + function (a) {
    console.log(a)   //与数字相加变成表达式
}('与数字相加变成表达式')

true && function (a) {
    console.log(a)   //1.利用逻辑运算符变成表达式
}('1.利用逻辑运算符变成表达式')

false || function (b) {
    console.log(b)
}('2.利用逻辑运算符变成表达式') //2.利用逻辑运算符变成表达式

~function (c) {
    console.log(c)
}('利用+ - ！~ 变成表达式') //利用+ - ！~ 变成表达式

typeof function (d) {
    console.log(d)
}('利用typeof') //利用typeof

箭头函数和自执行函数

总结：

最大的区别就是：

• 自执行函数在定义的时候就会执行一次
• 自执行函数定义的时候，必须传入参数，用于立即执行
• 箭头函数只是一个匿名函数，是不会自己执行的。

下面代码更好地说明了两者的区别。

let counter01 = 0;
let counter02 = 0;

// test01 等于立即执行函数的返回值
let test01 = (function (x) {
    console.log(x);  // 10 
   
    counter01 ++;
    return counter01;
})(10);

let test02 = (x) => {
    // console.log(x)  // 不调用就不会执行
    counter02 ++;
    return counter02;
}

console.log(test01)
console.log(test01)
console.log(test01)
console.log(test01)


console.log(test02)
console.log(test02)
console.log(test02)
console.log(test02)
console.log(counter02)
console.log(test02(1))
console.log(test02(1))
console.log(test02(1))
console.log(test02(1))
console.log(counter02)

// 输出
10
1
1
1
1
[Function: test02]
[Function: test02]
[Function: test02]
[Function: test02]
0
1
2
3
4
4

两者也可搭配使用。

let x = 10;
((x) => {
    console.log(x); //10
    console.log(this); //Window
})(x);

《参考资料》

函数——箭头函数&自执行函数（二）