函数扩展bind方法 在ES5开始使用的，也就是ie9一下不支持；
函数扩展bind使用如下：
function() {}.bind(thisArg [, arg1 [, arg2, …]]);
翻译过来就是：
函数.bind(this上下文参数, 普通参数1, 普通参数2, ...);
先看一个简单的
//bind方法
this.x=9;
var module={
x:81,
getX:function(){return this.x;}
};
module.getX();
/*
81 使用函数.方法 调用方式 函数内部的属性
*/
var getX=module.getX;
getX();
/*
9 将 变量 =函数.方法 使用全局变量 return
*/
var boundGetX = getX.bind(module);
boundGetX();
/*
81 使用bound的方法可以 函数体内属性 具有最高优先级
*/
//bind与currying 柯里化
function add(a,b,c){
return a+b+c;
}
var func = add.bind(undefined,100);
func(1,2);
/*
103 给第一个参数a 赋值 100 func(1,2) add(b,c)
*/
var func2= func.bind(undefined,200);
func2(2);
/*
302 给第二个参数b 赋值 200，接第一次bind的a 调用方法时 只需传 一个c的参数
*/
一个具体效果
HTML代码：
<input id="button" type="button" value="点击我" />
<span id="text">我会变色？</span>
JS代码：
//如果当前浏览器不支持bind方法
if (!function() {}.bind) {
Function.prototype.bind = function(context) {//扩展Function原型链
var self = this,
args = Array.prototype.slice.call(arguments);
//因为function(arguments参数为类数组 使用call方法 可以使用数组的操作方法)
return function() {
return self.apply(context, args.slice(1));
}
};
}
var eleBtn = document.getElementById("button"),
eleText = document.getElementById("text");
eleBtn.onclick = function(color) {
color = color || "#003399";
this.style.color = color;
}.bind(eleText, "#cd0000");
Paste_Image.png
/*
函数2
*/
if(!function(){}.bind){
Function.prototype.bind =function(context){
var self = this,
args = Array.prototype.slice.call(arguments);
return function(){
return self.apply(context,args.slice(1));
}
};
}
//bind 与new
function foo(){
this.b =100;
return this.a;
}
var func = foo.bind({a:1});
func();
/*
1
*/
func1 = new func();//return必须是对象 否则返回this，此时this被初始化一个空对象，对象原型是 foo.prototype;空对象.b属性设置为100，此时返回值return被忽略
func1//返回对象字面量的值
/*
[object Object] 这里必须使用console.log
*/
//new 可以消除bind 中this的影响
if(!Function.prototype.bind){ //如果ie9一下不支持bind
Function.prototype.bind = function(oThis){ //类似上一个例子的 {a:1} 第一个参数
if(typeof this !=='function'){ //如果全局对象不是函数 抛出异常
throw new TypeError('What is tring to be bound is not callable');
}
var aArgs = Array.prototype.slice.call(arguments,1), //声明变量 变量从参数第一个后开始 使用call 操作类数组arguments
fToBind = this,
fNOP = function(){},
fBound = function(){
return fToBind.apply(this instanceof fNOP ? this :oThis,aArgs.concat(Array.prototype.slice.call(arguments)));
//apply(object,args); 如果当前是使用bind时 这里的this在浏览器中就是window对象 this=oThis 返回bind的返回值
//使用new时 会阻断bind返回
}
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
}
}
