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 = 123let bol = truelet und = undefinedlet 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.面试题：浅拷贝深拷贝

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

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