了解在javascript中的绑定

我有一个选择元素的id设置select。这是两种不同的方式我绑定事件。为什么是这个值没有绑定到选择元素，即使在第二种方法中使用“绑定”。了解在javascript中的绑定

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? 
    }

来源

2016-12-28 john doe

使用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>

来源

2016-12-28 12:27:53 Satpal

为什么$（本）.VAL（）的作品里面selectSettings功能在这种情况下，？你能解释一下吗？ –

在这种情况下，'this'使用当前元素上下文设置，因此它可以工作 – Satpal

如何将参数传递给selectSettings？ –

引发错误。这个 - >窗口对象。为什么？

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

而bind函数背后的一个规则是，一旦你使用bind将函数的上下文绑定到函数，那么在这之后不会改变为任何函数。

来源

2016-12-28 12:27:14

在第二种方法只是通过函数回调引用这样

$('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()); 
    }

来源

2016-12-28 12:30:28

了解在javascript中的绑定

回答

相关问题