four articles javascript function, a function of the properties and methods --apply (), call () and bind () method distinction

> The contents of this article:
> attribute functions: length, prototypy, Caller;
> function method: apply (), call () , bind ()

Because the objects are in javascript function, the function has properties and methods. Each function contains three attributes.

length

function fn (n1, n2) {
    return n1 + n2
}
console.log(fn.length) // 2

 

** length property represents the number of functions desired function receives. **

prototypy
Each function has a prototype property, it is an object, prototype is a very important property, where only a simple list, will be detailed later.

Caller
ECMAScript5 also standardized attribute a function object, that caller, it points to is called the current function of a reference, if the current function is invoked in the global scope, it is null.

a function () { 
    B () 
} 
function B () { 
    the console.log (b.caller) // a printing function source code 
} 
a ()

Note that when the function performed in strict mode will cause an error!

Each function contains two methods: apply (), and call (), in addition ECMAScript5 also defines a method bind (). To introduce the following three methods.

apply (), call (), the bind ()
. 1, apply (), and call ()
acts first apply (), and call () function is performed by changing the context, i.e. this value. Each function has two methods that first argument is that you want to specify the context, and the second parameter is the parameter passed.

var obj = {
    a: 1
}
function add (b, c) {
    return this.a + b + c
}
console.log(add.apply(obj, [1, 2])) // 4
console.log(add.call(obj, 3, 4)) // 8

Difference between the two methods apply (), and call () in that the only parameter passing mode, apply to pass parameters in the form of an array, call eleven pass is required.

2, with the call and apply different, bind () is not performed immediately
*** bind () when in use, call the bind () function method does not happen immediately, but returns a copy of the changed context of the function (ie, re-create a function, then this points to the first argument to the bind function, and finally the newly created function returns) ***

bind () method is how to achieve it? To better understand the bind method to simulate what we achieved bind method:

if (! function () {} . bind) {// If not bind method is added to bind custom method Function prototype object, because some browsers (e.g. ie6 ~ ie8) does not support bind, if so want to use the bind multiple browsers can do this process compatible 
    Function.prototype.bind = function (CNT) { 
        var Fn = // Get the this method is a function call bind 
        var args = Array.prototype.slice.call (arguments) // this is the object within the bind method arguments into an array, the array can be used to process arguments return function () {// return a function, and this function is an internal function calling bind (), and performing the result is returned
                 return fn.apply (CNT, args.slice (. 1)) 
            } 
       } 
}    
            

Simulated bind () implementation principle can clearly see the bind method, in order to call a good understanding of the following assumptions: fn.bind (obj, A, B):
inside the bind function is operated, firstly through this to get the method of function calling bind Fn , using arguments passed bind the object handling method parameters , parameters other than the first to get a parameter (where a, b). Function returns a whole bind method, in performing the bind method calls the function fn internal functions, and apply the use of this method is directed to the first parameter fn (obj) passed bind function, and returns an execution result fn .

Features using the bind () method will not be executed immediately, we can use the function bind () processing time of some interaction.

document.getElementById BTN = var ( "BTN") 
var = document.getElementById Lines ( "Lines") 
btn.onclick = function () { 
    the console.log (this.id) // Lines 
} .bind (Lines) // This when the handler will not be executed immediately, when the click event is triggered, bind () function returns a copy of the executed, returned fn.apply (cnt, args.slice (1) ); apply immediately executed

Call bind click event handler method is not performed immediately, when the click event is triggered, bind () function returns a copy of the execution, this time returned fn.apply (cnt, args.slice (1)); apply immediately executed processing function, while changing this point, the result is output lines.