每日五题--new，对象的深浅拷贝，发布订阅，instanceof、防抖节流

1.new

1.1 概念与手写

• 首先构造函数的this指向是指向它所创建的实例的
• 其次对象的__proto__属性要指向构造函数的原型

function myNew(Fun,...args) {
// Fun是构造函数,args是它的参数数组
    let obj = {};    //先创建一个新对象
    obj.__proto__ = Fun.prototype;    //obj的__proto__属性要指向它的原型
    let res = Fun.apply(obj,args);    //让构造函数的this指向指向它的实例，并传入参数args
    
    // 这里是判断构造函数是否有返回对象实例，有的话就返回构造函数返回的那个对象
    if (res instanceof Object) {
        return res;
    } else {
        return obj;
    }
}

1.2 this是什么

• this的意思就是这个，当前，它是一个指针变量，动态的指向当前函数的运行环境
• 普通函数this指向调用它的对象，没有就默认window调用（严格模式下不允许）
• 构造函数的this指向它创建的实例
• 箭头函数是没有this和arguments这个概念的，如果说的话，那就是指向它的上上级，而且是确定了就不会改变了
• 可以通过call、apply、bind来改变this指向

2.对象的深浅拷贝

概念：浅拷贝是只拷贝最外层的值，所以原对象值的改变会影响到拷贝后的对象；而深拷贝则是拷贝对象最里层的值，所以原对象值的改变是不会影响到拷贝后的对象的；

手写深拷贝：

// 1.JSON方式
        let obj = {
            age:18,
            name:'zz',
            data: new Date()
        }
        // 后端返回的json一般是字符串类型的对象，所以stringify可以将js对象变成字符串类型的对象
        // parse可以将字符串类型的对象变成js对象，parse解析，stringify是相反，将js对象变成字符串类型的对象
        let newObj = JSON.parse(JSON.stringify(obj));
        let obj2 = obj;
        obj.age = 111;
        console.log(obj);
        console.log(obj2);
        console.log(newObj);

// 第二种方法太复杂了

3.发布订阅

发布订阅是一种常见的组件通信的模式，发布了一条消息，所有订阅了这条消息的函数都会被执行

const obj = {}; //id:数组，id为订阅消息的id值，数组为所有订阅该消息的函数
        function on(id,f) {
            // 这是订阅消息的函数，
            if(!obj[id]) obj[id] = [];
            obj[id].push(f);
        }
        function edit(id,msg) {
            // 这是发布消息的函数
            obj[id].forEach(f => {
                f(msg);
            })
        }

4.instanceof

object instanceof 构造函数，instanceof是判断对象的原型链上是否有构造函数的原型对象

function myInstanceof(obj,constructor) {
            let proto = obj.__proto__;
            while(proto) {
                if(proto === constructor.prototype) return true;
                proto = proto.__proto__;
            }
            return false;
        }

5.防抖节流

防抖：执行了防抖定时器，如果在这个时间范围内触发了第二次，就会清空之前的定时器，重新定时，只有这个时间范围不再触发这个操作，到点了才会去执行定时器里面的代码

function fangdou(fn, delay = 500) {
            let timer = null;
            return function (...args) {
                let context = this; //先保存this指向
                //当timer清空之后这个this指向就没有了
                if (timer) {
                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        fn.apply(context,args);
                    }, delay)
                }

            }
        }

节流：在一个时间范围内，如果多次触发这个事件，最后只会执行第一次

function jieliu(fn, delay = 500) {
            let timer = null;
            return function (...args) {
                if (!timer) {
                    // timer为空的时候再去执行,如果它有值了，那么得等上一个操作执行完了之后再执行
                    timer = setTimeout(() => {
                        fn.apply(this, args);
                        timer = null;
                    }, delay)
                }
            }
        }