Question

我的印象是我可以使用bind将参数传递给函数，然后调用这些参数，就好像它们已经正常传递一样。为什么我需要这样做：

$(document).ready(function() {
  var func = function(button) {
    button[0].on('click', function() {
      alert('Hello World.');
    })
  }
  func.bind(null, [$('.button')])();
});

看起来我应该能够这样做：

$(document).ready(function() {
  var func = function(button) {
    button.on('click', function() {
      alert('Hello World.');
    })
  }
  func.bind(null, [$('.button')])();
});

示例，将button参数视为数组：

$(document).ready(function() {
  var func = function(button) {
    button[0].on('click', function() {
      alert('Hello World.');
    })
  }
  func.bind(null, [$('.button')])();
});

html, body, div {
  padding:0;
  margin:0;
  display:flex;
  justify-content:center;
}

.button {
  background-color:gray;
  margin:50px;
  padding:50px;
  width:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="button">Button</div>

Answer 1

bind()用于将当前调用范围绑定到一个函数，这样即使你从其他地方调用它，它也会知道该绑定范围内的局部变量。

您正在寻找的是apply()。

＆＃13;

var func = function(button) {
  button.on('click', function() {
    console.log('hello world');
  });
}

func.apply(this, [$('.button')]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">Click Me</button>

＆＃13;

为了完整性，还有一个更常用的call()函数。它使用初始范围参数之后的参数列表而不是参数数组。

func.call(this, $('.button'));

Answer 2

您使用.bind错误。你不应该给它一个参数数组，你应该自己给出参数：

＆＃13;

function print(x, y, z) {
  console.log(x, y, z);      
}

print12 = print.bind(null, 1, 2);

print12(3); // 1, 2, 3

＆＃13;

另外，正如Soviut所提到的，如果你打电话给.bind(...)()，你可能需要.apply()或.call()。

为什么bind似乎将参数显示为数组？

2 个答案: