What does the new operator do

  • Create a new object
  • Assigns the scope of the constructor to the new object
  • Code to execute the constructor (add attributes for the new object)
  • Return a new object

Js implements the new operator

function create(fn,... args) {				
    let obj = {};
    Object.setPrototypeOf(obj,fn.prototype);
    let result = fn.apply(obj,args);
    return result instanceof Object? result : obj;
}
function Con(name,age) {
    this.age = age;
    this.name = name;
}
Con.prototype.say = function() {
    console.log(this.name,this.age)
}
let obj = create(Con,'wang'.22);
console.log(obj)  // {age: 22, name: "wang"}
Copy the code

bindimplementation

function bind(fn,context) {
    return function() {
        fn.apply(context,[...arguments].slice())
    }
}
let obj = {
    say:function(age) {
        console.log(this.name,age)
    }
}
bind(obj.say,{name:'wang'}) (22);   // wang 22
Copy the code

Anti-shake and throttling

The purpose of both stabilization and throttling is to prevent frequent function calls. The difference is that the interval of each touch function is less than the threshold, the anti-shake function is performed only once, and the throttling is called at intervals.

If you realize

function debounce(fn, wait = 1000, immedite = true) {
    let timer,context,params;
    let run = () = > {
        timer = setTimeout(() = > {
            timer = null;
            if(! immedite) { fn.apply(context,params); context = params =null;
            }
        }, wait)
    };
    return function(. args) {
        if(! timer) { run();if(immedite) {
                fn.apply(this,args);
            } else {
                context = this; params = args; }}else {
            clearTimeout(timer); run(); }}}Copy the code

Throttling implementation

function throttle(fn,wait = 1000) {
    let timer,params,context;
    let run = () = > {
        timer = setTimeout(() = > {
            fn.apply(context,params)
            timer = null;
        },wait)
    }
    return function(. args) {
        if(! timer) { run(); params = args; context =this; }}}Copy the code

Event Bus

function Event() {
  this.events = new Map(a); } Event.prototype.addEvent =function (event, fn, isOnce = false) {
  let events = this.events.get(event) ? this.events.get(event) : this.events.set(event, new Map()).get(event);
  if(! isOnce) { events.set(fn, fn); }else {
    events.set(fn, (. args) = > {
      fn.apply(this, args);
      this.off(event, fn);
    });
  }
  this.events.set(event, events);
};

Event.prototype.emit = function (event, ... args) {
  let evnets = this.events.get(event);
  for (let fn of evnets.values()) {
    fn.apply(this, args); }}; Event.prototype.off =function (event, fn) {
  this.events.get(event).delete(fn);
};

Event.prototype.once = function (event, fn) {};

let event = new Event();
event.addEvent("click".function (args) {
  console.log(args);
});
event.addEvent(
  "click".function () {
    console.log("are you ok!");
  },
  true
);
event.emit("click", { name: "wang hai" });
event.emit("click", { name: "liu hai" });
/ / console
// { name: "wang hai" }
// are you ok!
// { name: "liu hai" }

Copy the code

What are Http and Https