Javascript调用()&apply()vs bind()?

我已经知道applycall是设置this类似函数(函数的上下文)。

区别在于我们发送参数的方式(手动vs数组)

题:

但是什么时候应该使用bind()方法?

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));

jsbin


当您希望稍后使用特定上下文来调用该函数时,可以使用.bind() ,这在事件中很有用。 当想要立即调用函数时使用.apply() .call().apply() ,并修改上下文。

调用/应用程序立即调用该函数,而bind返回一个函数,稍后执行时,该函数将具有用于调用原始函数的正确上下文集。 这样你可以在异步回调和事件中维护上下文。

我做了很多:

function MyObject(element) {
    this.elm = element;

    element.addEventListener('click', this.onClick.bind(this), false);
};

MyObject.prototype.onClick = function(e) {
     var t=this;  //do something with [t]...
    //without bind the context of this function wouldn't be a MyObject
    //instance as you would normally expect.
};

我在Node.js中广泛使用它来进行异步回调,我想要传递成员方法,但仍希望上下文成为启动异步操作的实例。

一个简单,天真的绑定实现就像:

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

还有更多(如传递其他参数),但您可以阅读更多内容并查看MDN上的实际实现。

希望这可以帮助。


它们都将附加到函数(或对象)中,差异在函数调用中(见下文)。

调用附加到这个函数并立即执行的功能:

var person = {  
  name: "James Smith",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

person.hello("world");  // output: "James Smith says hello world"
person.hello.call({ name: "Jim Smith" }, "world"); // output: "Jim Smith says hello world"

绑定附加到这个函数和其需要被这样分开调用:

var person = {  
  name: "James Smith",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

person.hello("world");  // output: "James Smith says hello world"
var helloFunc = person.hello.bind({ name: "Jim Smith" });
helloFunc("world");  // output: Jim Smith says hello world"

或者像这样:

...    
var helloFunc = person.hello.bind({ name: "Jim Smith" }, "world");
helloFunc();  // output: Jim Smith says hello world"

apply类似于调用,只不过它需要一个类似数组的对象,而不是一次列出一个参数:

function personContainer() {
  var person = {  
     name: "James Smith",
     hello: function() {
       console.log(this.name + " says hello " + arguments[1]);
     }
  }
  person.hello.apply(person, arguments);
}
personContainer("world", "mars"); // output: "James Smith says hello mars", note: arguments[0] = "world" , arguments[1] = "mars"                                     

它允许设置值, this独立的功能是如何被调用。 处理回调时这非常有用:

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(sayHello.bind(obj), 1000);

通过call获得相同的结果如下所示:

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(function(){sayHello.call(obj)}, 1000);
链接地址: http://www.djcxy.com/p/2873.html

上一篇: Javascript call() & apply() vs bind()?

下一篇: Extension Methods vs Static Utility Class