函数基础:匿名函数,函数,箭头函数,立即执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /*匿名函数*/
    var x = function(num) {
        return num;
    }

    /*函数*/
    function getAge(age){
        return age;
    }

    /*形参:a,b,c*/
    function vars(a,b,c) {
       if(vars.length > arguments.length){
           return "形参多了";
       }
    }

    /*实参:1,2,3*/
    vars(1,2,3);
    //系统会创建 arguments = [1,2,3]

    /*不定参数函数*/
    function sum(){
        let result = 0;
        for(let i=0; i<arguments.length; i++){
            result += arguments[i];
        }
        return result;
    }
    sum(1,2,5,9,7);

    /*箭头函数*/
    let elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

    elements.map(function(element) { 
    return element.length; 
    }); // 返回数组:[8, 6, 7, 9]

    // 上面的普通函数可以改写成如下的箭头函数
    elements.map((element) => {
    return element.length;
    }); // [8, 6, 7, 9]

    // 当箭头函数只有一个参数时,可以省略参数的圆括号
    elements.map(element => {
    return element.length;
    }); // [8, 6, 7, 9]

    // 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号
    elements.map(element => element.length); // [8, 6, 7, 9]

    // 在这个例子中,因为我们只需要 `length` 属性,所以可以使用参数解构
    // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个变量名,
    // 可以替换成任意合法的变量名
    elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
    // 等效于
    elements.map( function( element ) {
    var lengthFooBArX = elements.length;
    return lengthFooBArX;
    });
      // 立即执行函数:定义出来的函数占用内存,对于一次性的函数,可以使用立即执行函数
     (function(a, b) {
        console.log(a);
        return a+b;
     }(1, 2));

     let an = function(a, b) {
        console.log(a);
        return a+b;
     }(1, 2);
 
</script>
</html>

关于匿名函数:

配合var关键字,匿名函数不会造成全局变量的污染。


关于箭头函数:
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
引入箭头函数有两个方面的作用:更简短的函数并且不绑定this。
在箭头函数出现之前,每一个新函数根据它是被如何调用的来定义这个函数的this值:

  • 如果是该函数是一个构造函数,this指针指向一个新的对象
  • 在严格模式下的函数调用下,this指向undefined
  • 如果是该函数是一个对象的方法,则它的this指针指向这个对象

箭头函数不绑定Arguments 对象。
箭头函数不能用作构造器,和 new一起用会抛出错误。
箭头函数没有prototype属性。
yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作函数生成器

posted @ 2020-11-25 23:52  SvenWayne  阅读(413)  评论(0)    收藏  举报