如何使用onclick与函数表达式而不是声明的函数？

Question

我有一个按钮

var startButton = $('#startButton').get(0);

我将vanilla javascript onclick方法附加到按钮上并在点击时调用start。

startButton.onclick = start;

我想使用函数表达式但是（由于提升？）这不会调用start

var start = function() {
  console.log('requesting local stream');
  startButton.disabled = true;
  getUserMedia(constraints, gotStreamSuccess, errorCallback);
}

声明的函数

function start() {
  console.log('requesting local stream');
  startButton.disabled = true;
  getUserMedia(constraints, gotStreamSuccess, errorCallback);
}

我该怎么写

startButton.onclick = start;

这样它可以用于函数表达式吗？

由于

Answer 1

我同意你的意见，这是一个悬挂问题，在设置startButton.onclick = start;之前，你必须在代码中查看以适当提升它。

以下是MDN对语法的评价：

它特别提到可以声明或表达该函数。对我来说，再次引导出来，因为函数声明会自动提升。

onclick的{​​{3}}使用函数声明。我更改了此MDN中的示例以使用函数表达式，就像您想要使用的那样。正确提升后，单击按钮时调用正确的方法。

Answer 2

根据您的问题描述判断，您似乎在将其分配给start后声明（并定义）startButton.onclick 。在这种情况下，startButton.onclick确实是undefined。

提升的是变量本身 - 您的代码知道它已被声明，但尚未知道它的值，因为赋值恰好发生在代码中的位置。可以这样考虑：当您使用var关键字时，您声明了一个变量，但该变量尚未定义。如果您碰巧立即为其赋值，则新值将在分配上方的代码中不可见。

考虑以下示例：

var a = 1;
console.log(a);
var a = 2;
var a = 3;

您希望在控制台中记录三个值中的哪一个？ 1,2或3？
你可以根据需要多次使用var作为单个标识符（虽然我不推荐它）;简单地忽略连续声明，仅考虑分配。因此，不能悬挂作业。

然而，函数声明在某种意义上是有限的，它们可以完整地提升，这就是为什么在你的情况下使用函数声明的原因。

要解决这个问题，您确实可以使用函数声明，或者在startButton.onclick = start;之前执行变量赋值（我认为在这种特殊情况下你真的不需要变量，函数声明非常适合为了这个任务）。

请注意，您也可以这样做：

startButton.onclick = function() { // I'm a function expression too!
    // do something here
}

Answer 3

事件附件必须在创建函数表达式后发生。

结帐example

<button id="click">Click</button>
<button id="click2">Click2</button>

$(function(){

  var startButton = $("#click").get(0);
  var startButton2 = $("#click2").get(0);

  startButton.onclick = clickFunc; // wont work

  var clickFunc = function() {
    alert('click');
  };

  startButton2.onclick = clickFunc; // work
});