【JS面向对象】笔记叁肆章_window.initthirdlogin = ()=>{}是定义方法么-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39518871/article/details/110145110

第三章函数进阶

1. 函数的定义和调用

1.1 函数的定义方式

自定义函数(命名函数)
函数表达式 (匿名函数)
利用 var fn = new Function('参数1','参数2', '函数体');
所有函数都是 Function 的实例(对象)。

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

在这里插入图片描述

    <script>
      //  函数的定义方式

      // 1. 自定义函数(命名函数)

      function fn() {}

      // 2. 函数表达式 (匿名函数)

      var fun = function () {};

      // 3. 利用 new Function('参数1','参数2', '函数体');

      var f = new Function("a", "b", "console.log(a + b)");
      f(1, 2);
      // 4. 所有函数都是 Function 的实例(对象)
      console.dir(f);
      // 5. 函数也属于对象
      console.log(f instanceof Object);
    </script>

1.2 函数的调用方式

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

    <script>
      // 函数的调用方式
      // 1. 普通函数
      function fn() {
        console.log("人生的巅峰");
      }
      // fn();   fn.call()
      // 2. 对象的方法
      var o = {
        sayHi: function () {
          console.log("人生的巅峰");
        },
      };
      o.sayHi();
      // 3. 构造函数
      function Star() {}
      new Star();
      // 4. 绑定事件函数
      // btn.onclick = function() {};   // 点击了按钮就可以调用这个函数
      // 5. 定时器函数
      // setInterval(function() {}, 1000);  这个函数是定时器自动1秒钟调用一次
      // 6. 立即执行函数
      (function () {
        console.log("人生的巅峰");
      })();
      // 立即执行函数是自动调用
    </script>

2. this

2.1 函数内 this 的指向

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

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

    <button>点击</button>
    <script>
      // 函数的不同调用方式决定了this 的指向不同
      // 1. 普通函数 this 指向window
      function fn() {
        console.log("普通函数的this" + this);
      }
      window.fn();
      // 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
      window.setTimeout(function () {
        console.log("定时器的this:" + this);
      }, 1000);
      // 6. 立即执行函数 this还是指向window
      (function () {
        console.log("立即执行函数的this" + this);
      })();
    </script>

2.2 改变函数内部 this 指向

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

2.2.1 `call()`方法

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

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

    <script>
      // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

      // 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);
        // 相当于 Son.f = Father; Son.f(uname, age, sex); delete Son.f;
      }
      var son = new Son("刘德华", 18, "男");
      console.log(son);
    </script>

在这里插入图片描述

2.2.2 `apply()` 方法

apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

fun.apply(thisArg, [argsArray])

thisArg：在fun函数运行时指定的 this 值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

    <script>
      // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

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

      function fn(arr) {
        console.log(this);
        console.log(arr); // 'pink'
      }
      fn.apply(o, ["pink"]);
      // 1. 也是调用函数 第二个可以改变函数内部的this指向
      // 2. 但是他的参数必须是数组(伪数组)
      // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值
      // Math.max();
      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);
    </script>

在这里插入图片描述

2.2.3 `bind()` 方法

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

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

thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回由指定的 this 值和初始化参数改造的原函数拷贝
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind

    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
      // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()
      // 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 btn1 = document.querySelector('button');
      // btn1.onclick = function() {
      //     this.disabled = true; // 这个this 指向的是 btn 这个按钮
      //     // var that = this;
      //     setTimeout(function() {
      //         // that.disabled = false; // 定时器函数里面的this 指向的是window
      //         this.disabled = false; // 此时定时器函数里面的this 指向的是btn
      //     }.bind(this), 3000); // 这个this 指向的是btn 这个对象
      // }
      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>

在这里插入图片描述

2.2.4 相同点

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

2.2.5 区别点

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

2.2.6 主要应用场景

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

3. 严格模式

3.1 什么是严格模式

ECMAScript 5的严格模式是采用具有限制性JavaScript变体的一种方式，从而使代码显示地脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。

严格模式不仅仅是一个子集：它的产生是为了形成与正常代码不同的语义。不支持严格模式与支持严格模式的浏览器在执行严格模式代码时会采用不同行为。所以在没有对运行环境展开特性测试来验证对于严格模式相关方面支持的情况下，就算采用了严格模式也不一定会取得预期效果。严格模式代码和非严格模式代码可以共存，因此项目脚本可以渐进式地采用严格模式。严格模式对正常的 JavaScript语义做了一些更改。

严格模式通过抛出错误来消除了一些原有静默错误。
严格模式修复了一些导致 JavaScript引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行得更快。
严格模式禁用了在ECMAScript的未来版本中可能会定义的一些语法。

3.2 开启严格模式

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

3.2.1 为脚本开启严格模式

为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句 "use strict"; （或 'use strict';）

// 整个脚本都开启严格模式的语法
"use strict";
var v = "Hi!  I'm a strict mode script!";

因为 "use strict"; 加了引号，所以老版本的浏览器会把它当作一行普通字符串而忽略。

这种语法存在陷阱，有一个大型网站已经被它坑倒了：不能盲目的合并冲突代码。试想合并一个严格模式的脚本和一个非严格模式的脚本：合并后的脚本代码看起来是严格模式。反之亦然：非严格合并严格看起来是非严格的。合并均为严格模式的脚本或均为非严格模式的都没问题，只有在合并严格模式与非严格模式有可能有问题。建议按一个个函数去开启严格模式（至少在学习的过渡期要这样做）。

您也可以将整个脚本的内容用一个函数包括起来，然后在这个外部函数中使用严格模式。这样做就可以消除合并的问题，但是这就意味着您必须要在函数作用域外声明一个全局变量。

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

<script>
   (function (){
        "use strict";
        var num = 10;
        function fn() {}
   })();
</script>

3.2.2 为函数开启严格模式

同样的，要给某个函数开启严格模式，得把 "use strict"; (或 'use strict'; )声明一字不漏地放在函数体所有语句之前。

function strict() {
    // 函数级别严格模式语法
    'use strict';
    function nested() { 
      return "And so am I!"; 
    }
    return "Hi!  I'm a strict mode function!  " + nested();
}

function notStrict() { 
   return "I'm not strict."; 
}

    <!-- 为整个脚本(script标签)开启严格模式 -->
    <script>
        'use strict';
        //   下面的js 代码就会按照严格模式执行代码
    </script>
    <script>
        (function() {
            'use strict';
        })();
    </script>
    
    <!-- 为某个函数开启严格模式 -->
    <script>
        // 此时只是给fn函数开启严格模式
        function fn() {
            'use strict';
            // 下面的代码按照严格模式执行
        }
        function fun() {
            // 里面的还是按照普通模式执行
        }
    </script>

3.3 严格模式中的变化

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

3.3.1 变量规定

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

3.3.2 变量规定

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

3.3.3 函数变化

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

4. 高阶函数

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

<script>
   function fn(callback){
       callback&&callback();
   }
   fn(function(){alert('hi')}
</script>

<script>
   function fn(){
      return function() {}
   }
   fn();
</script>

此时fn 就是一个高阶函数
函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。
同理函数也可以作为返回值传递回来

5. 闭包

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

5.1 变量/词法作用域

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

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

function init() {
    var name = "Mozilla"; // name 是一个被 init 创建的局部变量
    function displayName() { // displayName() 是内部函数，一个闭包
        alert(name); // 使用了父函数中声明的变量
    }
    displayName();
}
init();

init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数，并且仅在 init() 函数体内可用。请注意，displayName() 没有自己的局部变量。然而，因为它可以访问到外部函数的变量，所以 displayName() 可以使用父函数 init() 中声明的变量 name 。

运行该代码后发现， displayName() 函数内的 alert() 语句成功显示出了变量 name 的值（该变量在其父函数中声明）。这个词法作用域的例子描述了分析器如何在函数嵌套的情况下解析变量名。词法（lexical）一词指的是，词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数可访问声明于它们外部作用域的变量。

5.2 闭包的概念

    function makeFunc() {
        var name = "Mozilla";
        function displayName() {
            alert(name);
    }
        return displayName;
    }
    var myFunc = makeFunc();
    myFunc();

运行这段代码的效果和之前 init() 函数的示例完全一样。其中不同的地方（也是有意思的地方）在于内部函数 displayName() 在执行前，从外部函数返回。

第一眼看上去，也许不能直观地看出这段代码能够正常运行。在一些编程语言中，一个函数中的局部变量仅存在于此函数的执行期间。一旦 makeFunc() 执行完毕，你可能会认为 name 变量将不能再被访问。然而，因为代码仍按预期运行，所以在 JavaScript 中情况显然与此不同。

原因在于，JavaScript中的函数会形成了闭包。闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。在本例子中，myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用。displayName 的实例维持了一个对它的词法环境（变量 name 存在于其中）的引用。因此，当 myFunc 被调用时，变量 name 仍然可用，其值 Mozilla 就被传递到alert中。

下面是一个更有意思的示例 — 一个 makeAdder 函数：

    function makeAdder(x) {
       return function(y) {
           return x + y;
      };
    }
    var add5 = makeAdder(5);
    var add10 = makeAdder(10);
    console.log(add5(2));  // 7
    console.log(add10(2)); // 12

在这个示例中，我们定义了 makeAdder(x) 函数，它接受一个参数 x ，并返回一个新的函数。返回的函数接受一个参数 y，并返回 x+y 的值。

从本质上讲，makeAdder 是一个函数工厂 —— 他创建了将指定的值和它的参数相加求和的函数。在上面的示例中，我们使用函数工厂创建了两个新函数 —— 一个将其参数和 5 求和，另一个和 10 求和。

add5 和 add10 都是闭包。它们共享相同的函数定义，但是保存了不同的词法环境。在 add5 的环境中，x 为 5。而在 add10 中，x 则为 10。

5.3 实用的闭包

闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。

因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。

在 Web 中，你想要这样做的情况特别常见。大部分我们所写的 JavaScript 代码都是基于事件的 — 定义某种行为，然后将其添加到用户触发的事件之上（比如点击或者按键）。我们的代码通常作为回调：为响应事件而执行的函数。

5.4 用闭包模拟私有方法

编程语言中，比如 Java，是支持将方法声明为私有的，即它们只能被同一个类中的其它方法所调用。

而 JavaScript 没有这种原生支持，但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。

下面的示例展现了如何使用闭包来定义公共函数，并令其可以访问私有函数和变量。这个方式也称为模块模式（module pattern）：

ar Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }   
})();

console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */

在之前的示例中，每个闭包都有它自己的词法环境；而这次我们只创建了一个词法环境，为三个函数所共享：Counter.increment，Counter.decrement 和 Counter.value。

该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。

这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 changeBy 函数。

你应该注意到我们定义了一个匿名函数，用于创建一个计数器。我们立即执行了这个匿名函数，并将他的值赋给了变量Counter。我们可以把这个函数储存在另外一个变量makeCounter中，并用他来创建多个计数器。

  var makeCounter = function() {
    var privateCounter = 0;
    function changeBy(val) {
      privateCounter += val;
    }
    return {
      increment: function() {
        changeBy(1);
      },
      decrement: function() {
        changeBy(-1);
      },
      value: function() {
        return privateCounter;
      }
    }  
  };

  var Counter1 = makeCounter();
  var Counter2 = makeCounter();
  console.log(Counter1.value()); /* logs 0 */
  Counter1.increment();
  Counter1.increment();
  console.log(Counter1.value()); /* logs 2 */
  Counter1.decrement();
  console.log(Counter1.value()); /* logs 1 */
  console.log(Counter2.value()); /* logs 0 */

请注意两个计数器 Counter1 和 Counter2 是如何维护它们各自的独立性的。每个闭包都是引用自己词法作用域内的变量 privateCounter 。

每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

以这种方式使用闭包，提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。

闭包案例：点击 `li` 输出索引号

    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        // 闭包应用-点击li输出当前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(i);
                console.log(this.index);
            }
        }
        // 2. 利用闭包的方式得到当前小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>

异步任务有：回调函数，定时器中的回调函数，事件中的回调函数，Ajax中的回调函数。

闭包案例：定时器中的闭包

    <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>

闭包案例：打车价格

    <script>
        // 闭包应用-计算打车价格 
        // 打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
        // 如果有拥堵情况,总价格多收取10块钱拥堵费
        // function fn() {};
        // fn();
        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

        console.log(car.price(1)); // 13
        console.log(car.yd(false)); // 13
    </script>

闭包的思考题

    <script>
        // 思考题 1：
        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function() {
                return function() {
                    return this.name;
                };
            }
        };
        console.log(object.getNameFunc()())
        var f = object.getNameFunc();
        // 类似于
        var f = function() {
            return this.name;
        }
        f();
        // 结果：输出 The Window ，
        // 此时没有闭包的产生

        // 思考题 2：
        var name = "The Window";　　
        var object = {　　　　
            name: "My Object",
            getNameFunc: function() {
                var that = this;
                return function() {
                    return that.name;
                };
            }
        };
        console.log(object.getNameFunc()());
        // 结果：输出 My Object ，
        // 此时有闭包的产生且闭包为getNameFunc函数和其绑定的环境
    </script>

在这里插入图片描述

6. 函数递归

6.1 递归的概念

递归函数 : 函数内部自己调用自己, 这个函数就是递归函数。由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出递归条件 return。

    <script>
        // 递归函数 : 函数内部自己调用自己, 这个函数就是递归函数
        var num = 1;
        function fn() {
            console.log('我要打印6句话');
            if (num == 6) {
                return; // 递归里面必须加退出条件
            }
            num++;
            fn();
        }
        fn();
    </script>

6.2 利用递归求阶乘

    <script>
        // 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
        function fn(n) {
            if (n == 1) {
                return 1;
            }
            return n * fn(n - 1);
        }
        console.log(fn(3));
        console.log(fn(4));
        // 详细思路 假如用户输入的是3
        //return  3 * fn(2)
        //return  3 * (2 * fn(1))
        //return  3 * (2 * 1)
        //return  3 * (2)
        //return  6
    </script>

6.3 求斐波那契数列

    <script>
        // 利用递归函数求斐波那契数列(兔子序列)  1、1、2、3、5、8、13、21...
        // 用户输入一个数字 n 就可以求出 这个数字对应的兔子序列值
        // 我们只需要知道用户输入的n 的前面两项(n-1 n-2)就可以计算出n 对应的序列值
        function fb(n) {
            if (n === 1 || n === 2) {
                return 1;
            }
            return fb(n - 1) + fb(n - 2);
        }
        console.log(fb(3));
        console.log(fb(6));
    </script>

6.4 利用递归遍历数组

    <script>
        var data = [{
            id: 1,
            name: '家电',
            goods: [{
                id: 11,
                gname: '冰箱',
                goods: [{
                    id: 111,
                    gname: '海尔'
                }, {
                    id: 112,
                    gname: '美的'
                }, ]
            }, {
                id: 12,
                gname: '洗衣机'
            }]
        }, {
            id: 2,
            name: '服饰'
        }];
        // 我们想要做输入id号,就可以返回的数据对象
        // 1. 利用 forEach 去遍历里面的每一个对象
        function getID(json, id) {
            var o = {};
            json.forEach(function(item) {
                // console.log(item); // 2个数组元素
                if (item.id == id) {
                    // console.log(item);
                    o = item;
                    // 2. 我们想要得里层的数据 11 12 可以利用递归函数
                    // 里面应该有goods这个数组并且数组的长度不为 0 
                } else if (item.goods && item.goods.length > 0) {
                    o = getID(item.goods, id);
                }
            });
            return o;
        }
        console.log(getID(data, 1));
        console.log(getID(data, 2));
        console.log(getID(data, 11));
        console.log(getID(data, 12));
        console.log(getID(data, 111));
    </script>

