JavaScript的绑定方法bind

bind语法

fun.bind(this,arg1,arg2,…)
JavaScript函数调用bind方法会返回一个新的方法,新方法的this会绑定传入对象。

bind应用实例

创建绑定函数

a = 1;
var module = {
    a : 2,
    getA : function () {
        return this.a;
    }
}
console.log(module.getA()); //2
var windowfun = module.getA;
var modulefun = windowfun.bind(module);
console.log(windowfun()); //1
console.log(modulefun()); //2

如上代码,我们在module中定义了一个方法返回a值,显然我们直接调用module.getA()将返回module的局部变量a。但是我们将module的getA方法取出来赋给windowfun,此时windowfun的this将指向全局,故调用windowfun得到是全局变量a,值为1。
现在我们调用windowfun的绑定函数bind,并传入参数module,返回一个新函数赋给modulefun,那么此时modulefun的this绑定了module,自然得到的就是局部变量a,为2。

设置函数预设参数

function list() {
    return Array.prototype.slice.call(arguments);
}
console.log(list(1,2,3));           //[1,2,3]
var list1 = list.bind(undefined,4); //[4]
console.log(list1(1,2,3));          //[4,1,2,3]

首先说一下这个Array.prototype.slice.call这个函数,这个函数的作用是将类数组转换成真正的数组。对于有length属性的非数组对象是没有slice方法的,因此上述代码在Array的原型上调用slice的call方法相当于调用了”list.slice()”

var ls = {length:2, 0:'first', 1:'second'};
console.log(Array.prototype.slice.call(ls));
//[ 'first', 'second' ]

它的效果就大概这样子。
bind()函数的第一个参数是this所要绑定的对象,那么接下来的参数就是要传入新返回方法的预设参数,我们传入4,则不再传入参数直接调用返回就是[4],传入点其他参数呢就是[4,1,2,3]

setTimeout函数

function Fun1() {
    this.name = 1;
}
Fun1.prototype.fun2 = function () {
    setTimeout(this.fun3,1000);             //name:undefined
    setTimeout(this.fun3.bind(this),1000);  //name:1
}
Fun1.prototype.fun3 = function () {
    console.log('name: '+ this.name);
}
var fun = new Fun1();
fun.fun2();

默认情况下,调用setTimeout函数时this是指向全局的,因此第一个setTimeout将输出的是undefined,因为name在全局没有定义。只要将this.fun3绑定到当前对象,输出才是对象的局部变量name,值为1

你可能感兴趣的:(JavaScript)