Home  >  Article  >  Web Front-end  >  Function.prototype.bind用法示例_javascript技巧

Function.prototype.bind用法示例_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:22:36867browse
复制代码 代码如下:

//ECMAScript 5 Function.prototype.bind函数兼容处理
(function(){
if ( !Function.prototype.bind ) { //function(){}.bind
Function.prototype.bind = function ( o, /*参数列表*/ ) {
var self = this, boundArgs = Array.prototype.slice.call(arguments, 0);
return function(){
var args = [], i;
for ( i = 1; i for ( i = 0; i return this.apply(o, args);
}
}
}
})();

用法示例:
1、简单调用示例
复制代码 代码如下:

/*example 1*/
function f1(y, z){ return this.x + y + z;}
//调用 1
var g1 = f1.bind({x:1}, 2); //this.x = 1; y = 2;
console.loog( g1(3) ); //this.x + y + 3 = 6;
//调用 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; }
//调用
var g3 = f2.bind(null, 1); //x = 1
console.log( g3(2) ); //x + 2 = 3

2、DOM调用示例
复制代码 代码如下:

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

eleBtn.onclick = function(color) {
color = color || "#003399";
this.style.color = color; //此时的this指向eleText
}.bind(eleText, "#cd0000");
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn