:::info 前言：基本上和之前学过的语言一样，return语句、continue语句、break语句、函数的传参用法基本都一样，记录一下js的特征用法 :::

函数定义使用

不像之前的C++、JAVA那样需要一个返回值来声明，JavaScript里面直接一个关键字就搞定了，如果里面有return就返回return的值，没有则返回undefined。下面记录一下js里面的三种函数声明方式和不同情况下的使用场景。

function关键字

自定义函数方式(命名函数)利用函数关键字 function 自定义函数方式

  1. // 声明定义方式
  2. function fn() {...}
  3. // 调用  
  4. fn();
  • 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

    匿名函数表达式

    函数表达式方式(匿名函数）

    【C++11里面也有匿名函数的用法，基本上就是匿名函数表达式】

  1. // 这是函数表达式写法，匿名函数后面跟分号结束
  2. var fn = function(){...};
  3. // 调用的方式，函数调用必须写到函数体下面
  4. fn();
  • 这个fn 里面存储的是一个函数
  • 函数表达式方式原理跟声明变量方式是一致的

  • 函数调用的代码必须写到函数体后面

    构造函数

  • 所有函数都是Function的对象，函数也是对象

    1. var f = new Function('a', 'b', 'console.log(a + b)');
    2. f(1, 2);
    3. var fn = new Function('参数1','参数2'..., '函数体')

    立即调用函数

    两种表达方式

  • (function(){})()

  • (function(){}())

与立即执行函数相关的知识还有在函数前面加上一些符号（！、~、+……）会对函数的返回值进行相应的操作，其中加上~的意思是对返回值进行按位取反的操作，具体参考下面的参考资料
image.png
参考：https://blog.csdn.net/hot_cool/article/details/77567166

函数参数

arguments

image.png
当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

  • 具有 length 属性
  • 按索引方式储存数据

  • 不具有数组的 push , pop 等方法
    注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。

    箭头函数（ES6）里面的不同

    es6的箭头函数用起来很方便，但是一个不方便的就是在这里面arguments 不能用了
    image.png
    如果非要用的化，将这个箭头函数放在一个普通函数里面，让箭头函数接受这个普通函数的参数
    image.png

    关于值传递

    image.png

    this

    几个常用this指向

  • 全局作用域或者普通函数中this指向全局对象window（定时器里面的this指向window）

  • 方法调用中谁调用this指向谁
  • 构造函数中this指向构造函数的实例
    1. <button>点击</button>
    2.   <script>
    3.       // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
    4.       // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
    5.       console.log(this);
    6.       function fn() {
    7.           console.log(this);
    8.       }
    9.       window.fn();
    10.       window.setTimeout(function() {
    11.           console.log(this);
    12.       }, 1000);
    13.       // 2. 方法调用中谁调用this指向谁
    14.       var o = {
    15.           sayHi: function() {
    16.               console.log(this); // this指向的是 o 这个对象
    17.           }
    18.       }
    19.       o.sayHi();
    20.       var btn = document.querySelector('button');
    21.       btn.addEventListener('click', function() {
    22.               console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
    23.           })
    24.       // 3. 构造函数中this指向构造函数的实例
    25.       function Fun() {
    26.           console.log(this); // this 指向的是fun 实例对象
    27.       }
    28.       var fun = new Fun();
    29.   </script>

函数内部的this指向

这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同
一般指向我们的调用者.

改变函数内部this指向

:::tips call方法 ::: call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向
应用场景: 经常做继承.

  1. var o = {
  2.     name: 'andy'
  3. }
  4.  function fn(a, b) {
  5.       console.log(this);
  6.       console.log(a+b)
  7. };
  8. fn(1,2)// 此时的this指向的是window 运行结果为3
  9. fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3

:::tips apply方法 ::: apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。
应用场景: 经常跟数组有关系

  1. var o = {
  2.     name: 'andy'
  3. }
  4.  function fn(a, b) {
  5.       console.log(this);
  6.       console.log(a+b)
  7. };
  8. fn()// 此时的this指向的是window 运行结果为3
  9. fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3

:::tips bind方法 ::: bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数
如果只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind
应用场景:不调用函数,但是还想改变this指向

  1. var o = {
  2.  name: 'andy'
  3.  };
  4. function fn(a, b) {
  5.     console.log(this);
  6.     console.log(a + b);
  7. };
  8. var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
  9. f();//调用新函数  this指向的是对象o 参数使用逗号隔开

:::tips call、apply、bind三者的异同 :::

  • 共同点 : 都可以改变this指向
  • 不同点:
    • call 和 apply 会调用函数, 并且改变函数内部this指向.
    • call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
    • bind 不会调用函数, 可以改变函数内部this指向.
  • 应用场景
    1. call 经常做继承.
    2. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
    3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

      闭包

      闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。

      闭包的作用

      作用：延伸变量的作用范围。
      1. function fn() {
      2. var num = 10;
      3. function fun() {
      4. console.log(num);
      5. }
      6. return fun;
      7. }
      8. var f = fn();
      9. f();

      闭包的案例

  1. 利用闭包的方式得到当前li 的索引号

    1. for (var i = 0; i < lis.length; i++) {
    2. // 利用for循环创建了4个立即执行函数
    3. // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
    4. (function(i) {
    5.  lis[i].onclick = function() {
    6.    console.log(i);
    7.  }
    8. })(i);
    9. }

  2. 闭包应用-3秒钟之后,打印所有li元素的内容

    1. for (var i = 0; i < lis.length; i++) {
    2. (function(i) {
    3.   setTimeout(function() {
    4.   console.log(lis[i].innerHTML);
    5.   }, 3000)
    6. })(i);
    7. }

  3. 闭包应用-计算打车价格

    1. /*需求分析
    2. 打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
    3. 如果有拥堵情况,总价格多收取10块钱拥堵费*/
    4. var car = (function() {
    5.   var start = 13; // 起步价  局部变量
    6.   var total = 0; // 总价  局部变量
    7.   return {
    8.     // 正常的总价
    9.     price: function(n) {
    10.       if (n <= 3) {
    11.         total = start;
    12.       } else {
    13.         total = start + (n - 3) * 5
    14.       }
    15.       return total;
    16.     },
    17.     // 拥堵之后的费用
    18.     yd: function(flag) {
    19.       return flag ? total + 10 : total;
    20.     }
    21.  }
    22. })();
    23. console.log(car.price(5)); // 23
    24. console.log(car.yd(true)); // 33
  1. var name = "The Window";
  2.    var object = {
  3.      name: "My Object",
  4.      getNameFunc: function() {
  5.      return function() {
  6.      return this.name;
  7.      };
  8.    }
  9.  };
  10. console.log(object.getNameFunc()())
  11. -----------------------------------------------------------------------------------
  12. var name = "The Window";　　
  13.   var object = {　　　　
  14.     name: "My Object",
  15.     getNameFunc: function() {
  16.     var that = this;
  17.     return function() {
  18.     return that.name;
  19.     };
  20.   }
  21. };
  22. console.log(object.getNameFunc()())

简单/复杂数据类型传参

  • 简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null
  • 复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

    堆栈存储区别

    堆栈空间分配区别：
    1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
    简单数据类型存放到栈里面
    2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
    image.png
    简单数据类型的存储方式：值类型变量的数据直接存放在变量（栈空间）中
    image.png
    复杂数据类型的存储方式：引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
    image.png

    简单类型传参

    函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
    1. function fn(a) {
    2.   a++;
    3.   console.log(a); 
    4. }
    5. var x = 10;
    6. fn(x);
    7. console.log(x)；
    运行结果如下：
    image.png

    复杂数据类型传参

    函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
    1. function Person(name) {
    2.   this.name = name;
    3. }
    4. function f1(x) { // x = p
    5.   console.log(x.name); // 2. 这个输出什么 ?    
    6.   x.name = "张学友";
    7.   console.log(x.name); // 3. 这个输出什么 ?    
    8. }
    9. var p = new Person("刘德华");
    10. console.log(p.name);    // 1. 这个输出什么 ?   
    11. f1(p);
    12. console.log(p.name);    // 4. 这个输出什么 ?
    1.   运行结果如下：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1484158/1611885137269-b37442f2-ea5b-45ce-a974-ff4676772c47.png#crop=0&crop=0&crop=1&crop=1&height=163&id=qL1s3&margin=%5Bobject%20Object%5D&name=image.png&originHeight=325&originWidth=345&originalType=binary&ratio=1&rotation=0&showTitle=false&size=22422&status=done&style=stroke&title=&width=172.5)