【问题标题】:Difference between bind, apply and call method?绑定、应用和调用方法之间的区别?
【发布时间】:2013-03-14 08:37:14
【问题描述】:

我在 stackoverflow 和 web 中搜索,无法获得正确的结果或解释这三种方法之间的位置差异。

据我了解,他们在执行function/method in different context. 时都做同样的事情

var google = {  
    makeBeer : function(arg1,arg2){     
         alert([arg1, arg2]);        
    }    
}

google.makeBeer('water','soda');

这是我的google对象的正常功能。现在,当我在这里使用调用和绑定方法时,这是输出。

var google = {
    makeBeer: function (arg1, arg2) {
        alert([arg1, arg2]);
    }
}

google.makeBeer('water', 'soda');

function yahoo() {}

var yah = new yahoo();
google.makeBeer.call(yah, 'pepsi', 'coke');

function msn() {

}

var msn = new msn();
google.makeBeer.call(msn, 'sprite', 'limca');

我仍然没有看到这样做的目的,我可以继续致电google.makeBeer three times with different arguments.

谁能在这方面给我更多启发。

【问题讨论】:

  • In 在您的示例中没有什么不同,因为google.makeBeer 没有使用this。当被调用为google.makeBeer(...);时,函数内部的this将引用google。当被称为google.makeBeer.call(yah, ...); 时,this 将引用yahbind 实际上并不执行函数,它创建一个新函数,其中 this 和可选的一些参数绑定到传递的参数。见developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/…developer.mozilla.org/en-US/docs/JavaScript/Reference/…
  • 我认为 DOM 方法 .call().apply() 之间的主要区别在于可以传递的参数数量(我认为一个只允许一个,另一个允许更多)。我不确定对.bind() 的引用是什么意思,但它通常指的是事件及其处理程序被“绑定”。

标签: javascript


【解决方案1】:

applycall 是一回事,除了一个接受要以数组形式传递给函数的参数,另一个接受参数形式。

bindcallapply 执行相同的操作,具体取决于您使用的框架,但不会立即调用该函数,而是返回一个新函数,您的参数绑定到this 以及何时从新的范围或上下文调用该函数,this 仍将保留您绑定到它的任何内容。绑定还允许您防止构造函数被applycall“攻击”,因为无论有人发送什么内容以尝试通过call 覆盖thisapply.

这是一个例子:

function Profile(u) {
    this.user = u;
    this.getUser = function () {
        return this.user;
    };
}

function Profile2(u) {
    this.user = u;
    this.getUser = (function () {
        return this.user;
    });
}

function Profile3(u) {
    this.user = u;
    this.getUser = (function () {
        return this.user;
    });
}

var x = new Profile('guest');
var x2 = new Profile2('guest');
var x3 = new Profile3('guest');

alert(x.getUser.apply({
    user: 'Vinoth'
})); // Vinoth
alert(x2.getUser.call({
    user: 'Babu'
})); // babu
alert(x3.getUser.bind(x3).call({
    user: 'Nandan'
})); // Guest

【讨论】:

    【解决方案2】:

    bind 创建一个具有相同函数体的新函数,然后返回新函数
    call 在不同的传递上下文中调用相同的函数,并且必须显式编写参数 apply 在不同的传递上下文中调用相同的函数,但参数必须在数组中传递

    var f = function(p1, p2) {
        var s = this;
    }
    
    var newFunc = f.bind(window, 1, 2);
    // here newFunc is a function which when you will call will have this as window and p1 = 1 and p2 = 2
    
    f.call(window, 1, 2);
    // by executing this line this = window p1 = 1 and p2 = 2
    
    f.call(document, 2, 3);
    // by executing this line this = document p1 = 2 and p2 = 3
    
    f.apply(window, [1, 2]);
    // by executing this line this = window p1 = 1 and p2 = 2
    

    【讨论】:

    • .bind 不执行函数。
    • 另外,this 不是上下文。它是由调用或绑定设置的局部变量。
    【解决方案3】:

    简单地说,apply() 和 call() 之间没有区别,唯一不同的是你传递的参数。在 apply() 中,你必须将参数作为数组传递,而在 call() 方法中,你传递参数逗号分隔的形式。

    说到bind方法,这是EcmaScript5中引入的新方法,专门用于在调用objects方法时解析this作用域。 this 在异步方法调用中特别有用。

    【讨论】:

    • this 不是作用域,它(本质上)是调用设置的局部变量。
    猜你喜欢
    • 2013-06-05
    • 1970-01-01
    • 2012-11-20
    • 1970-01-01
    • 2021-07-15
    • 2019-10-21
    • 2017-01-20
    • 2015-03-29
    相关资源
    最近更新 更多