Mootools 何时使用 Function.prototype.bind

Mootools when to use Function.prototype.bind

本文关键字：prototype bind Function 何时使 Mootools      更新时间：2023-09-26

>我有一个非常基本的问题，我找不到答案，我确实查看了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（） 是一个好的做法，为什么会这样？

在将方法作为回调参数传递时，Bind 很有用。假设我们有以下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));
相关文章：