3.this指向和闭包递归函数

1.函数的定义和调用

1.1 函数的定义方式

1. 函数声明方式（命名函数）

function fn() {}

1. 函数表达式（匿名函数）

var fn = function () {};

1. 利用 new function（‘参数一’，‘参数二’，‘函数体’）

var f = new Function("a", "b", "console.log(a + b)");
f(1, 2);

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

2.1 函数的调用方式

1. 普通函数

function fn() {
  console.log("人生的巅峰");
}
// fn();   fn.call()

1. 对象的方法

var o = {
  sayHi: function () {
    console.log("人生的巅峰");
  },
};
o.sayHi();

1. 构造函数

function Star() {}
new Star();

1. 绑定事件函数

btn.onclick = function () {}; // 点击了按钮就可以调用这个函数

1. 定时器函数

setInterval(function () {}, 1000); //这个函数是定时器自动 1 秒钟调用一次

1. 立即执行函数

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

2.this 指向问题

2.1 函数内部的 this 指向*

1. 普通函数 this 指向 window

function fn() {
  console.log("普通函数的this" + this);
}
window.fn();

1. 对象的方法 this 指向的是对象 o

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

1. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的 this 指向的也是 ldh 这个实例对象

function Star() {}
Star.prototype.sing = function () {};
var ldh = new Star();

1. 绑定事件函数 this 指向的是函数的调用者 btn 这个按钮对象

var btn = document.querySelector("button");
btn.onclick = function () {
  console.log("绑定时间函数的this:" + this);
};

1. 定时器函数 this 指向的也是 window

window.setTimeout(function () {
  console.log("定时器的this:" + this);
}, 1000);

1. 立即执行函数 this 还是指向 window

(function () {
  console.log("立即执行函数的this" + this);
})();

2 改变函数内部 this 指向

2.1 call 方法

1. 可以调用函数
2. 可以改变函数内的 this 指向
3. 主要作用可以实现继承

2.2 apply()方法

1. 调用函数 可以改变函数内部的 this 指向
2. 但是他的参数必须是数组(伪数组)
3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值

var o = {
  name: "andy",
};
function fn(arr) {
  console.log(this);
  console.log(arr); // 'pink'
}
fn.apply(o, ["pink"]);
var arr = [1, 66, 3, 99, 4];
var arr1 = ["red", "pink"];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);

2.3 bind()方法（绑定，捆绑）

1. 不会调用函数
2. 可以改变函数内部的 this 指向
3. 返回的是原函数改变 this 之后产生的新函数
4. 如果只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind
5. 应用场景:不调用函数,但是还想改变 this 指向

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

2.4 call、apply、bind 三者的异同

• 共同点 :
  1. 都可以改变 this 指向
  2. 都是只会被函数调用

• 不同点:

1. call 和 apply 会调用函数, 并且改变函数内部 this 指向.
2. call 和 apply 传递的参数不一样,call 传递参数使用逗号隔开,apply 使用数组传递
3. bind 不会调用函数, 可以改变函数内部 this 指向.

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

3.严格模式

3.1 什么是严格模式

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

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

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

1.消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。

2.消除代码运行的一些不安全之处，保证代码运行的安全。

3.提高编译器效率，增加运行速度。

4.禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class,enum,export, extends, import, super 不能做变量名

(function (){
  //在当前的这个自调用函数中有开启严格模式，当前函数之外还是普通模式
　　　　"use strict";
       var num = 10;
　　　　function fn() {}
})();
//或者 
<script>
  　"use strict"; //当前script标签开启了严格模式
</script>
<script>
              //当前script标签未开启严格模式
</script>

3.2 严格模式中的变化

1. 变量规定

1. 变量名必须先声明再使用
2. 不能删除已声明变量

2. 严格模式中 this 的指向问题

1. 严格模式下全局作用域中函数中的 this 是 undefined
2. 严格模式下,如果 构造函数不加 new 调用, this 指向的是 undefined 如果给他赋值则 会报错.
3. 定时器 this 还是指向 window
4. 事件，对象指向调用者

3. 函数变化

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

4.高阶函数

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

5.闭包

5.1 变量的作用域复习

5.2 什么是闭包

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

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

5.3 闭包的作用

闭包的作用：延伸了变量的作用范围

function fn() {
  var num = 250;
  function fun() {
    console.log(num);
  }
  return fun;
  // return function () {
  //     console.log(num);
  //   };
}
var f = fn();
f();

5.4 闭包的案例

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

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

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

for (var i = 0; i < lis.length; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(lis[i].innerHTML);
    }, 3000);
  })(i);
}

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

/*需求分析
打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
如果有拥堵情况,总价格多收取10块钱拥堵费*/

var car = (function () {
  var start = 13; // 起步价  局部变量
  var total = 0; // 总价  局部变量
  return {
    // 正常的总价
    price: function (n) {
      if (n <= 3) {
        total = start;
      } else {
        total = start + (n - 3) * 5;
      }
      return total;
    },
    // 拥堵之后的费用
    yd: function (flag) {
      return flag ? total + 10 : total;
    },
  };
})();
console.log(car.price(5)); // 23
console.log(car.yd(true)); // 33

6.递归函数

6.1 什么是递归函数

理解:函数内部自己调用自己.这个函数就是递归函数

注意：递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。

        // 递归函数 : 函数内部自己调用自己, 这个函数就是递归函数
        var num = 1;
        function fn() {
            console.log('我要打印6句话');

            if (num == 6) {
                return; // 递归里面必须加退出条件
            }
            num++;
            fn();
        }
        fn();