Function.prototype.bind usage example_javascript skills

Copy code The code is as follows:

//ECMAScript 5 Function.prototype.bind function compatibility processing
(function(){
if ( !Function.prototype.bind ) { //function(){}.bind
Function.prototype.bind = function ( o, /*parameter list*/ ) {
var self = this, boundArgs = Array.prototype.slice.call(arguments, 0);
return function(){
var args = [], i;
for ( i = 1; i < boundArgs.length; i ) args.push(boundArgs[i]);
for ( i = 0; i < arguments.length; i ) args.push(arguments[i]);
return this.apply(o, args);
}
}
}
})();

Usage example:
1. Simple calling example

Copy code The code is as follows:

/*example 1*/
function f1(y , z){ return this.x y z;}
//Call 1
var g1 = f1.bind({x:1}, 2); //this.x = 1; y = 2;
console.loog( g1(3) ); //this.x y 3 = 6;
//Call 2
var g2 = f1.bind({x:1}); //this.x = 1;
console.log( g2(2,3) ); //this.x 2 3 = 6

/*example 2*/
var f2(x, y){ return x y; }
//Call
var g3 = f2.bind(null, 1); //x = 1
console.log( g3(2) ); //x 2 = 3

2. DOM call example

Copy code The code is as follows:

var eleBtn = document.getElementById("button")
, eleText = document.getElementById("text");

eleBtn.onclick = function(color) {
color = color || " #003399";
this.style.color = color; //This points to eleText at this time
}.bind(eleText, "#cd0000");