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

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

　　1、语法

　　　　a、function用var，let，cost来表示；

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

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

　　　　c、函数的主体内容是放在箭头后面

　　　　　  如果主体有多条语句，需要把它们放在一对大括号里；如果主体只有一条语句，那就直接写（如果这条语句里有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>

　　2、需要注意的是：

　　　　箭头函数只能先定义再使用，箭头函数里没有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 && || ...）

    <script>
        //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
    </script>

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