函数——箭头函数&自执行函数(二)


  一、箭头函数是在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);
        }

 

 

    

 

    

    

      


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM