一、立即执行函数

在全局作用域下声明的函数是存在GO中的，它可以在全局下的任何地方去执行

  1.         // 在全局下声明的函数，它是存储在GO中的；它可以在全局下的任何地方执行
  2.         function test1(){
  3.             console.log(1);
  4.         }
  6.         function test2(){
  7.             console.log(2);
  8.         }
  10.         console.log(2);
  12.         function test3(){
  13.             test1();
  14.         }
  16.         test3();

1.1、什么是IIFE？以及IIFE的特点

  • IIFE：immediately-invoked function expression 立即执行函数
  • IIFE的特点：立即执行，执行完后就立即释放

  • 立即执行函数 -> 初始化函数

    1.       // 什么是IIFE？IIFE的特点是什么？
    2.       // IIFE：immediately-invoked function expression 立即执行函数
    3.       // 立即执行函数：会立即执行，执行完后就立即释放
    4.       // 立即执行函数 -> 初始化函数
    5.       (function(a, b){
    6.           console.log(a + b);
    7.       })(1, 2);

    1.2、IIFE的几种书写方式

    W3C推荐的书写方式

    1.       // 立即执行函数的书写方式
    2.       // W3C推荐
    3.       (function(){
    4.           console.log('W3C推荐的书写方式');
    5.       }());

    平时开发者常用的书写形式

    1.   // 平时常用的书写方式
    2.       (function(){
    3.           console.log('平时书写常用');
    4.       })()

  • 接收立即执行函数的返回值

  • IIFE执行完就立即销毁了，所以没有必要设置函数名「写了函数的名字，JS引擎也会自动忽略掉」，如果想要获取到函数执行后的结果，那么可以在函数外定义一个变量，函数内部将结果return出去

    1.       // 接收立即执行函数的返回值
    2.       // IIFE执行完就立即销毁了，所以没有必要设置函数名「写了函数的名字，JS引擎也会自动忽略掉」，如果想要获取到函数执行后的结果，那么可以在函数外定义一个变量，函数内部将结果return出去
    3.       var res = (function(a, b){
    4.           return a + b;
    5.       }(1, 2));
    6.       console.log(res);

    二、表达式和括号执行符号

  • 一定是只有表达式才能被执行符号执行

  • 括号括任何东西进去，最终括号里面的东西都会变为表达式

  • 注意：IIFE在执行的时候会自动忽略掉函数名

    1.       // 表达式和括号执行符号
    2.       // 一定是只有表达式才能被执行符号执行
    3.       // 括号包起来的东西都是表达式
    4.       // 以下几种皆为表达式
    5.       var func = function(){};
    6.       (function func(){});
    7.       (1);

    注意：IIFE在执行的时候会自动忽略掉函数名
    下面能够执行成功的是

    1.       // 注意：IIFE在执行的时候会自动忽略掉函数名
    2.       // 下面能够执行成功的是
    3.       function test1(){
    4.           console.log(1);
    5.       }(); // 语法错误，因为前面部分不是表达式，不能被执行符号执行
    7.       var test2 = function(){
    8.           console.log(2);
    9.       }(); // 可以被执行，因为前面是表达式
    11.       (function test3(){
    12.           console.log(3);
    13.       }()); // 可以被执行，这种是W3C推荐的写法
    15.       (function test4(){
    16.           console.log(4);
    17.       })(); // 可以被执行，这也是工作中常用的写法，小括号括起来的都是表达式

    三、如何将函数声明变为函数表达式

  • 函数声明变成函数表达式的方法：+、 -、 ！、~、 假 || 函数、真 && 函数

  • 函数声明变为函数表达式之后，函数名会自动被忽略掉

W3C推荐的IIFE写法

  1.         // 将函数声明变成函数表达式的几种方法：+、-、！、~、假 || 函数、真 && 函数
  2.         // 将函数声明变为函数表达式的时候，会自动忽略掉函数名，因为IIFE是立即执行，执行完后立即释放掉的
  3.         // 小括号包起来的都是表达式
  4.         (function(){
  5.             console.log('这是W3C推荐的写法');
  6.         }());

工作中常见到的写法

  1.         // 工作常见到的IIFE
  2.         (function(){
  3.             console.log('这是工作中常见到的写法');
  4.         })();

在普通函数前面加上+，可以变为函数表达式

  1.         // 在普通函数前面加上+，可以变为函数表达式
  2.         + function func1(){
  3.             console.log('在普通函数前面加上+，可以变为函数表达式');
  4.         }();

在普通函数前面加上-，也可以变为函数表达式

  1.         // 在普通函数前面加上-，也可以变为函数表达式
  2.         - function func2(){
  3.             console.log('在普通函数前面加上-，也可以变为函数表达式');
  4.         }();

在普通函数前面加上!，也可以变为函数表达式

  1.         // 在普通函数前面加上!，也可以变为函数表达式
  2.         ! function func3(){
  3.             console.log('在普通函数前面加上!，也可以变为函数表达式');
  4.         }();

在普通函数前面加上~，也可以变为函数表达式

  1.         // 在普通函数前面加上~，也可以变为函数表达式
  2.         ~ function func4(){
  3.             console.log('在普通函数前面加上~，也可以变为函数表达式');
  4.         }();

四、逗号运算符

逗号运算符类似逻辑运算符，它只返回逗号后面的最后一个

  1.         // 逗号运算符
  2.         // 逗号运算符类似于逻辑运算符，它只返回逗号后面的最后一个
  3.         console.log(1, 2);
  5.         // 面试题
  6.         var num = (2 - 1, 6 + 5, 24 + 1);
  7.         console.log(num);

下面函数执行会报错吗？为什么？

  1.         // 下面函数执行会报错吗？为什么？
  2.         // 不会报错，但同时函数也不会被执行，因为它会把末尾的(1, 2)解析为表达式，但是如果最末未的小括号里不传值，就会报错
  3.         function test(a, b){
  4.             console.log(a + b);
  5.         }(1, 2);

五、面试题

5.1、面试题一

打印结果是什么？为什么？

  1.         // 面试题
  2.         // 打印结果是什么？为什么？
  3.         // 打印结果是十个10，这是由于闭包机制所造成的，当循环给数组赋值匿名函数的时候，匿名函数并没有被执行，当i = 10的时候，for循环的条件不满足，此时循环结束，但是此时的i已经是10了
  4.         function test(){
  5.             var arr = [];
  7.             for(var i = 0; i < 10; i++){
  8.                 arr[i] = function(){
  9.                     document.write(i + ' ');
  10.                 };
  11.             }
  12.             return arr;
  13.         }
  15.         var myArr = test();
  16.         // console.log(myArr);
  17.         for(var j = 0; j < 10; j++){
  18.             myArr[j]();
  19.         }

如果我想打印0~9，那么上面代码需要如何修改呢？

  1.         // 如果我想打印0~9，那么上面代码需要如何修改呢？
  2.         // 循环的时候立即执行
  3.         function func(){
  4.             var arr = [];
  6.             for(var i = 0; i < 10; i++){
  7.                 (function(j){
  8.                     arr[j] = function(){
  9.                         document.write(j + ' ');
  10.                     }
  11.                 }(i));
  13.             }
  14.             return arr;
  15.         };
  17.         var myArr = func();
  18.         for(var j = 0; j < 10; j++){
  19.             myArr[j]();
  20.         }
  1.         function test(){
  2.             var n = 10;
  4.             var a = function(){
  5.                 console.log(n);
  6.             } 
  7.             var b = function(){
  8.                 console.log(n);
  9.             }
  11.             return [a, b];
  12.         }
  14.         var arr = test();
  15.         arr[0]();
  16.         arr[1]();

5.2、面试题二

点击每一个li打印出的结果是什么？为什么？

  1. <ul>
  2.   <li>1</li>
  3.   <li>2</li>
  4.   <li>3</li>
  5.   <li>4</li>
  6.   <li>5</li>
  7. </ul>
  9. // 获取所有的li，获取到的结果是一个类数组结合 NodeList
  10. var oLi = document.querySelectorAll('li');
  12. // 循环给每一个li绑定点击事件
  13. for(var i = 0; i < oLi.length; i++){
  14.   oLi[i].onclick = function(){
  15.     console.log(i);
  16.   }
  17. }

