Question

我有一个带有id settings-select的select元素。这是我绑定事件的两种不同方式。为什么即使在第二种方法中使用'bind'之后'this'值也没有绑定到select元素。

   1. 
    $('body').on( 'change', '#settings-select', function() {
        console.log( $(this).val ); // outputs correct select value
    });

   2.
    $('body').on( 'change', '#settings-select', selectSettings.bind( this ) );

    function selectSettings() {
        console.log( $(this).val() );// Throws error. this -> window object. Why?
    }

Answer 1

引发错误。这个 - ＆gt;窗口对象。为什么呢？

因为，$('body').on( 'change', '#settings-select', selectSettings.bind( this ) );此特定代码是在窗口的上下文中执行的。因此，this会指向window。

bind函数背后的规则是，一旦使用bind将上下文绑定到函数，那么之后就不会将其更改为任何函数。

Answer 2

使用bind时，this不引用当前元素。它指的是window对象。

您只需要传递函数参考

$('body').on( 'change', '#settings-select', selectSettings)

根据评论，selectSettings的一些论点。您可以使用event.data

var x = 1;
$('body').on('change', '#settings-select', {
  value: x
}, selectSettings)

function selectSettings(event) {
  console.log(event.data.value, $(this).val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='settings-select'>
  <option>1</option>
  <option>2</option>
</select>

Answer 3

在第二种方法中，只需像这样传递函数回调引用

$('body').on( 'change', '#settings-select', selectSettings)

是的，两者都是相同的功能，但第一种方法和第二种方法之间存在差异，

1）这是一个匿名的回调函数。

 $('body').on( 'change', '#settings-select', function() {
        console.log( $(this).val() ); // outputs correct select value
 });

2）如果你想要可重复使用的功能，请转到第二种方法，然后你想要绑定相同的功能

$('body').on( 'change', '#settings-select', selectSettings);

    function selectSettings() {
        console.log( $(this).val());
    }

了解javascript中的绑定

3 个答案: