编写函数的不同方式会在JavaScript中带来不希望有的效果

Different ways of writing a function bringing undesired effects in JavaScript?

本文关键字：希望有 函数 方式会 JavaScript      更新时间：2023-09-26

更新：

问题解决了我意识到这是因为"吊装"基本上，JavaScript解释器解析代码，并在函数开始时声明所有变量（但不初始化它们）。这就是为什么第二个例子不起作用。因为JavaScript解释器在函数的开头声明var changed;，但在到达代码体之前不会初始化它。

对于像第一个例子一样的函数声明，JavaScript不像第二个例子那样只向上移动变量名，而是在父函数的开头向上移动（或"提升"）整个函数，这就是它工作的原因！

不管怎样，我写这篇文章是为了个人参考，谢谢你的回答。。。

这个有效：http://jsbin.com/emarat/7/edit

$(function(){
  $name = $('#test');
  $name.change(changedName);
  function changedName (e){
      console.log('e: ', e); 
      console.log('e.currentTarget: ', e.currentTarget); 
      console.log('$(e.currentTarget).val(): ', $(e.currentTarget).val());
      $('#test-display').text($(e.currentTarget).val());
    }
});

但这个没有：http://jsbin.com/emarat/9/edit

$(function(){
  $name = $('#test');
  $name.change(changed);
  var changed = function(e){
      console.log('e: ', e); 
      console.log('e.currentTarget: ', e.currentTarget); 
      console.log('$(e.currentTarget).val(): ', $(e.currentTarget).val());
      $('#test-display').text($(e.currentTarget).val());
    };
});

为什么

后一个等价于：

$(function(){
  var changed;
  $name = $('#test');
  $name.change(changed);
  changed = function(e){
      //...
    };
});

这就说明了为什么它不起作用。在使用时，changed变量尚未初始化（undefined）。

但是，如果使用function yourFunctionName()语法声明一个函数，那么它在整个作用域中都可用。（在JavaScript中，它是父函数。）否则，就不可能在函数声明之前使用它们。它被称为吊装。

另请参阅：

  • var functionName=function（）｛｝vs function functionName（）
  • 惊讶于全局变量在JavaScript中有未定义的值

因为变量是在使用后定义的

var a = 1;
var c = a + b;
var b = 2;

您不会期望该代码运行。

第一个定义了作用域中的函数。第二个创建了一个内联函数，并将对它的引用存储在局部变量changed中。问题是，你在使用变量后填充它。

这将起作用：

$(function(){
  var changed = function(e){
      console.log('e: ', e); 
      console.log('e.currentTarget: ', e.currentTarget); 
      console.log('$(e.currentTarget).val(): ', $(e.currentTarget).val());
      $('#test-display').text($(e.currentTarget).val());
  };
  $name = $('#test');
  $name.change(changed);
});

http://jsbin.com/emarat/11/edit

相关文章：