Mootools什么时候使用Function.prototype.bind

时间:2013-10-02 06:43:52

标签: javascript mootools

我有一个非常基本的问题,我找不到答案,我确实检查了mootools网站,但我还没有完全掌握这个概念:

在mootools中你有一个函数.bind(),它可以按如下方式使用:

function customFunction () {
    this.setStyle('color','blue');
}

var boundFunction = customFunction.bind(myElement);
boundFunction(); //Now the color of the element is changed to red

// To show how bind works the following example:
var myBoundFunction = myFunction.bind(anyVar);
// is roughly equivalent with
var myBoundFunction = function(){
    return myFunction.call(this);
};

但为什么不这样做呢?

function customFunction (parameter) {
    parameter.setStyle('color','blue');
}

customFunction(myElement);

这似乎更有效率?

我的大问题是: 使用.bind()的好习惯在哪里?为什么会这样?

1 个答案:

答案 0 :(得分:5)

将方法作为回调参数传递时,绑定很有用。假设我们有以下user对象:

function User(name) {
    this.name = name;
}
User.prototype.sayHi = function() {
    console.log("Hi, my name is "+this.name);
}

var user = new User("John");

现在我们想在有人点击某个div元素时调用它的sayHi方法。我们可以尝试这样做:

$('userDiv').addEvent('click', user.sayHi);

但这不起作用,因为我们只传递sayHi函数本身,但其上下文(this的值)将丢失,函数将打印"Hi, my name is undefined"

为了保持上下文,我们可以改为:

$('userDiv').addEvent('click', function() { user.sayHi(); });

但是使用bind

附加上下文要简单得多
$('userDiv').addEvent('click', user.sayHi.bind(user));