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
bind
implementation
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