6.5 浅拷贝

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用。
深拷贝拷贝多层，每一级别的数据都会拷贝。
Object.assign(target, …sources) ES6新增方法可以浅拷贝。

    <script>
        // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
        // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        // for (var k in obj) {
        //     // k 是属性名   obj[k] 属性值
        //     o[k] = obj[k];
        // }
        // console.log(o);
        // o.msg.age = 20;
        // console.log(obj);

        console.log('--------------');
        Object.assign(o, obj);
        console.log(o);
        o.msg.age = 20;
        console.log(obj);
    </script>

在这里插入图片描述

6.6 深拷贝

    <script>
        // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };
        var o = {};
        // 封装函数 
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断我们的属性值属于哪种数据类型
                // 1. 获取属性值  oldobj[k]
                var item = oldobj[k];
                // 2. 判断这个值是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item)
                } else if (item instanceof Object) {
                    // 3. 判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item)
                } else {
                    // 4. 属于简单数据类型
                    newobj[k] = item;
                }
            }
        }
        deepCopy(o, obj);
        console.log(o);

        var arr = [];
        console.log(arr instanceof Object);
        o.msg.age = 20;
        console.log(obj);
    </script>

在这里插入图片描述

第四章正则表达式

1. 正则表达式的概述

1.1 什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。

正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。

1.2 正则表达式的特点

灵活性、逻辑性和功能性非常的强。
可以迅速地用极简单的方式达到字符串的复杂控制。
对于刚接触的人来说，比较晦涩难懂。比如： ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达
式. 比如用户名: /^[a-z0-9_-]{3,16}$/

2. 正则表达式的使用

2.1 创建正则表达式

在 JavaScript 中，可以通过两种方式创建一个正则表达式。

通过调用 RegExp 对象的构造函数创建

var 变量名 = new RegExp(/表达式/);

通过字面量创建

var 变量名 = /表达式/;

// 注释中间放表达式就是正则字面量

2.2 测试正则表达式

test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。

regexObj.test(str)

regexObj 是写的正则表达式
str 我们要测试的文本
就是检测str文本是否符合我们写的正则表达式规范.

3. 正则表达式的特殊字符

3.1 正则表达式的组成

一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。

特殊字符非常多，可以参考：

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
jQuery 手册：正则表达式部分
正则测试工具: http://tool.oschina.net/regex

这里我们把元字符划分几类学习。

3.2 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。

边界符	说明
^	匹配输入的开始（以谁开始）。如果多行标志被设置为 true，那么也匹配换行符后紧跟的位置。
$	匹配输入的结束（以谁结束）。如果多行标志被设置为 true，那么也匹配换行符后紧跟的位置。

如果 ^ 和 $ 在一起，表示必须是精确匹配。

    <script>
        // 边界符 ^ $ 
        var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
        // /abc/ 只要包含有abc这个字符串返回的都是true
        console.log(rg.test('abc')); // true
        console.log(rg.test('abcd')); // true
        console.log(rg.test('aabcd')); // true
        console.log('---------------------------');
        var reg = /^abc/;
        console.log(reg.test('abc')); // true
        console.log(reg.test('abcd')); // true
        console.log(reg.test('aabcd')); // false
        console.log('---------------------------');
        var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
        console.log(reg1.test('abc')); // true
        console.log(reg1.test('abcd')); // false
        console.log(reg1.test('aabcd')); // false
        console.log(reg1.test('abcabc')); // false
    </script>

3.3 字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

