面试深入

阅读数: 次 2021-09-12

JS深入知识点

一些重要知识点

1.深浅拷贝

浅拷贝:重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。

深拷贝:从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响。

浅拷贝与赋值区别

赋值都会相互影响浅拷贝只对引用类型相互影响基本数据类型不会影响

当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。

也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

//浅拷贝的实现方式
        /*
        - 0bject.assign( )
        - lodash里面的_.clone- ...展开运算符
        - Array.prototype.concat- Array.prototype.slice
        -直接赋值
        */
       /* 深拷贝的实现方式
       - slice()和concat()这两个方法，仅适用于对不包含引用对象的一维数组的深拷贝
       - JSON.parse( JSON.stringify())
       - 递归的操作
       - cloneDeep
       - Jquery.extend()
       */

//手撕深拷贝&&深度比较

//1.0版
function deepClone(obj = {}) {
    if(typeof obj !== 'object' && obj == null) {
        return obj;
    }
    let res = res instanceof Array ? [] : {};
    for(let key in obj) {
        if(obj.hasOwnProperty(key)) {
            res[key] = deepClone(obj[key]);
        }
    }
    return res;
}

//深拷贝2.0版 使用weakMap解决的 循环赋值问题避免死循环: WeakMap 键名 -> 对象 弱引用 外部没有引用关系了 自动回收键名(键名回收了 键值也就一起了)
function deepClone(origin, hashMap = new WeakMap()) {
    if(typeof origin !== 'object' || orinin != null) return origin;
    if(origin instanceof Date) return new Date(origin);
    if(origin instanceof RegExp) return RegExp(origin);
    
    const hashKey = hashMap.get(origin);
    if(hashMap) return hashKey;
    //避免判断类型(对象||数组)的巧用原始对象的构造方法来进行构造
    let tar = new origin.constructor();
    hashMap.set(origin, tar);
    for(let key in origin) {
        if(origin.hasOwnProperty(key)) {
            tar[key] = deepClone(origin[key], hashMap);
        }
    }
    return tar;
}



function isObj(obj) {
            if(typeof obj === 'object' && obj != null) return true;
            return false
        }
        
  
function isEqual(obj1, obj2) {
            //非对象或数组 
            if(!isObj(obj1)||!isObj(obj2)) {
                //值类型 (注意 参与equal的一般不会是是函数--不会存值)
                return obj1 === obj2
            }
            //如果输入一样的对象参数
            if(obj1 === obj2) return true

            //两个都是对象或数组, 而且不相等
            //先取出 obj1和obj2的keys 比较个数
            const objKey1 = Object.keys(obj1)
            const objKey2 = Object.keys(obj2)

            if(objKey1.length !== objKey2.length) return false

            //以obj1为基准 逐一取出判断 forin 既可以遍历对象也可以遍历数组
            for(let key in obj1) {//对象没有iterator接口只能用for-in
                //递归开始
                let res = isEqual(obj1[key], obj2[key])
                if(!res) return false
            }
            //全相等
            return true
        }
        
         /* ************************************************************************************************************************************************* */
        
        //手撕bind
        /* 
        bind函数柯里化的理解通过获取当前外部函数的实参类数组并去除绑定的对象保存起来
        最后return的方法再一次获取当前函数的实参类数组，最终用一个数组进行合并
        至于new优先于apply的解决 new.target属性用来检测构造方法是否通过new运算符来被调用的
        最后提供一个最终便于理解的最终版本+保留函数原型(当构造函数有prototype属性的时候)
        */

        /*bind一次失效的原因
        每次bind一个对象，多会形成一个闭包，然后在之前的那个闭包上再形成闭包(也就是在闭包的基础上返回闭包)；
        每次bind一个对象target，形成一次闭包，多会往一个闭包队列里面添加这个需要bind的对象target，因此当我们打印target的时候就会打印出多个target的值
        把这个再闭包的基础上添加闭包的操作看做是一个入栈操作
        首先执行C1() 出栈（也就是最后一个绑定返回的f执行），然后执行到下面这条语句依次往前面出栈
        return self.apply((target || window), args.concat(_args));   //这个操作我理解为出栈  
        会找这个 target 和 self   按照入栈的操作，先bind的target 后出来 所以第一个bind的target是最后出来的 ，覆盖前面的target
        */

        Function.prototype._bind = function (thisObj) {
            let self = this;//self 调用者this
            if (typeof self != 'function' || Object.prototype.toString.call(self) !== '[object Function]') {//判断是否为函数调用
                throw new TypeError(self + 'must be a function');
            }

            const arg = [...arguments].slice(1);
            var bound = function () {//方便保留原型的写法
                var finalArg = [...arg, ...arguments];
                //new.target属性用来检测是否被new调用
                if (new.target !== undefined) {
                    var res = self.apply(this, finalArg);//表明是用new来调用的 明确new的几个步骤
                    if (res instanceof Object) return res;//判断有没有手动返回新的对象
                    return this;//没有则隐式返回
                }
                else {
                    return self.apply(thisObj, finalArg);
                }
            };
            if (self.prototype) {
                bound.prototype = Object.create(self.prototype);//使用creat()为了防止bound.prototype的修改而导致self.prototype被修改：错误写法 bound.prototype = self.prototype
                bound.prototype.constructor = self;
            }
            return bound;
        }
        
         /* ************************************************************************************************************************************************* */
        
        //手撕call 返回执行后的结果
        /*
        将函数设为对象的属性
        执⾏该函数
        删除该函数
        */
        Function.prototype.call1 = function (context) {
            let context = context || window; //// this 参数可以传 null，当为 null 的时候，视为指向 window  使用逻辑判断 ||前为false 看后
            context.fn = this;//把调用call()方法的那个函数保存在目标对象中
            let args = [];//apply的话要先处理一下
            for (let i = 1; i < arguments.length; i++) {//因为首项是目标对象所以从一开始-------参数转化为真正的数组
                args.push(arguments[i]);
            }
            let res = context.fn(...args)

            delete context.fn;
            return res;// 函数是可以有返回值的！
        }

        Function.prototype._call = function (obj) {
            // 参数是否存在，如果存在则转为Object类型，否则直接取window对象为默认对象
            var _obj = obj ? obj : window
            // 把调用_call()方法的那个函数保存在目标对象中
            _obj.fn = this
            // 保存参数的数组
            // var argArr = [...arguments].slice(1)
            var argArr = Array.from(arguments).slice(1)
            // 遍历参数,因为首项是目标obj，所以要从次项开始遍历才是参数
            /* for (var i = 1; i < arguments.length; i++) {
                argArr.push('arguments['+ i + ']')
              } */
            // 执行obj的fn方法，把arg拆分
            // eval("_obj.fn(" + argArr + ")")
            _obj.fn(...argArr)
            // 执行完之后删除这个方法
            delete _obj.fn
        }

        /* ************************************************************************************************************************************************* */

        Function.prototype._apply = function (obj, argArr) {
            // 如果obj不存在则默认window对象
            var _obj = obj ? obj : window
            // 给_obj添加fn方法
            _obj.fn = this
            // 获取第二个数组参数
            var arg = []
            // 当这个参数数组不存在或者为空时，直接执行函数，否则把数组拆分后传递给函数并执行
            if (!argArr || argArr.length == 0) {
                _obj.fn()
            } else {
                /* for (var i = 0; i < argArr.length; i++) {
                    arg.push('argArr[' + i + ']')
                }
                // 执行obj的fn方法，把arg拆分
                eval("_obj.fn(" + arg + ")") 
                */
                _obj.fn(...argArr)
            }
            // 移除这个方法
            delete _obj.fn
        }

        Function.prototype.apply1 = function (obj, argA) {
            let _obj = obj ? obj : window //_obj = obj || window
            _obj.fn = this
            if (!argA || argA.length === 1) _obj.fn()
            else _obj.fn(...argArr)
            delete _obj.fn
        }

        /* ************************************************************************************************************************************************* */

        //js模拟实现new 返回实例化对象
        /*
        new 的实现步骤：
            ⾸先新建⼀个对象
            然后将对象的原型指向构造函数的原型
            然后构造函数.apply(对象)
            返回这个对象
        
        构造函数始终会返回一个对象：如果构造函数没有return语句时，则默认返回原型为X.prototype的、设置了相关属性的空对象。
        情况1：你没写return 或者你return a 一个基本类型 这两种情况（没写或者return基本类型）它都会默认返回一个空对象
        情况2：你写了return {a:xxx} 他就会返回你定义的这个对象
        */

        function objectFactory() {
            var obj = new Object(),
                Construtor = [].shift.call(arguments);
            obj._proto = Construtor.prototype;
            var res = Construtor.apply(obj, arguments);
            return typeof res === 'object' ? res : obj;
        }


        /* ************************************************************************************************************************************************* */

        //手写instanceof方法
        function _instanceof(left, right) {
            // 获得类型的原型
            let prototype = right.prototype
            // 获得对象的原型
            left = left.__proto__
            // 判断对象的类型是否等于类型的原型
            while (true) {
                if (left === null)
                    return false
                if (prototype === left)
                    return true
                left = left.__proto__
            }
        }

        /* ************************************************************************************************************************************************* */

        //Object.create()的模拟实现
        function createObj(protoObj) {
            function F() { }
            F.prototype = protoObj;
            return new F();
        }


        /* ************************************************************************************************************************************************* */
        
		//防抖
		//对于在事件被触发n秒后再执行的回调 ->延迟执行  如果在这n秒内再触发事件 重新开始计时不执行事件处理函数
        //一般达到的效果是第一次不延迟后续再延迟是否首次延迟执行
        //应用 ajax请求数据 提交数据 输入验证(一般首次延迟
        
        function debounce(fn, delay = 500, triggleNow) {
            let t = null;//为了首次不延迟的情况
            if(t) {
             clearTimeout(t);//虽清除但仍然保留定时器ID   
            }
            
            var debounced = function() {
                var _self = this;
                var args = arguments;
                if(triggleNow) {//是否首次延迟
                    var exec = !t;//time时间内t都是有值的 是定时器的id
                    t = setTimeOut(function() {
                        t = null;
                    }, delay);//time时间后置为null继续首次立即执行
                    if(exec) fn.apply(_self, args);
                }
                else {//普通延迟防抖
                	setTimeOut(function () {
                        fn.apply(_self, args);
                	}, delay);    
                }
            }
            debounced.remove = function() {
                clearTimeout(t);
                t = null;
            }
            return debounced; 
        }

        /* ************************************************************************************************************************************************* */

        //节流
        function throttle(fn, delay = 100) {
            let timer = null

            return function () {
                context = this;
                arg = arguments;
                if (!timer) {
                    timer = setTimeout(() => {
                        fn.apply(context, args)
                        timer = null
                    }, delay)
                }

            }
        }

        /* ************************************************************************************************************************************************* */

        //柯里化有关
        /*
        柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，
        并且返回接受余下的参数且返回结果的新函数的技术。

        柯里化突出一种重要思想：降低适用范围，提高适用性
        柯里化的三个作用和特点：参数复用、提前返回、延迟执行
        柯里化是闭包的一个典型应用，利用闭包形成了一个保存在内存中的作用域，
        把接收到的部分参数保存在这个作用域中，等待后续使用。并且返回一个新函数接收剩余参数
        */
        /*
        实现⼀个add⽅法，使计算结果能够满⾜如下预期：
        add(1)(2)(3) = 6
        add(1, 2, 3)(4) = 10
        add(1)(2)(3)(4)(5) = 15
        当我们返回函数的时候，会调⽤函数的toString来完成隐式转换，这样输出的就不是函数的字
        符串形式⽽是我们定义的toString返回的值。这样就既可以保持返回⼀个函数，⼜能够得到⼀
        个特定的值
        
        封装通用柯里化工具函数
        */
        
        const currying = function (fn, ...args) {
            // fn需要的参数个数
            const len = fn.length
            // 返回一个函数接收剩余参数
            return function (...params) {
                // 拼接已经接收和新接收的参数列表
                let _args = [...args, ...params]
                // 如果已经接收的参数个数还不够，继续返回一个新函数接收剩余参数
                if (_args.length < len) {
                    return currying.call(this, fn, ..._args)
                }
                // 参数全部接收完调用原函数
                return fn.apply(this, _args)
            }
        }
        
        function add() {
            var args = [].slice.call(arguments);
            var fn = function () {
                var newA = args.concat([].slice.call(arguments))
                return add.apply(null, newA);
            }
            fn.toString = function () {
                return args.reduce((a, b) => {
                    return a + b;
                })
            }
            return fn;
        }

        /* ************************************************************************************************************************************************* */
        
        //利用事件委托,实现点击li输出li在列表的序号
        var ulEl = document.getElementsByTagName('ul')[0];
        var li = document.getElementsByTagName('li');
        ulEl.addEventListener('click', function (e) {
            var target = e.target;
            for (let key in li) {
                if (target === li[key]) {
                    console.log(key);
                }
            }
        }, false)

        /* ************************************************************************************************************************************************* */

        //手写一个map函数
        /*
        map函数接收两个参数
        1 迭代器函数 ，该函数有三个参数
        数组项的值
        数组项下标
        数组对象本身
        2 迭代器函数的this指向
        （注：当传了该值，迭代器函数不能为箭头函数了。原因是箭头函数没有this隐式指向。箭头函数在定义时候就已经绑定了上层上下文中非箭头函数this）
        */
        Array.prototype.map1 = function (fn, toThis) {
            if (typeof fn !== 'function') {
                throw new Error(`${fn} is not a function`)
            }
            if (!Array.isArray(this)) {
                return 'Type Error';
            }
            let arr = this;
            const res = [];
            const bindThis = toThis || Object.create(null);
            for (let i = 0; i < arr.length; i++) {
                const item = fn.call(bindThis, arr[i], i, arr);
                res.push(item);
            }
            return res;
        }

        /* ************************************************************************************************************************************************* */


        //手写flatern考虑多层级 array.concat() 数组扁平
        //es5
        function flatern(arr) {
            const isDeep = arr.some(item => item instanceof Array)
            if (!isDeep) return arr;
            const res = Array.prototype.concat.apply([], arr)
            return flatern(res)//递归
        }
        //es6
        const flatern = (arr) => {
            return arr.reduce((pre, current) => {
                return pre.concat(Array.isArray(current) ? flatern(current) : current);
            }, [])
        }

        const flatern = (arr) => {
            //let res = []; ES5写法
            if (!Array.isArray(arr)) return arr;
            return arr.reduce((pre, cur) => {
                return pre.concat(Array.isArray(cur) ? flatern(cur) : cur);
            }, [])
        }


        /* ************************************************************************************************************************************************* */
        //forEach  循环
        Array.prototype.myForEach = function (fn) {
            var _arr = this;
            var _arg2 = arguments[1] || window;
            var _len = _arr.length;
            for (let i = 0; i < _arrLen; i++) {
                fn.apply(_arg2, [_arr[i], i, _arr]);//(item index arr)
            }
        }

        //map 映射
        Array.prototype.myMap = function (fn) {
            var _arr = this;
            var _arg2 = arguments[1] || window;
            var _len = _arr.length;
            var _newArr = [];
            var _item;
            var _res;

            for (let i = 0; i < _len; i++) {
                _item = deepClone(_arr[i]);
                _res = fn.apply(_arg2, [_item, i, _arr]);
                _res && newArr.push(_item);
            }
            return _newArr;
        }

        //filter
        Array.prototype.myFilter = function (fn) {
            var _arr = this;
            var _len = _arr.length;
            var arg2 = arguments[1] || window;
            var _newArr = [];
            var _item;
            for (var i = 0; i < _len; i++) {
                _item = deepClone(_arr[i]);
                fn.apply(_arg2, [_item, i, _arr]) ? _newArr.push(_item) : '';
            }
            return _newArr;
        }

        //every 一个不满足就返回false;
        Array.prototype.myEvery = function (fn) {
            var _arr = this;
            var _len = _arr.length;
            var arg2 = arguments[1] || window;
            var _res = true;
            for (let i = 0; i < _len; i++) {
                if (!fn.apply(arg2, [_arr[i], i, _arr])) {
                    _res = false;
                    break;
                }
            }
            return _res;
        }

        //some 一个满足就返回true
        Array.prototype.mySome = function (fn) {
            let _arr = this;
            let _len = _arr.length;
            let arg2 = arguments[1] || window;
            var _res = false;
            for (let i = 0; i < _len; i++) {
                if (fn.apply(arg2, [_arr[i], i, _arr])) {
                    _res = true;
                } break;
            }
            return _res;
        }

        //加强版reduce
        Array.prototype.myReduce = function (fn, initialValue) {
            var _arr = this;
            var _len = _arr.length;
            var _arg3 = arguments[2];//原有reduce第三个参数无绑定obj的作用
            var _item;

            for (let i = 0; i < _len; i++) {
                _item = deepClone(_arr[i]);
                initialValue = fn.apply(_arg3, [initialValue, _item, i, _arr]);
            }

            return initialValue;
        }
        //加强reduceRight
        Array.prototype.myReduceRight = function (fn, initialValue) {
            var _arr = this;
            var _len = _arr.length;
            var _arg3 = arguments[2];//原有reduce第三个参数无改变第一个回调函数this指向的作用
            var _item;

            for (let i = _len; i >= 0; i--) {
                _item = deepClone(_arr[i]);
                initialValue = fn.apply(_arg3, [initialValue, _item, i, _arr]);
            }

            return initialValue;
        }

    /* ************************************************************************************************************************************************* */

    //手撕Promise.all
    MyPromise.all = function(pList) {
        var resArr = [];
        var errValue = undefined;
        var isRegisted = false;

        return new MyPromise(function(resolve, reject) {
           for(var i = 0;i<pList.length;i++) {
            (function(i) {
                pList[i].then(function(res){
                    resArr[i] = res;
                    var f = pList.every(item => {
                        return item.promiseState == 'fulfilled';
                    })
                    if(f) resolve(resArr);
                }).catch(function(err) {
                    isRegisted = true;
                    errValue = err;
                    reject(err);
                })
            })(i)

            if(isRegisted) break;
        } 
        })
    }

    //手撕race()
    MyPromise.race = function(pList) {
        var end = false;
        return new MyPromise(function(resolve, reject) {
            for(var i = 0;i<pList.length;i++) {
                (function(i){
                    pList[i].then(function(res) {
                        if(!end) {
                            end = true;
                            resolve(res);
                        }
                    }).catch(function(err) {
                        if(!end) {
                            end = true;
                            reject(err);
                        }
                    })
                })(i);
            }
        })
    }
    
    /* ************************************************************************************************************************************************* */
    //树形结构化(通过某些字段化 扁平->嵌套)  ---应用:1.后端路由数据处理先转换为"树"的结构  2.数据渲染为DOM节点与容器之间进行的操作
        /**
         * 顶级与子级分开 再来递归处理(深拷贝)
         *  parents = data.filter(p => p.pid === 0)
         *  children = data.filter(c => c.pid !== 0)
         * 这里通过一个字段pid的简单例子来说明
         
         //扁平化数据
         const data = [
            {
                id: 2,
                pid: 0,
                path: '/course/',
                name: 'Course',
                title: '课程管理'
            },
            {
                id: 3,
                path: '/operate/',
                name: 'CourseOperate',
                pid: 2,
                title: '课程操作'
            },
            ......
        ]
        
        //递归版
        function formatDataTree(data) {
            let parents = data.filter(p => p.pid === 0), //顶级
            children = data.filter(c => c.pid !== 0); //子级数据

            dataToTree(parents, children);

            return parents;//返回顶级

            function dataToTree(parents, children) {
                parents.map(p => {
                    children.map((c, i) => {//(val, idx)
                        if(c.pid === p.id) {
                            let _children = JSON.parse(JSON.stringify(children));//json深拷贝
                            _children.splice(i, 1);//改变原数组 真正作用到下一个元素上
                            dataToTree([c], _children);//引用值需要进行深拷贝
                            //无以上三行代码 表示处理的第一层和第二层
                            if(p.children) {
                                p.children.push(c);
                            } else {
                                p.children = [c];
                            }
                        }
                    });
                })
            }
        }

        //非递归版本 扁平化的处理方式  
        function formatDataTree(data) {
            let _data = JSON.parse(JSON.stringfy(data));

            return _data.filter(p => {
                const _arr = _data.filter(c => c.id === p.id);
                _arr.length && (p.children = _arr);
                return p.pid == 0;//返回顶级
            })
        }
    
/****************************************************************************************************************************************/
   //场景应用

        //1.循环打印红黄绿
        /*
        下面来看一道比较典型的问题，通过这个问题来对比几种异步编程方法：红灯 3s 亮一次，绿灯 1s 亮一次，黄灯 2s 亮一次；如何让三个灯不断交替重复亮灯？
        */
        function red() {
            console.log('red');
        }
        function green() {
            console.log('green');
        }
        function yellow() {
            console.log('yellow');
        }
        
       //1.用 callback 实现
        // const task = (timer, light, callback) => {
        //     setTimeout(() => {
        //         if (light === 'red') {
        //             red()
        //         }
        //         else if (light === 'green') {
        //             green()
        //         }
        //         else if (light === 'yellow') {
        //             yellow()
        //         }
        //         callback()
        //     }, timer)
        // }
        // const step = () => {
        //     task(3000, 'red', () => {
        //         task(2000, 'green', () => {
        //             task(1000, 'yellow', step)
        //         })
        //     })
        // }
        // step()

       //2.用 promise 实现
        // const task = (timer, light) =>
        //     new Promise((resolve, reject) => {
        //         setTimeout(() => {
        //             if(light === 'red') red();
        //             else if(light === 'green') green();
        //             else if(light=== 'yellow') yellow();
        //             resolve();
        //         }, timer)
        //     })
        // const step = () => {
        //     task(3000, 'red')
        //     .then(() => task(2000, 'green'))
        //     .then(() => task(2100, 'yellow'))
        //     .then(step)
        // }
        // step()

       //3.用 async/await 实现
        const taskRunner = async () => {
            await task(3000, 'red')
            await task(2000, 'green')
            await task(2100, 'yellow')
            taskRunner()
        }
        taskRunner()
        
        
        
        /*使用 setTimeout 实现 setInterval
        setInterval 的作用是每隔一段指定时间执行一个函数，但是这个执行不是真的到了时间立即执行，
        它真正的作用是每隔一段时间将事件加入事件队列中去，只有当当前的执行栈为空的时候，才能去从事件队列中取出事件执行。
        所以可能会出现这样的情况，就是当前执行栈执行的时间很长，导致事件队列里边积累多个定时器加入的事件，当执行栈结束的时候，
        这些事件会依次执行，因此就不能到间隔一段时间执行的效果。
        针对 setInterval 的这个缺点，我们可以使用 setTimeout 递归调用来模拟 setInterval，这样我们就确保了只有一个事件结束了，
        我们才会触发下一个定时器事件，这样解决了 setInterval 的问题。
        实现思路是使用递归函数，不断地去执行 setTimeout 从而达到 setInterval 的效果
        */

        function mySetInterval(fn, timeout) {
            // 控制器，控制定时器是否继续执行
            var timer = {
                flag: true
            };
            // 设置递归函数，模拟定时器执行。
            function interval() {
                if (timer.flag) {
                    fn();
                    setTimeout(interval, timeout);
                }
            }
            // 启动定时器
            setTimeout(interval, timeout);
            // 返回控制器
            return timer;
        }

