<div style='font-weight:bold;color:#9d9d9d'>bind()方法会创建一个新的函数,称为绑定函数,fun方法在this环境下调用</div>
<div id='divid' style='font-weight:bold;color:#9d9d9d'></div>
<script>
var divid = document.getElementById('divid');
function showMsg(msg){
divid .innerHTML = divid .innerHTML + '<br>'+msg;
}
function fun1() {
var slice = Array.prototype.slice;
return slice.apply(arguments);
}
showMsg('bind()快捷使用一');
showMsg(fun1(1,2,3));//[1,2,3]
function fun2() {
var unboundSlice = Array.prototype.slice;
// 把函数的call方法绑定在数组slice方法上,之后再给call方法传递参数
var slice = Function.prototype.call.bind(unboundSlice);
return slice(arguments);
}
showMsg('bind()快捷使用二');
showMsg(fun2(1,2,3));//[1,2,3]
function list(){
// 让类数组arguments拥有数组的方法slice,这个函数实现了简单把类数组转换成数组
return Array.prototype.slice.call(arguments);
}
//给list绑定一个预设参数4
var list1 = list.bind(undefined,4);
showMsg('bind()预设参数');
showMsg(list1(1,2,3));//[4,1,2,3]
showMsg('bind()对象转换...');
this.num = 9;
var module = {
num: 81,
getNum: function() { return showMsg(this.num); }
};
module.getNum(); // 81
var getNum = module.getNum;
getNum(); // 9, 因为在这个例子中,'this'指向全局对象
// 创建一个'this'绑定到module的函数
var boundGetNum = getNum.bind(module);
boundGetNum(); // 81
showMsg('bind()对象转换结束!!!');
showMsg('调用setTimeout的时候this会指向全局对象,但是使用类的方法时我们需要指向类的实例,所以要把this,绑定要回调函数方便继续使用实例');
function FunTime() {
this.name = 1;
}
FunTime.prototype.fun2 = function() {
window.setTimeout(this.fun3.bind(this), 1000);
}
FunTime.prototype.fun3 = function(){
showMsg('name:'+this.name);//name:1
}
var fun = new FunTime();
fun.fun2();
</script>