边界符	说明
`[xyz]`	一个字符集合。匹配方括号中的任意字符，包括转义序列。你可以使用破折号（-）来指定一个字符范围。
`[^xyz]`	一个反向字符集。也就是说，它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的。

    <script>
        //var rg = /abc/;  只要包含abc就可以 
        // 字符类: [] 表示有一系列字符可供选择，只要匹配其中一个就可以了
        var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
        console.log(rg.test('andy')); // true
        console.log(rg.test('baby')); // true
        console.log(rg.test('color')); // true
        console.log(rg.test('red')); // false
        var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
        console.log(rg1.test('aa')); // false
        console.log(rg1.test('a')); // true
        console.log(rg1.test('b')); // true
        console.log(rg1.test('c')); // true
        console.log(rg1.test('abc')); // false
        console.log('------------------');

        var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
        console.log(reg.test('a')); // true
        console.log(reg.test('z')); // true
        console.log(reg.test(1)); // false
        console.log(reg.test('A')); // false
        // 字符组合
        var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  
        console.log(reg1.test('a')); // true
        console.log(reg1.test('B')); // true
        console.log(reg1.test(8)); // true
        console.log(reg1.test('-')); // true
        console.log(reg1.test('_')); // true
        console.log(reg1.test('!')); // false
        console.log('----------------');
        // 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
        var reg2 = /^[^a-zA-Z0-9_-]$/;
        console.log(reg2.test('a')); // false
        console.log(reg2.test('B')); // false
        console.log(reg2.test(8)); // false
        console.log(reg2.test('-')); // false
        console.log(reg2.test('_')); // false
        console.log(reg2.test('!')); // true
    </script>

3.4 量词符

量词符用来设定某个模式出现的次数。

边界符	说明
*	匹配前一个表达式 0 次或多次。等价于 {0,}。
+	匹配前面一个表达式 1 次或者多次。等价于 {1,}。
?	匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。
{n}	n 是一个正整数，匹配了前面一个字符刚好出现了 n 次。
{n,}	n是一个正整数，匹配前一个字符至少出现了n次。
{n,m}	n 和 m 都是整数。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0，这个值被忽略。

    <script>
        // 量词符: 用来设定某个模式出现的次数
        var reg = /^a$/;
        console.log(reg.test('a')); // true
        console.log(reg.test('aa')); // false
        console.log("------------------");

        // 1. * 相当于 >= 0 可以出现0次或者很多次 
        var reg = /^a*$/;
        console.log(reg.test('')); //true
        console.log(reg.test('a')); // true
        console.log(reg.test('aa')); // true
        console.log(reg.test('aaaaaa')); // true
        console.log("------------------");

        // 2. + 相当于 >= 1 可以出现1次或者很多次
        var reg = /^a+$/;
        console.log(reg.test('')); // false
        console.log(reg.test('a')); // true
        console.log(reg.test('aa')); // ture
        console.log(reg.test('aaaaaa')); // true
        console.log("------------------");

        // 3. ?  相当于 1 || 0
        var reg = /^a?$/;
        console.log(reg.test('')); // true
        console.log(reg.test('a')); // true
        console.log(reg.test('aa')); // false
        console.log(reg.test('aaaaaa')); // false
        console.log("------------------");

        // 4. {3 } 就是重复3次
        var reg = /^a{3}$/;
        console.log(reg.test('')); // false
        console.log(reg.test('a')); // false
        console.log(reg.test('aa')); // false
        console.log(reg.test('aaaaaa')); // false
        console.log(reg.test('aaa')); // true
        console.log("------------------");

        // 5. {3, }  大于等于3
        var reg = /^a{3,}$/;
        console.log(reg.test('')); // false
        console.log(reg.test('a')); // false
        console.log(reg.test('aa')); // false
        console.log(reg.test('aaaaaa')); // true
        console.log(reg.test('aaa')); // true
        console.log("------------------");

        // 6. {3, 16}  大于等于3 并且 小于等于16
        var reg = /^a{3,16}$/;
        console.log(reg.test('')); // false
        console.log(reg.test('a')); // false
        console.log(reg.test('aa'));// false
        console.log(reg.test('aaaaaa')); // true
        console.log(reg.test('aaa')); // true
        console.log(reg.test('aaaaaaaaaaaaaaaaaaaaa')); // false
    </script>