2.预编译

预编译作用域的创建阶段

js的变量对象函数代码执行前期AO对象(作用域) 供JS引擎自己去访问在全局代码执行的前期会创建GO对象

作用域链：AO与GO的集合

步骤:

1 创建AO对象

2 找形参和变量的声明(作为AO对象的属性名,值是undefined)

3 实参和形参相统一

4 找函数声明重名则会覆盖变量的声明

function fn(a, c) {
            console.log(a);//function a() { }
            var a = 123;
            console.log(a);//123
            console.log(c);//function c() { }
            function a() { }
            if (false) {
                var d = 678;
            }
            console.log(d);//undefine
            console.log(b);//undefine
            var b = function () { }//函数表达式
            console.log(b);//function () { }
            function c() { }
            console.log(c);//function c() { }
        }
        fn(1, 2);
        /*
        AO:{
            a:undefine 1 function a() { }
            c:undefine 2 function c() { }
            d:undefine
            b:undefine
        }
        */

3.箭头函数中的this指向

//箭头函数中的this是在定义函数的时侯绑定,而不是在执行函数的时候绑定
      //箭头函数,this指向的固定化，并不是因为箭头函数内部有绑定this的机制,
      //实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this.
      //正是因为它没有this,所以也就不能用作构造函数、
      //所谓的定义时候绑定，就是this是继承自父执行上下文中的this，
      
      var x = 11;
      var obj = {
          x: 22,
          say: () =>{
              console.log(this.x);
          }
      }
      obj.say();//11
      //比如这里的箭头函数中的this.x，箭头函数本身与say平级以key:value的形式，
      //也就是箭头函数本身所在的对象为obj，而obj的父执行上下文就是window，因此这里的this.x实际上表示的是window.x，因此输出的是11。
      var obj = {
          birth: 2001,
          getAge: function () {
              var b = this.birth;//2001
              var fn = () => console.log(new Date().getFullYear() - this.birth);  //this指向obj对象 2021-2001
              return fn();
          }
      };
      obj.getAge();//20 例子中箭头函数本身是在getAge方法中定义的，因此,getAge方法的父执行上下文是obj，因此这里的this指向则为obj对象

