JavaScript Advanced tips Sharing

  This article mainly introduces JavaScript advanced skills, the need for friends can refer to the following

The last time I sorted out the Ajax part, I finished the Advanced Skill section this week and sorted it out.   1, type detection   The use of Object.prototype.toString.call (obj) method. Because neither typeof nor instanceof can accurately determine the type of variable.   2, a safe constructor usually when we define a constructor, we use a similar   code as follows: function person (name) {this.name = name;}   But then if you're not going to var person = New Person ("Cnblogs"). Instead, the var person = person ("Cnblogs"). Then this will point elsewhere, causing pollution to the rest of the objects. The solution is to judge   this instanceof if not, the new person (x,x,x) when setting the This.property;   Code as follows: function person (name) {      if (this instanceof person) {    this.name = name; &nb Sp    }else{          return new person (name)      }   but note that The rest of the constructors attempt to implement inheritance through Person.call (this,x) this way. Note that the prototype of that function is pointed to person before instantiating it.   3, lazy load function when calling a function, there is often a situation where the function of the browser needs to be judged. For example, the code is as follows: function createsomething () {     if (supportH5) {         //do something      }else{         //do otherthing   &NBsp &NBSP}}   However, if a browser supports a feature, it must always be supported, so it is unnecessary to judge every time the code is executed, because it is enough to judge once. So you can rewrite the   code as follows: function createsomething () {     if (supportH5) {          CREA tesomething = function () {//rewrite createsomething function                //do something &N Bsp        }      }else{         //ditto     &NBSP} & nbsp In this way, the first call will be judged, and then rewrite the function, it will naturally not be judged.     4, function binding in JS, the most confusing should be this point to who the problem. In fact, in my study of JS so long time, found a conclusion in the function of this will point to the final call to the object of this function, in other words, which object called the function, this point to that object. Figuring this out, function binding is not a problem. The way to change this point in the function is call and apply, but both methods execute the function. If you do not want to perform a function, but instead pass the function as a parameter to a function, and you want to change this, then use the latest bind.     5, Timer Settimeou, setinterval or Ajax, although asynchronous, like multithreading, but JS is single-threaded. In fact, these methods do not add a thread. settimeout (fn,300) means that the FN is placed in the execution queue of JS after 300 milliseconds. If this is a queue with no transactions to perform (that is, the JS interpreter is idle), then it is executed immediately. Otherwise, this function will be executed after the transaction of the queue has been processed. Therefore, using settimeout or setinterval is not an accurate control time. And one thing to note is that using settimeout to simulate sEtinterval can accurately control the minimum execution time interval.     6, use timer fixed time to execute method. If a method is executed for a long time, which may cause the browser to not respond for a short period, you can use the timer to fix part of each period. This will not let JS has been busy (browser no response), have free time to handle the rest of the transaction. For example, there is a 1000-length array loop, then you can 100 of each execution, in the interval of time to let JS idle to do other operations.     7, function throttling. Function throttling is a good way to improve performance, in some cases can improve the efficiency of several times. For example, when doing a drag or some action that occurs in a onresize event. You have done it many times in every operation. For example: The   code is as follows: var i = 0; Window.onresize = function () {    console.log (i++);}     trying to stretch the browser, you'll see that the console instantly shows me more than 100. Change the wording, for example:   code as follows: var i = 0, j = 1; Window.onresize = function () {     if (j% 2 = 0) {         console.log (i++) &nbs P    }      j++;     Create a variable J that allows J to execute only when an even number is available, that is, half of the implementation. Like this, you can reduce the number of executions by 50%, but for users, there is no difference. The   also has a function throttling that is implemented using a timer. The core code is as follows:     code is as follows: Function throttle (method, context) {   cleartimeout (Method.tid);     Method.tid = settimeout (function () {         method.call (context);    },100); }     ThisThe execution environment (that is, the object to which this in the function is executed) is passed in, then the action queue is cleared and the action is executed. This form allows for better control of the frequency of the action. Let's say that a browser stretching action, so long as you stretch fast enough, each trigger time interval of 100ms, then will only perform the final results.     8, custom event essence is the Observer pattern. The basic pattern requires 3 functions, one function is the binding event, one function is the triggering event, the other is the removal of the binding. This pattern can greatly reduce the coupling of code.