函數(shù)擴(kuò)展bind方法 在ES5開始使用的史辙，也就是ie9一下不支持各淀；
函數(shù)擴(kuò)展bind使用如下：
function() {}.bind(thisArg [, arg1 [, arg2, …]]);
翻譯過來就是：
函數(shù).bind(this上下文參數(shù), 普通參數(shù)1, 普通參數(shù)2, ...);
先看一個(gè)簡單的
//bind方法
this.x=9;
var module={
x:81,
getX:function(){return this.x;}
};
module.getX();
/*
81 使用函數(shù).方法 調(diào)用方式 函數(shù)內(nèi)部的屬性
*/
var getX=module.getX;
getX();
/*
9 將 變量 =函數(shù).方法 使用全局變量 return
*/
var boundGetX = getX.bind(module);
boundGetX();
/*
81 使用bound的方法可以 函數(shù)體內(nèi)屬性 具有最高優(yōu)先級
*/
//bind與currying 柯里化
function add(a,b,c){
return a+b+c;
}
var func = add.bind(undefined,100);
func(1,2);
/*
103 給第一個(gè)參數(shù)a 賦值 100 func(1,2) add(b,c)
*/
var func2= func.bind(undefined,200);
func2(2);
/*
302 給第二個(gè)參數(shù)b 賦值 200安皱，接第一次bind的a 調(diào)用方法時(shí) 只需傳 一個(gè)c的參數(shù)
*/
一個(gè)具體效果
HTML代碼：
<input id="button" type="button" value="點(diǎn)擊我" />
<span id="text">我會變色刷袍？</span>
JS代碼：
//如果當(dāng)前瀏覽器不支持bind方法
if (!function() {}.bind) {
Function.prototype.bind = function(context) {//擴(kuò)展Function原型鏈
var self = this,
args = Array.prototype.slice.call(arguments);
//因?yàn)閒unction(arguments參數(shù)為類數(shù)組 使用call方法 可以使用數(shù)組的操作方法)
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
/*
函數(shù)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米碰，此時(shí)this被初始化一個(gè)空對象谷丸，對象原型是 foo.prototype;空對象.b屬性設(shè)置為100堡掏，此時(shí)返回值return被忽略
func1//返回對象字面量的值
/*
[object Object] 這里必須使用console.log
*/
//new 可以消除bind 中this的影響
if(!Function.prototype.bind){ //如果ie9一下不支持bind
Function.prototype.bind = function(oThis){ //類似上一個(gè)例子的 {a:1} 第一個(gè)參數(shù)
if(typeof this !=='function'){ //如果全局對象不是函數(shù) 拋出異常
throw new TypeError('What is tring to be bound is not callable');
}
var aArgs = Array.prototype.slice.call(arguments,1), //聲明變量 變量從參數(shù)第一個(gè)后開始 使用call 操作類數(shù)組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); 如果當(dāng)前是使用bind時(shí) 這里的this在瀏覽器中就是window對象 this=oThis 返回bind的返回值
//使用new時(shí) 會阻斷bind返回
}
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
}
}
