设置上下文时使用 bind 的替代方法是什么？

Question

到目前为止，我一直在我的网络应用程序中使用以下语法。

function.bind( obj );

所以假设我有一个像这样的对象：

myObj = {
    msg: 'You have logged ',
    init: function(){
        $( 'input' ).on( 'click', this.log.bind( this ) ),
    },
    log: function( e ){
        console.log( this.msg + $( e.target ).val() );
    }
}

我可以调用init函数。 myObj.init();

但问题是我读到 .bind function() 将被弃用。是 jQuery 绑定函数还是 JavaScript 绑定函数将被弃用。

如果 JavaScript 函数将被弃用，那么它的替代方案是什么？

Answer 1

您目前可以使用 $.proxy()。尽管注释 $.proxy() 也可能在 jQuery.

的未来版本中被弃用

$( 'input' ).on( 'click', $.proxy( this.log, this ) )

Answer 2

But the problem is i read that the .bind function() will be deprecated. Is that the jQuery bind function or the JavaScript bind function that is going to be deprecated.

没有问题，因为您没有使用 $.bind，您使用的是 Function.prototype.bind

If that is going to be the JavaScript function that is going to be deprecated then what is its alternative ?

Function.prototype.bind 未弃用。您的代码 大部分 都很好，除了

以下的例外情况

关于您的代码的一些注意事项

// no `var`, `let` or `const` keyword
myObj = {
  msg: 'You have logged ',
  init: function(){
    // event handlers usually pass an `event` object
    $( 'input' ).on( 'click', this.log.bind( this ) ),
  },
  log: function(){ // no `e` param here
    console.log( this.msg + $( e.target ).val() );
  }
}

可以更新为

var myObj = {
  msg: 'You have logged ',
  init: function(){
    $( 'input' ).on( 'click', this.log.bind( this ) ),
  },
  log: function(e){
    console.log( this.msg + $( e.target ).val() );
  }
}

还有一种使用 ES6 表达代码的完全替代方法——arrow functions 有一个词法 this，所以在这个例子中不需要 Function.prototype.bind

const myObj = {
  msg: 'You have logged ',
  init () {
    $('input').on('click', event => this.log(event));
  }
  log (event) {
    console.log(this.msg, $(event.target).val());
  }
};

设置上下文时使用 bind 的替代方法是什么？

What is the alternative to using bind when setting context?

javascript

jquery

bind