Javascript advanced skills sharing_javascript skills

I sorted out the Ajax part last time. After reading the advanced skills part this week, let’s sort it out too.

1. Type detection
Use Object.prototype.toString.call(obj).
Because neither typeof nor instanceof can accurately determine the variable type.

2. Safe constructor
Usually when we define a constructor, we use something like

Copy code The code is as follows:

function Person(name){
　this.name = name;
}

However, after If not go to var person = new Person("cnblogs").
Instead, var person = Person("cnblogs"). Then this will point elsewhere, causing contamination of other objects.
The solution is to determine
this instanceof Person
when setting this.property. If not, then new Person(x,x,x);

Copy code The code is as follows:

function Person(name){
if(this instanceof Person){
this.name = name;
} else {
Return New Person (name);
}
}

x) When inheritance is implemented in this way.
It should be noted that the prototype of that function is pointed to Person before instantiation.

3. Lazy loading function
When calling a function, there is often a situation where the function needs to judge the browser function.
For example

Copy code The code is as follows:

function createSomething(){
if(supportH5){
                                                                                                                                                                                      Function must always be supported, so it is unnecessary to judge it every time the code is executed, because it is enough to judge it once.
So it can be rewritten as

Copy the code


The code is as follows:

function createSomething(){ if(supportH5){ createSomething = function(){ //Rewritten createSomething function                                                              }

}

In this way, a judgment will be made when it is called for the first time. If this function is rewritten later, it will naturally not be judged.


4. Function binding
In js, the most confusing thing is probably who this points to.
Actually, when I have been studying JS for so long, I have come to a conclusion
The this in the function will point to the object that ultimately calls the function. In other words, which object calls this function, this will point to that object.
After figuring this out, function binding is no longer a problem.
The methods to change this point in a function are call and apply, but both methods will execute the function.
If you don’t want to execute the function, but pass the function as a parameter to a function, and want to change this, then use the latest bind.


5. Timer
Although setTimeou, setInterval or Ajax are asynchronous, like multi-threading, js is single-threaded.
In fact, these methods do not add a thread.
setTimeout(fn,300) means to put fn into the js execution queue after 300 milliseconds.
If there is no transaction to be executed in the queue (that is, the js interpreter is idle), it will be executed immediately. Otherwise, it will wait until the queue's transactions are processed before executing this function.
So, using setTimeout or setInterval is not accurate time control.
Another thing to note is that using setTimeout to simulate setInterval can accurately control the minimum execution time interval.


6. Use a timer to fix the time execution method.
If a method takes a long time to execute and may cause the browser to not respond for a short period of time, you can use a timer to execute part of the method at a fixed time. This prevents js from being busy all the time (the browser becomes unresponsive) and gives you free time to handle other tasks. For example, if there is an array loop with a length of 1000, it can be executed 100 times each time, leaving js free to do other operations at intervals.


7. Function throttling.
Function throttling is a good way to improve performance. In some cases, the efficiency can be increased several times.
For example, when doing dragging or some operations that occur in the onresize event.
Every time you perform an operation, you have actually performed it many times. For example:

Copy code The code is as follows:

var i = 0;
window. onresize = function(){
console.log(i );
}

If you try to stretch the browser, you will find that the i in the console instantly exceeds 100.
Change the writing, for example:

Copy the code The code is as follows:

var i = 0, j = 1;
window.onresize = function(){
if(j % ​​2 == 0){
console.log(i );
}
j ;
}

Create a variable j so that it will be executed every time j is an even number, which means half the number of executions will be reduced.
Processing like this can reduce the number of executions by 50%, but the user will not feel the difference.

There is also a function throttling implemented using a timer.
The core code is as follows:

Copy code The code is as follows:

function throttle(method, context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}

Here the execution function and the execution environment of the function are passed in (that is, the object pointed to by this in the execution function), and then the action queue is cleared first, and then the action is executed.
This form allows for better control over the action frequency.
Assuming it is a browser stretching action, as long as you stretch fast enough and the time interval between each trigger is within 100ms, then only the last result will be executed.


8. Custom events
are essentially observer mode. The basic mode requires 3 functions,
one function is to bind the event, one function is to trigger the event, and one is to remove the binding.
This mode can greatly reduce code coupling.