3.5 用户表单验证

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      span {
        color: #aaa;
        font-size: 14px;
      }

      .right {
        color: green;
      }

      .wrong {
        color: red;
      }
    </style>
  </head>

  <body>
    <input type="text" class="uname" /> <span>请输入用户名</span>
    <script>
      //  量词是设定某个模式出现的次数
      var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
      // {6,16}  中间不要有空格
      // console.log(reg.test('a'));
      // console.log(reg.test('8'));
      // console.log(reg.test('18'));
      // console.log(reg.test('aa'));
      // console.log('-------------');
      // console.log(reg.test('andy-red'));
      // console.log(reg.test('andy_red'));
      // console.log(reg.test('andy007'));
      // console.log(reg.test('andy!007'));
      var uname = document.querySelector(".uname");
      var span = document.querySelector("span");
      uname.onblur = function () {
        if (reg.test(this.value)) {
          console.log("正确的");
          span.className = "right";
          span.innerHTML = "用户名格式输入正确";
        } else {
          console.log("错误的");
          span.className = "wrong";
          span.innerHTML = "用户名格式输入不正确";
        }
      };
    </script>
  </body>
</html>

3.5 括号总结

大括号，量词符，里面表示重复次数。
中括号，字符集合。匹配方括号中的任意字符。
小括号，表示优先级。

可以在线测试: https://c.runoob.com/

    <script>
        // 中括号 字符集合.匹配方括号中的任意字符. 
        // var reg = /^[abc]$/;
        // a 也可以 b 也可以 c 可以  a ||b || c
        // 大括号  量词符. 里面表示重复次数
        var reg = /^abc{3}$/; // 它只是让c重复三次   abccc
        console.log(reg.test('abc')); // false
        console.log(reg.test('abcabcabc')); // false
        console.log(reg.test('abccc')); // true

        // 小括号 表示优先级
        var reg = /^(abc){3}$/; // 它是让abc重复三次
        console.log(reg.test('abc')); // false
        console.log(reg.test('abcabcabc')); // true
        console.log(reg.test('abccc')); // false

3.6 预定义类

预定义类指的是某些常见模式的简写方式。

预定类	说明
\d	匹配一个数字。等价于[0-9]。
\D	匹配一个非数字字符。等价于`[^0-9]`。
\w	匹配一个单字字符（字母、数字或者下划线）。等价于 `[A-Za-z0-9_]`。
\W	匹配一个非单字字符。等价于 `[^A-Za-z0-9_]`。
\s	匹配一个空白字符，包括空格、制表符、换页符和换行符。等价于`[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]`。
\S	匹配一个非空白字符。等价于 `[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]`。

    <script>
        // 座机号码验证:  全国座机号码  两种格式:   010-12345678  或者  0530-1234567
        // 正则里面的或者 符号  |  
        // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
        var reg = /^\d{3,4}-\d{7,8}$/;
    </script>

表单验证

手机号码: /^1[3|4|5|7|8][0-9]{9}$/
QQ: [1-9][0-9]{4,} (腾讯QQ号从10000开始)
昵称是中文: ^[\u4e00-\u9fa5]{2,8}$

4. 正则表达式中的替换

4.1 `replace()` 替换

replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

 stringObject.replace(regexp/substr, replacement);

第一个参数: 被替换的字符串或者正则表达式
第二个参数: 替换为的字符串
返回值是一个替换完毕的新字符串

在这里插入图片描述

4.2 正则表达式参数

 /表达式/[switch]

switch(也称为修饰符) 按照什么样的模式来匹配。有三种值：

g：全局匹配
i：忽略大小写
gi：全局匹配 + 忽略大小写

    <textarea name="" id="message"></textarea> <button>提交</button>
    <div></div>
    <script>
        // 替换 replace
        // var str = 'andy和red';
        // // var newStr = str.replace('andy', 'baby');
        // var newStr = str.replace(/andy/, 'baby');
        // console.log(newStr);
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            div.innerHTML = text.value.replace(/激情|gay/g, '**');
        }
    </script>