4.this指向

//this既不指向函数本身也不指向函数的词法作用域。this实际上是在函数被调用时发生的绑定，他指向什么完全取决于函数在哪里被调用  四种规则优先级:new绑定(绑定到新创建的对象)>显示绑定>隐式绑定(上下文对象隐式丢失(默认绑定))>默认绑定(如果实在严格模式下(并不是调用位置而是函数体是否处于严格模式)，就绑定到undefined,否则绑定到全局对象)
        //JS中this的两种使用情况
        //1. 在函数中直接使用 函数及对象有对象就有方法
        /* function get(content) {
            console.log(content);
        }

        get("坚持")//简写
        get.call(window, '坚持') */

        //2. 函数作为对象的方法被调用(谁调用我 我就指向谁)
        /* var person = {
            name: 'codespi',
            run: function (time) {
                console.log(`${this.name} 在跑步 最多${time}min就不行了 `);//模版字符串
            }
        }

        person.run(120)
        person.run.call(person, 120) call是包装在apply上面的一颗语法糖(函数调用时使用 当第一个参数为null时this会指向默认的宿主对象在浏览器中是window*/
        //2转1会引起this的丢失

        //3.构造器调用 当用new运算符调用函数时，该函数总会返回一个对象，通常构造器的this就指向返回的这个对象(如果构造器显式的返回一个object类型的对象，那么会返回这个对象而不是this)

        //阿里面试题
        var name = 222
        var a = {
            name: 111,
            say: function () {
                console.log(this.name);
            }
        }

        var fun = a.say
        fun()// 1.函数中直接使用 相当于fun.call(window)call里面的就是this指向 //222
        a.say()//2. a,say.call(a)//111

        var b = {
            name: 333,
            say: function (fn) {
                fn()//fn.call(window)//222
            }
        }
        b.say(a.say)//不管是如何调用的只关心是哪一种1 222
        b.say = a.say
        b.say()//b.say.call(b) //333

        //有些调用可能在无意中使用默认的绑定规则。如果想更安全地忽略this绑定你可以使用一个MDZ对象，比如一个符号 = Object.create(null) 以保护全局对象
        //箭头函数会继承外层函数调用的this绑定(这其实和之前地self = this机制一样)

