Closure and this

Closure

1. As the return value, the function returned in the program is referenced by an external variable, so it will not be destroyed, thus forming a closure. What help gets is a function. When the function is executed, the function will find the execution context. a, which is a in function app

   function app() {
         
         
           let a = 10010;
           return function () {
         
         
               console.log(a);
           }
       }
   
       const help = app();
       let a = 10086;
       help();
   

2. Function as a parameter, when the function is passed as a parameter, the entire app is passed in. When the app is executed, it will find its own execution context, so a = 10086 is found. If there is no a variable in the app, it will go to the global Find in scope, not in printf

   function printf(fn) {
         
         
           let a = 10010
           fn()
       }
   
       let a = 10000
   
       function app() {
         
         
           let a = 10086
           console.log(a);
       }
   
       printf(app);
   

The point of this is determined according to the execution context, call, band, apply can change the point of this

​ The difference between call() and apply()

​ The difference is:

​ The call() method accepts parameters respectively.

​ apply() method accepts parameters in the form of an array

​ The band() method has the same parameters as call except that it returns a function.

​ For details, please refer to: https://www.runoob.com/w3cnote/js-call-apply-bind.html

function fn1() {
    
    
        // 这里的this是指window
        console.log(this);
    }

    // 这里通过call改变了this的指向，指向了{a:100}这个对象
    function fn2() {
    
    
        fn1.call({
    
    a:100});
    }

    // 这里通过bind改变了this的指向，不过与call不同的是，bind会返回一个新的对象，需要新的变量去接收
    let bind = fn1.bind({
    
    a:200})
    // 这里可以证明fn1是window对象点出来的，所以指向window没毛病
    console.log(window.fn1 === fn1)
    fn1()
    fn2()
    bind()

// 这里使用let关键字声明的对象并不在全局上
    let o = {
    
    
        user:"peter",
        fn:function(){
    
    
            console.log(this.user); //peter
        }
    }
    o.fn();

Handwritten bind method

Function.prototype.bind1 = function () {
    
    
        // 将参数解析为数组
        const args = Array.prototype.slice.call(arguments);
        // 获取this(去除数组第一项，数组剩余的就是传递的参数)
        const t = args.shift();
        // 谁调用，this就指向谁
        const self = this;
        // 返回一个函数
        return function () {
    
    
            // 执行原函数，并返回结果
            return self.apply(t, args);
        }
    }

Usage scenarios of closures (privatizing data)

function creatCache(){
    
    
        let data = {
    
    }
        return {
    
    
            set(key, val) {
    
    
                data[key] = val;
            },
            get(key) {
    
    
                return data[key];
            }
        }
    }

    let app = creatCache();
    app.set('a',100);
    console.log(app.get('a'));