闭包与this指向

1.闭包

                                                 闭包

1.函数作为参数被传递

2.函数作为返回值被返回

3.内部函数可用访问外部函数

<script>
    //函数作为返回值
    function create() {
        let a = 100
        return function() {
            console.log(a);
        }
    }
    let fn = create()
    let a = 200
    fn() //100
        // 函数作为参数被传递
    function print(fn) {
        const a = 200
        fn()
    }
    const a = 100

    function fn() {
        console.log(a)
    }
    print(fn) // 100
</script>

函数中的自由变量，取决于函数定义的地方，跟执行的地方没关系

5大调用场景：

普通函数、
对象方法、
call apply bind
class
箭头函数 

1. 普通函数中的this

 function fn(){
    console.log(this);
  }
  fn();  //相当于下面的window.fn();
  window.fn();

window调用了fn，所以this指向window

         2.对象方法中出现this

 let pox={
    name:'小红',
    run:function(){
      console.log(this.name)//this
    }
  } 
  pox.run();// pox 小红

pox调用的run,所以run方法中的this指向pox

     3.call() /apply() /bind() 都可以改变this指向

 let obj={name:'小明'}

  let pox={
    name:'小红',
    run:function(){
      console.log(this.name)
    }
  } 
  // 对象方法中的this.指向方法的调用者。
  pox.run();// pox 小红
  pox.run.call(obj)// 小明
  pox.run.apply(obj);// 小明
  pox.run.bind(obj)();//小明

相同点：call() /apply() /bind() 都可以改变this指向,指向第一个参数
不同点：bind()需要手动执行

 

闭包的分类：

1 函数做为参数被传递

2 函数做为返回值被返出

闭包的运用场景

1 封装对象的私有属性和方法，用于隐藏数据，做一个简单的缓存工具

2 做为回调函数使用

3 利用闭包实现函数的防抖，节流

   防抖：例如一个倒计时，被连续点击时，关闭上一个倒计时，重新开启一个新的倒计时

   节流：例如一个倒计时，被连续点击时，规定时间内，无论点击多少次，只触发一次

优点：闭包因为长期驻扎在内存中。可以重复使用变量，不会造成变量污染

缺点：闭包会使函数中的变量都被保存在内存中，内存消耗很大，滥用闭包，会造成网页的性能问题，可能会导致内存泄露

解决方法：在退出函数之前，将不使用的变量全部删除

2.this指向

普通函数中调用，this指向window
对象方法中调用，this指向当前对象
call apply bind中调用， this指向被传入的对象
class中的方法中调用， this指向实例对象
箭头函数，this就是父级上下文中的this