5.闭包

//闭包的更多作用 1.封装变量  2.延续局部变量的寿命
        //要深入理解闭包首先要深入理解作用域链
        /*1.理解作用域链实例 */
        /* var global
        function a() {
            function b() {//当a执行b才能定义 这里b定义的作用域同a执行的情况
                var bb = 123
                aa = 0
            }
            var aa = 123
            b()//b执行首先放自己的AO对象 然后是a的AO 最后是GO
        }
        a()//a执行的时候作用域链最顶端首位放的一定是自己的函数AO对象 第二位放的才是全局作用域的GO
        //执行完毕会销毁--断链 */
        /* 2.理解闭包的实例 */
        /* function a() {
            var aa = 123
            function b() {
                var bb = 234
                console.log(aa)
            }
            return b
        }
        var res = a()//b函数被保存到了外部
        res()//a的执行 === b的定义  执行会销毁但定义不会 */

        //闭包的单例模式 实现登录

        var createLogin = function (a, b, c) {
            console.log(a, b, c);
            var div = document.createElement("div")
            div.innerHTML = "登录成功"
            div.style.display = 'none'
            document.body.appendChild(div)
            return div
        }

        var getSingle = function (fn) {
            var res
            return function () {
                return res || (res = fn.apply(this, arguments))
            }
        }
        var create = getSingle(createLogin)
        document.getElementById("loginBtn").onclick = function () {
            var login = create(1, 2, 3)
            login.style.display = "block"
        }