如果我想让点击每一个li的时候，输出的结果是1~5，该如何做呢？

  1.     <ul>
  2.         <li>1</li>
  3.         <li>2</li>
  4.         <li>3</li>
  5.         <li>4</li>
  6.         <li>5</li>
  7.     </ul>
  9.     // 利用自执行函数的原理
  10.         var oLi = document.querySelectorAll('li');
  12.         for(var i = 0; i < oLi.length; i++){
  13.             (function(j){
  14.                 oLi[j].onclick = function(){
  15.                     console.log(j + 1);
  16.                 }
  17.             }(i))
  18.         }

5.3、面试题三

注意：刚开始做的时候，我做错了，需要特别留意一下这个题

  1.         var num = (1, 3);
  2.         console.log(num);
  4.         var fn = (
  5.             function func1(){
  6.                 return 1;
  7.             },
  9.             function func2(){
  10.                 return "2";
  11.             }
  12.         )();
  13.         console.log(typeof(fn));

5.4、面试题四

  • 括号括起来的都是表达式，表达式是会忽略函数名的

  • typeof一个未被声明的变量，结果是’undefined’

    1.       // 面试题
    2.       // 括号括起来的都是表达式，表达式是会忽略函数名的 function b(){} -> function(){}
    3.       var a = 10;
    4.       if(function b(){}){
    5.           a += typeof(b);
    6.       }
    7.       console.log(a);

    六、作业

    6.1、累加器

    作业一：累加器，从0开始，每次执行函数都在原来的基础上加1

    1.       // 作业一：累加器，从0开始，每次执行函数都在原来的基础上加1
    2.       function func(){
    3.           var num = 0;
    5.           var operation = {
    6.               add: function(){
    7.                   num++;
    8.                   console.log(num);
    9.               }
    10.           }
    12.           return operation;
    13.       }
    15.       var res = func();
    16.       res.add();
    17.       res.add();

    6.2、缓存器

    一个班级的学生保存在一个数组里，两个方法写在函数中，第一个方法是加入班级，第二个方法是离开班级；每次加入或者是离开都要打印新的学生名单

    1.       // 缓存器
    2.       // 一个班级的学生保存在一个数组里，两个方法写在函数中，第一个方法是加入班级，第二个方法是离开班级；每次加入或者是离开都要打印新的学生名单
    3.       function myClass(){
    4.           var students = [];
    5.           var total = 6;
    7.           var operation = {
    8.               join: function(name){
    9.                   students.push(name);
    10.                   console.log(students);
    11.               },
    12.               leave: function(name){
    13.                   if(students.length == this.total){
    14.                       console.log('全部到课');
    15.                   }
    17.                   for(var i = 0; i < students.length; i++){
    18.                           var item = students[i];
    19.                           if(item === name){
    20.                               students.splice(i, 1);
    21.                           }
    22.                   }
    23.                   console.log(name + '未到课');
    24.               },
    25.               classOver: function(){
    26.                   students = [];
    27.                   console.log('下课时间到');
    28.                   console.log(students);
    29.               }
    30.           }
    31.           return operation;
    32.       }
    34.       var obj = myClass();
    35.       obj.join('张三');
    36.       obj.join('李四');
    37.       obj.join('王五');
    38.       obj.join('赵六');
    39.       obj.leave('张三');
    40.       obj.classOver();
    1.       function myClass(){
    2.           var students = [];
    4.           var operation = {
    5.               join: function(name){
    6.                   students.push(name);
    7.                   console.log(students);
    8.               },
    9.               leave: function(name){
    10.                   var index = students.indexOf(name);
    11.                   if(index !== -1){
    12.                       students.splice(index, 1);
    13.                       console.log(name + '未到课');
    14.                   }
    15.               },
    16.               classOver: function(){
    17.                   students = [];
    18.                   console.log('下课时间到');
    19.                   console.log(students);
    20.               }
    21.           }
    22.           return operation;
    23.       }
    25.       var obj = myClass();
    26.       obj.join('张三');
    27.       obj.join('李四');
    28.       obj.join('王五');
    29.       obj.join('赵六');
    30.       obj.leave('张三');
    31.       obj.classOver();