JavaScript闭包和递归

函数this指向

1：环境对象 this : 谁'调用'我,我就指向谁，上下文环境：函数作用域

2: js中函数有三种调用方法，this三种指向

（1）普通函数； 函数名() this指向window

（2）构造函数； new 函数名() this指向new创建实例对象

（3）对象方法: 对象名.方法名() this指向对象

* 小技巧: 没点没new是window, 有new是实例,有点是点左边的对象

函数上下文调用

默认情况下,函数内部的this不能主动修改. 如果需要修改，则需要使用上下文方式

上下文调用 : 修改函数内部的this

1 函数名.call ({修改后的this指向},形参1,形参2…………)

function fn(a,b){
            console.log( a + b )
            console.log( this )
        }
fn.call({name:'张三'},10,20)

2 函数名.apply({修改后的this指向},[数组或者伪数组])

apply会自动帮你遍历数组，然后按照顺序逐一传参

function fn(a,b){
            console.log( a + b )
            console.log( this )
        }
fn.apply({name:'千玺'}，[30,40])

3  函数名.bind(修改后的this)

* 不会立即执行函数,而是得到一个修改this之后的新函数。

* bind一般用于修改: 定时器函数、事件处理函数

function fn(a,b){
            console.log( a + b )
            console.log( this )
        }
let newFn = fn.bind({name:'王五'})
        newFn(100,200)
        newFn(10,20)

面试必问: call 和 apply 和 bind三者区别：（重点）

相同点 :

作用一致，修改函数this指向

不同点 :

传参方式不同 : call是按照顺序传参, apply是数组/伪数组传参

执行机制不同 : call和apply会立即执行函数,而bind不会立即执行而是得到修改this的新函数

例子：

call使用场景万能数据类型检测：

1. typeof 数据 : 有两种数据类型无法检测

null和数组无法检测,结果都是 'object'

2. 解决方案:万能数据类型检测

Object.prototype.toString.call(数据)

例子：

 //值类型
        let str = 'abc'
        let num = 123
        let bol = true
        let und = undefined
        let nul = null
        //引用类型
        let arr = [10,20,30]
        let fn = function(){}
        let obj = {name:'张三'}

        console.log( typeof str )//'string'字符串型
        console.log( typeof num )//'number'数字类型
        console.log( typeof bol )//'boolean'布尔型
        console.log( typeof und )//'undefined'未定义型
        console.log( typeof nul )//'object' 对象  正确的是空
        console.log( typeof arr )//'object' 对象 正确的是数组
        console.log( typeof fn )//'function' 函数
        console.log( typeof obj )//'object' 对象


        /* Object.prototype.toString() 返回固定格式字符串 '[object 数据类型]' */
        console.log( Object.prototype.toString.call( str ) )//[object String] 字符串型
        console.log( Object.prototype.toString.call( num ) )//[object Number] 数字类型
        console.log( Object.prototype.toString.call( bol ) )//[object Boolean] 布尔型
        console.log( Object.prototype.toString.call( und ) )//[object Undefined]  未定义型
        console.log( Object.prototype.toString.call( nul ) )//[object Null] 空
        console.log( Object.prototype.toString.call( arr ) )//[object Array] 数组
        console.log( Object.prototype.toString.call( fn ) )//[object Function]  函数
        console.log( Object.prototype.toString.call( obj ) )//[object Object]  对象

3.面试点：

（1）请说下列代码的运行结果：typeof [ ]

（2）是否能得到array 如果不能如何解决

伪数组转数组:

ES6方法：伪数组转真数组 ： Array.from( 伪数组 )

   //伪数组 本质是 :  对象
        let obj = {
            0:20,
            1:66,
            2:88,
            3:90,
            length:4
        }  
        
        // ES5方法
        //伪数组转真数组
        let arr = []
        // arr.push( obj[0],obj[1],obj[2],obj[3])
        //借助 apply自动遍历数组/伪数组 逐一传参特点
        //这里不需要修改this,只是借助apply传参的特点. this指向原来是谁，还是设置谁
        arr.push.apply( arr,obj )
        console.log(arr)

        // ES6方法
        //伪数组转真数组 ：  Array.from( 伪数组 )
        console.log( Array.from(obj) )

求最大值最小值：

Math.max (...arr) (最大) ,  Math.min(...arr)(最小)

const arr = [20,30,40,50,80]
    
     // 1. Math.max.apply(Math,arr)
    console.log(Math.max.apply(Math,arr))
    console.log(Math.min.apply(Math,arr))

    // 2.Es6
    // ...展开运算符，相当于自动遍历数组每一个元素 在这里类似于apply功能
   const max1 = Math.max(...arr)
   console.log(max1)

   const max2 = Math.min(...arr)
   console.log(max2)

修改定时器的this

定时器中的this : 默认指向window

想要修改定时器函数中的this需要用到bind()

 setTimeout(function() {
          console.log(this)
        }.bind({ name: "1111" }),2000)


      //   let obj = {
      //     name: "张三",
      //     hobby: ["学习", "干饭", "睡觉"],
      //     sayHi: function() {
      //       setTimeout(function() {
      //         console.log(this)
      //       }, 1000)
      //     }
      //   }

      //   obj.sayHi()

闭包

1.闭包closure是 :

  a. 闭包 是一个 访问其他函数内部变量 的 函数

  b. 闭包组合 = 函数 + 上下文引用

2.闭包作用 : 解决变量污染

3.在浏览器中调试闭包 

闭包案例

 <input type="text" placeholder="请输入搜索内容">
  <button class="btn">点我搜索</button>
  <script>
    // 获取收搜索点击按钮
    document.querySelector('button').addEventListener('click',function(){
      // 获取输入框文本
      const taxt = document.querySelector('input').value
      // 网络请求不是立即就能得到数据的 而是像定时器一样
      // 定时器模拟网络请求
      setTimeout(function(){
        alert(`${taxt}搜索结果是12345`)
      },1000)
    })
  </script>

递归

1.递归函数: 一个函数 在内部 调用自己

* 递归作用和循环类似的,也需要有结束条件

2.递归应用:

(1)浅拷贝与深拷贝：

方式一(推荐) : JSON方式实现

* let newObj = JSON.parse( JSON.stringify( obj ) )

 const obj = {
      name: '千玺',
      age: 19,
      hobby: ['学习', '上课', '代码']
    }

    //浅拷贝： 拷贝地址
    // let newObj = obj
    // 修改拷贝后的数据，原数据也会修改
    // newObj.name = '李四'
    // console.log( obj,newObj)

    // 深拷贝：拷贝的是数据 修改修改后的数据 对原数据没影响
    //(1)先把js对象 -> JSON字符串   (JSON会自动帮你深拷贝)
    //  const obj1= JSON.stringify(obj)
    //(2)再把 JSON字符串 -> js对象
    //  const newObj = JSON.parse(obj1)

    //  上面的步骤写成一个 
    const newObj = JSON.parse(JSON.stringify(obj))
    newObj.name = '王源'
    console.log(obj, newObj)

方式二(递归) : 了解

(2)遍历dom树

3.面试题：浅拷贝深拷贝

浅拷贝：拷贝的是地址，修改拷贝的数据后，对原数据有影响

深拷贝：拷贝的是数据，修改修改后的数据，对原数据没有影响