JS's Advanced function

Scope-Safe constructors

When the constructor is called with new, the inside of the constructor the this object points to the newly created object instance. If you do not use new and call directly, the This object is mapped to the Window object. So it needs to be judged.

eg

function Person (name,age,job) {

if (this instanceof person) {

THIS.name = name;

This.age = age;

This.job = job;

}else{

return new person (name,age,job);

}

}

Lazy Load function

The branch that the lazy load function executes only happens once: the first time the function is called. During the first call, the function is overwritten as another function that is executed in the appropriate manner. That is, it is not necessary to execute the function every time after multiple layers of judgment, but to define the variable at the first execution. Subsequent execution is only necessary to execute the function defined by the variable.

function bindings

function bindings to create a function, you can invoke another function in a specific environment with the specified parameters while preserving the code execution environment for the other function. The code for binding a function to a function in the specified environment is as follows:

function bind (Fn,context) {//fn: Functions context: Execution Environment

return function () {

Return fn.apply (context,arguments);

}

}

function currying

function to curry a function that creates one or more parameters that have been set. The basic method of the function curry is the same as the function binding, and a closure is used to return a function. The difference between the two is that when a function is called, the returned function can pass in some parameters. The common code for the Curry function is as follows:

Function Curry (FN) {

var args = Array.prototype.slice.call (arguments,1);

return function () {

var Innerargs = Array.prototype.slice.call (arguments);

var Finalargs = Args.concat (Innerargs);

Return fn.apply (Null,finalargs);

}

}

The more complex bind () function is constructed by the function of curry.

function bind (Fn,context) {

var args = Array.prototype.slice.call (arguments,2);

return function () {

var Innerargs = Array.prototype.slice.call (arguments);

var Finalargs = Args.concat (Innerargs);

Return fn.apply (Context,finalargs);

}

}

Advanced Timers

JS is run in a single-threaded environment. Timers (SetTimeout () and SetInterval ()) refer to inserting code into a queue after a certain time and waiting for the process to execute immediately when it is idle. Its specified time interval is the time at which the code is inserted into the queue, not when the code is executed. With settimeout analog setinterval, you can avoid repetitive start timers.

Array chunking

The core idea is to use timers to separate loops. Avoiding code operations in a one-time execution loop causes the page script to run too long. The general functions are as follows:

function Chunk (array,process,context) {//array list, process functions to be processed, context execution contexts

Settimout (function () {

var item = Array.shift ();

Process.call (Context,item);

　　　　

if (Array.Length > 0) {

SetTimeout (arguments.callee,100)

}

},100)

}

The importance of array chunking is that it can separate the processing of multiple items on the execution queue, allowing other browser processing opportunities to run after each item is processed, which may avoid long-running script errors.

function throttling

The idea of a function throttle is that some code cannot be repeated continuously without interruption. The first time the function is called, a timer is created to run the code after the specified interval. When the function is called the second time, the previous timer is cleared and the other one is set. The code ideas are as follows:

Function Throttle (Method,context) {

Cleartimeout (Method.tid);

Method.tid = SetTimeout (function () {

Method.call (context);

},100)

}

Window.resize () is used in many scenarios, and function throttling is used to control how often the function is processed to ensure that the browser does not perform too much computation in a very short period of time. As long as the code is executed periodically, throttling should be used.

Summary from: JavaScript advanced programming

JS's Advanced function