函数进阶

# 函数进阶

# 1、函数的定义和调用

# 1.1 函数的定义方式

函数声明方式 function 关键字（命名函数）
函数表达式（匿名函数）
new function()

    //  函数定义方式
    // 1. 自定义函数（命名函数）
    function fn() { };

    // 2. 函数表达式 （匿名函数）
    var fun = function () { };

    // 3. 利用 new Function('参数1', '参数2', '函数体')
    var f = new Function('a', 'b', 'console.log(123)')
    f(1, 2)

    // 4. 所有函数都是 Function 的实例(对象)
    console.dir(f)
	
	// 5. 函数也属于对象
	console.log(f instanceof Object)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Function里面参数都必须是字符串样式
第三种方式执行效率低，也不方便书写，因此较少使用
所有函数都是Function的实例对象
函数也属于对象

# 1.2函数的定义方式

普通函数
对象的方法
构造函数
绑定事件函数
定时器函数
立即执行函数

    // 函数调用方式

    // 1. 普通函数
    function fn() {
      console.log("人生的巅峰");
    }

    // 2. 对象的方法
    var o = {
      sayHi: function () {
        console.log("人生的巅峰");
      }
    }
    o.sayHi()

    // 3. 构造函数
    function Star() { }
    new Star()

    // 4. 绑定事件函数
    btn.onclick = function () { }

    // 5. 定时器函数
    setInterval(function () { }, 1000)

    // 6. 立即执行函数
    (function () {
      console.log("人生的巅峰");
    })()
    // 立即执行函数是自动调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 2、this

# 2.1 函数内的`this`指向

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

一般指向调用者

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象、原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

 // 函数调用方式

    // 1. 普通函数  this 指向 window
    function fn() {
      console.log("普通函数this" + this);
    }

    // 2. 对象的方法 this 指向 对象 o
    var o = {
      sayHi: function () {
        console.log("对象方法的this" + this);
      }
    }
    o.sayHi()

    // 3. 构造函数 this 指向 ldh 这个实例对象  原型对象里面的 this 指向也是 ldh 这个实例对象
    // function Star() { }
    // Star.prototype.sing = function () {

    // }
    // var ldh = new Star()

    // 4. 绑定事件函数 this 指向 函数调用者 btn 这个按钮对象
    var btn = document.querySelector("button")
    btn.onclick = function () {
      console.log("绑定事件函数的this" + this);
    }

    // 5. 定时器函数 this 指向的 window
    setInterval(function () {
      console.log('定时器this' + this);
    }, 1000)

      // 6. 立即执行函数  this 指向的 window
      (function () {
        console.log('立即执行函数的this' + this);
      })()
    // 立即执行函数是自动调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 2.2 改变函数内部的 this 指向

JavaScript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this的指向问题，常用的有bind().call()、apply()三种方法。

# 1. call 方法

call()方法调用有个对象，简单理解为调用函数的方式，但是它可以改变函数的 this 指向

( 这里可以让子函数继承父函数 )

fun.call(thisArg, arg1, arg2, ...)

// 1. call()
    var o = {
      name: 'andy'
    }

    function fn(a, b) {
      console.log(this);
      console.log(a + b);
    }

    fn.call(o, 1, 2);
    // call 第一个可以调用函数
    // 第二个可以改变 函数内的 this 指向
    // call 的主要作用可以实现继承 
    function Father(uname, age, sex) {
      this.uname = uname
      this.age = age
      this.sex = sex
    }

    function Son(uname, age, sex) {
      Father.call(this, uname, age, sex)
    }

    var son = new Son('刘德华', 18, '男')
    console.log(son);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 2. apply 方法

call()方法调用有个对象，简单理解为调用函数的方式，但是它可以改变函数的 this 指向

fun.apply(thisArg, [argsArray])

thisArg：在fun函数运行时指定的 this值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数

// 2. apply() 应用 运用的意思
    var o = {
      name: "andy"
    }

    function fn(arr) {
      console.log(this);
      console.log(arr);   // 打印的是字符串
    }
    fn.apply(o, ['pink'])
    // 1. 也是调用函数 第二个可以改变函数内部的 this 指向
    // 2. 但是他的参数必须是数组（伪数组）
    // 3. apply 的主要应用  比如说我们可以利用 apply 借助于 数学内置对象求最大值
    // Math.max()
    var arr = [1, 66, 3, 99, 4]
    var max = Math.max.apply(Math, arr)
    console.log(max);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 3. bind 方法

bind() 方法不会调用函数但是能改变函数内部指向

fun.bind(thisArg, arg1, arg2, ...)

thisArg：在fun函数运行时指定的this值
arg1, arg2：传递的其他参数
返回由指定的this值和初始化参数改造的**原函数拷贝 **

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击</button>
  <button>点击</button>
  <button>点击</button>
  <script>
    // 3. bind() 绑定 捆绑的意思
    var o = {
      name: 'andy'
    }

    function fn(a, b) {
      console.log(this);
      console.log(a + b);
    }

    var f = fn.bind(o, 1, 2)
    f();
    // 1. 不会调用原来的函数  可以改变原来函数内部的 this 指向
    // 2. 返回的是原函数改变 this 之后产生的新函数
    // 3. 如果有的函数我们不需要立即调用 但是又想改变中国函数内部 this 指向此时用bind
    // 4. 我们有一个按钮 当我们点击了之后 就禁用这个按钮 3秒钟之后开启这个按钮

    // var btn = document.querySelector('button')
    // btn.onclick = function () {
    //   this.disabled = true
    //   // var that = this
    //   setTimeout(function () {
    //     // that.disabled = false 定时器里面指向的是window
    //   }.bind(this), 3000)
    // }

    var btns = document.querySelectorAll('button')
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        this.disabled = true
        setTimeout(function () {
          this.disabled = false
        }.bind(this), 2000)
      }
    }


  </script>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# 2.2. call apply bind 总结

相同点

都可以改变函数内部的 this 指向

区别点

call 和 apply会调用函数，并且改变函数内部 this 指向
call 和 apply传递的参数不一样，call传递参数 aru1，aru2形式 apply必须数组形式[arg]
bind 不会调用函数可以改变函数内部 this 指向

主要应用场景

call经常做继承
apply经常跟数组有关系比如借助于数学对象实现数组最大值最小值
bind 不调用函数但是还想改变this指向比如改变定时器内部的 this指向

# 3、严格模式

# 3.1 什么是严格模式

JavaScript除了提供正常模式外，还提供了严格模式( strict mode )。ES5的严格模式是采用具有限制性JavaScript变体的一种方式，即在严格的条件下运行JS代码。

严格模式在IE10以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。

严格模式对正常的JavaScript语义做了一些更改∶

消除了Javascript语法的一些不合理、不严谨之处，减少了一些怪异行为。
消除代码运行的一些不安全之处，保证代码运行的安全。
提高编译器效率，增加运行速度。
禁用了在ECMAScript的未来版本中可能会定义的一些语法，为未来新版本的Javascript做好铺垫。比如一些保留字如:class, enum, export, extends,import,super不能做变量名

# 3.2 开启严格模式

严格模式可以应用到整个脚本或个别函数中。因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。

# 为函数开启严格模式

要给某个函数开启严格模式，需要 把 "use strict" ; 或('use strict'😉 声明放在函数体所有语句之前

  <script>
    'use strict'
    // 下面的 js 代码就会按照严格模式执行代码
  </script>

1
2
3
4

有的script基本是严格模式，有的script脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他script脚本文件。

  <script>
      (function () {
        'use strict'
      })();
  </script>

1
2
3
4
5

单独给函数开启严格模式

  <script>
    function fn() {
      'use strict'
      // 下面的代码按照严格模式执行
    }
    function fun() {
      // 里面的还是按照普通模式执行
    }
  </script>

1
2
3
4
5
6
7
8
9

# 3.3 严格模式中的变化

严格模式对 Javascript的语法和行为都做了一些改变

# 1. 变量规定

在正常模式中，如果严格变量没有声明赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用 var 命令声明，然后再使用
严禁删除已经声明的变量，例如，delete x 语法是错误的

# 2. 严格模式下 this 指向问题

以前在全局作用域函数中的 this 指向 window对象
严格模式下全局作用域中函数中的 this 是 undefined
以前构造函数时不加 new也可以调用当普通函数 this指向全局对象
严格模式下，如果构造函数不加new调用，this会报错
new 实例化的构造函数指向创建的对象实例
定时器 this 指向的还是 window
事件、对象还是指向调用者

# 3. 函数的变化

函数不能有重名的参数
函数必须声明在顶层新版本的JavaScript会引入“块级作用域”(ES6 中已引入)。为了与新版本接轨，不允许在非函数的代码块内声明函数。

# 4、高阶函数

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。

// 高阶函数 函数可以作为参数传递
    function fn(a, b, callback) {
      console.log(a + b);
      // 这里的意思是  当 callback 存在时 就指向 callback 函数
      callback && callback()
    }

    fn(1, 2, function () { console.log("我是最后调用的"); })

1
2
3
4
5
6
7
8

    function fn() {
      return function () { console.log("我是返回的函数"); }
    }
    fn()

1
2
3
4

# 5、闭包

# 5.1 变量作用域

变量根据作用域的不同分为两种：全局变量和局部变量

函数内部可以使用全局变量
函数外部不可以使用局部变量
当函数执行完毕，本作用域内的局部变量会销毁

# 5.2 什么是闭包

闭包 ( closure )指有权访问另一个函数作用域中变量的函数。----- JavaScript高级程序设计

简单理解就是，一个作用域可以访问另外一个函数内部的局部变量

这里fun函数可以访问到 fn函数的局部变量num，我们称fn函数为闭包

 // 闭包(closure)指有权访问另一个函数作用域中变量的函数
    // 闭包: 我们fun 这个函数作用域 访问了另一个函数 fn 里面的局部变量 num
    function fn() {
      var num = 10;
      function fun() {
        console.log(num);
      }
      fun()
    }
    fn()

1
2
3
4
5
6
7
8
9
10

 // 闭包(closure)指有权访问另一个函数作用域中变量的函数
    // 一个作用域可以访问到另外一个函数的局部变量
    // 我们fn 外面的作用域可以访问 fn 内部的局部变量
    // 闭包的主要作用 延伸了变量的作用范围
    function fn() {
      var num = 10;
      function fun() {
        console.log(num);
      }
      return fun;
    }
    var f = fn()
    f()

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 5.3 闭包的作用

 <script>
    // 闭包(closure)指有权访问另一个函数作用域中变量的函数
    // 一个作用域可以访问到另外一个函数的局部变量
    // 我们fn 外面的作用域可以访问 fn 内部的局部变量
    // 闭包的主要作用 延伸了变量的作用范围
    function fn() {
      var num = 10;
      function fun() {
        console.log(num);
      }
      return fun;
    }
    var f = fn()
    f()

  </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 5.4 闭包的案例

面试题1 （点击 li 获取 li 的索引）

for 循环是同步任务 for循环里面的是异步任务

<body>
  <ul class="nav">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼罐头</li>
    <li>大猪蹄子</li>
  </ul>
  <script>
    // 闭包应用-点击li输出索引号
    // 1. 我们可以利用动态添加属性的方式
    // var lis = document.querySelector('.nav').querySelectorAll('li')
    // for (var i = 0; i < lis.length; i++) {
    //   lis[i].index = i
    //   lis[i].onclick = function () {
    //     console.log(this.index);
    //   }
    // }

    // 2. 利用闭包的方式得到当前的 li 的索引号
    var lis = document.querySelector('.nav').querySelectorAll('li')
    for (var i = 0; i < lis.length; i++) {
      // 利用 for 循环创建了4个立即执行函数
      // 立即执行也称为小闭包 因为立即执行函数里面的任何一个函数都可以使用它的这个 i 的变量
      (function (i) {
        // console.log(i);
        lis[i].onclick = function () {
          console.log(i);
        }
      })(i)
    }
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

三秒后打印所有的 li

<body>
  <ul class="nav">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼罐头</li>
    <li>大猪蹄子</li>
  </ul>
  <script>
    // 闭包应用 - 3秒钟之后 打印所有li元素的内容
    var lis = document.querySelector('.nav').querySelectorAll('li')
    for (var i = 0; i < lis.length; i++) {
      (function (i) {
        setTimeout(function () {
          console.log(lis[i].innerHTML);
        }, 3000)
      })(i)
    }

  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

闭包打车案例

<body>
  <script>
    // 闭包应用 - 计算打车价格
    // 打车起步价 13 （3公里内）之后每多一公里增加 5 块钱, 用户输入公里数就可以计算打车价格
    // 如果有拥堵情况, 总价格多收取10块钱的拥堵费
    var car = (function () {
      var start = 13  // 起步价
      var total = 0   // 总价
      return {
        // 正常的总价
        price: function (n) {
          if (n <= 3) {
            total = start
          } else {
            total = (n - 3) * 5 + start
          }
          return total
        },
        // 拥堵之后的费用
        yd: function (flag) {
          return flag ? total + 10 : total
        }
      }

    })()

    console.log(car.price(5));
    console.log(car.price(1));
    console.log(car.yd(true));
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 5.5 思考题

思考题 1 （没有闭包产生）

    // 思考题 1：
    var name = "The Window"
    var object = {
      name: "My Object",
      getNameFunc: function () {
        return function () {
          return this.name
        }
      }
    }
    console.log(object.getNameFunc()());

1
2
3
4
5
6
7
8
9
10
11

// 这里我们可以把 object.getNameFunc() 看作是一个函数

// var f = object.getNameFunc()

// var f = function() {

// return this.name

// }

// 执行的就是 f()() 这里类似于立即执行函数 function(){this}()

// 立即执行函数指向的是 window

思考题 2（有闭包产生）

 // 思考题 2：
    var name = "The Window"
    var object = {
      name: "My Object",
      getNameFunc: function () {
        var that = this
        return function () {
          return that.name
        }
      }
    }
    console.log(object.getNameFunc()());

1
2
3
4
5
6
7
8
9
10
11
12

// object.getNameFunc() 这个里面的this 指向的是调用者 object

// 所以下面打印的应该是 My Object

# 5.6 闭包总结

1. 闭包是什么？

闭包是一个函数（一个作用域可以访问另外一个函数的局部变量)

闭包的作用是是什么？

延伸变量的作用范围

# 6、递归

# 6.1 什么是递归？

如果一个函数在内部可以调用其本身，那么这个函数就算递归函数

简单理解：函数内部直接调用自己，这个函数就是递归函数

递归函数的作用和循环效果一样

由于递归很容易发生"栈溢出"错误(stackoverflow)，所以必须要加退出条件return,

一个简单的递归函数

 // 递归函数：函数内部自己调用自己 这个函数就算递归函数
    var num = 1

    function fn() {
      console.log("我要打印6句话");
      if (num == 6) {
        return  // 递归里面必须加退出条件
      }
      num++
      fn()
    }
    fn()