Question

我对javascript中的内联函数调用有疑问。

此示例有效：

<button onclick="{alert($(this).text());}">Testing</button>

虽然这不起作用：

<button onclick="function(){alert($(this).text());}">Testing</button>

我的问题是 - 为什么第二种情况不起作用而第一种情况呢？

我使用jQuery-UI droppable来解决这个问题：

$( ".selector" ).droppable({
  drop: function( event, ui ) {}
});

Droppable也使用这种语法（没有function()）。那是为什么？

Answer 1

size

这相当于：

<button onclick="function(){alert($(this).text());}">Testing</button>

你能明白为什么它现在不起作用吗？

Answer 2

示例1

你的传递声明。所以它正在发挥作用。

示例2

你传递的回调函数。 Javascript onclick不支持回调。

关于droppable，droppable是一个jquery插件，因此它将支持回调函数。

Answer 3

因为括号是多余的，可能会被忽略：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="alert($(this).text());">Testing</button>

如果你想将它封装在一个函数中并按原样运行它，我想它需要自我调用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="(function(){alert($(this).text());})();">Testing</button>

但是this值无法绑定。

droppable语法完全不同 - 您可以这样想：

var configObj = { // this isn't a function, it's a config object
  drop: function( event, ui ) {}  // this is a function value of the property drop
}
$( ".selector" ).droppable(configObj);

Answer 4

让我们通过样本打破这个样本

<button onclick="{alert($(this).text());}">Testing</button>

这与在纯javascript中执行以下操作相同。

document.querySelector('button').addEventListener('click', function() {
  {
    alert($(this).text());
  }
});

添加类似的额外大括号有点奇怪，但它是完全允许的，并且其中的代码将被执行。对于你的第二个样本，这变得非常奇怪。

<button onclick="function(){alert($(this).text());}">Testing</button>

这与此相同。

document.querySelector('button').addEventListener('click', function() {
  function() {
    alert($(this).text());
  }
});

换句话说，当您点击按钮时，您将声明一个新功能，但您永远不会调用它。要解决此问题，您需要将其包装在paranthesis中，然后在函数上调用.call(this)以使用与调用者相同的this执行。

document.querySelector('button').addEventListener('click', function() {
  (function() {
    alert($(this).text());
  }).call(this);
});

或者你的风格。

<button onclick="(function(){alert($(this).text());}).call(this)">Testing</button>

Javascript内联函数调用

4 个答案: