Javascript bind/apply/call function, bindapply

Javascript bind/apply/call function, bindapply

javascriptThere are three built-in functions that are frequently used:bind/apply/call. Many advanced techniques are implemented based on these functions. All three functions are used to change the function'sExecution EnvironmentTo achieve the purpose of code reuse.
Let's talk about it first.bindFunctions, bind, and functions are usually used for two purposes:

1. Create a new function and specify the this pointer of the function.

name = 'global';var obj1 = {name: 'foo'};var showName = function() {    console.log(this.name);}showName(); //globalvar showObj = showName.bind(obj1);showObj(); // foo

2. The bind function reflects the thinking of partial functions, which can effectively reduce the use of anonymous functions. For example, there is a module that receives different user requests and distributes and processes them:

// Query: Request Parameter // config: configuration information of different requests function dispatcher (query, config) {var action = query. action; switch (action) {case 'action1 ':{//.... break ;}}}

The operations performed by the dispatcher function are similar, but different user requests require different config configurations. You can do the following:

function createDispatcher(config) {    return function(query) {        dispatcher(query, config);    };}

If multiple parameters are required, you can do the following:

Function createDispatcher (config, ext) {// use the slice function of the Array prototype object to copy the function parameter var args = Array. prototype. slice. call (arguments); return function (query) {var newArgs = args. push (query); dispatcher. apply (null, newArgs );};}

If bind is used, you can do this:

Function dispatcher (config, query) {//} // create the distribution function var dispatcher = dispatcher. bind (null, config1); var dispatch2 = dispatcher. bind (null, config2); var dispatch3 = dispatcher. bind (null, config3 );

Here we do not need to change the this pointer of the partial function returned by bind, so the first parameter of bind function is null. You only need to specify a fixed parameter. So we can get it done in one sentence.

Besides, the apply and call functions can be used to conveniently implement function borrow. Javascript, a prototype-based inherited language, provides many convenient built-in functions. For example, I want to write the preceding distribution function into a common module: abstract The distributed behavior and the User specifies the function behavior.createDispatcherOnly collect USER Parameters and call the specified action function:

function createDispatcher(doit, context) {    var args = Array.prototype.slice.call(arguments, 2);    return function() {        doit.apply(context, args.concat(Array.prototype.slice.call(arguments));    }}var obj1 = {name: 'obj1'};var obj2 = {name: 'obj2'};var showParams1 = function() {    console.log(this.name + 'got it: ' + arguments.join('+'));};var showParams2 = function() {    console.log(this.name + 'got it: ' + arguments.join('-'));};//obj1 got it: 1+2+3createDispatcher(showParams1, obj1)(1, 2, 3);//obj2 got it: 4-5-6createDispatcher(showParams2, obj2)(4, 5, 6);

The only difference between "apply" and "call" is that "apply" transmits parameters in the form of arrays, while "call" requires parameters to be placed behind the function. It can be considered that "apply" is a syntactic sugar constructed by the javascript language based on "call ~