関数宣言と関数式を簡単に分析 - 関数宣言の事前宣言_基礎知識

クラスパーティーの最初の 2 日間は、食べたり飲んだり楽しんだり、寝たり、話したりすること以外はとても楽しかったです。一緒に楽しむよりも一人で楽しむのが一番です。

追伸: 卒業した人、これから卒業する人は時間があれば集まってください。卒業後は集まる時間があまりにも少なくなります。

今、いくつかのことを見て、いくつかのことを要約する時間があります。少し前に JavaScript の関数部分を少しずつ調べたので、関数の関連する部分を要約する時間を取りました。 , 私の理解している部分もありますが、私の理解に誤りがある場合は、お気軽にご指摘ください。

ここでは関数宣言の事前宣言について、私の理解に基づいてお話します。

注: 場所によっては、関数宣言のプロモーションとも呼ばれます。翻訳は異なりますが、誰もが理解できる限り意味は同じです。理解万歳！

関数宣言の宣言について事前に説明する前に、関数定義のいくつかの方法を紹介する必要があります。これはほとんどの友人にはよく知られているはずです。何かを知っている場合、または知りたくない場合は、そのまま転がしてください。よく知らない場合、または詳しく知りたい場合は、速度を落として歩き始めてください。

関数の定義方法

関数を定義するには主に 3 つの方法があります:

1. 関数の宣言
2.関数式)
3.新しい関数コンストラクター
その中でも、関数宣言と関数式の関数定義方法は非常に微妙な違いや関連性があり、また混同しやすいため、この記事では主にこれら 2 つの方法についてまとめます。関数の定義方法に関する知識ポイント もちろん、この記事のテーマはまだ関数についての事前の話です。

関数宣言の一般的な形式:

function functionName(arg1, arg2, ...){
  <!-- function body -->
}

関数式

•関数式の一般的な形式:

var variable=function(arg1, arg2, ...){
      <!-- function body -->
}

名前を含む関数式 (括弧、関数名):

var variable=function functionName(arg1, arg2, ...){
    <!-- function body -->
}

上記のような名前の関数式は再帰的に使用できます。

var variable=function functionName(x){
    if(x<=1)
      return 1;
    else
      return x*functionName(x);
}

事前申告

事前にvar宣言

事前宣言のステートメントについては誰もが聞いたことがあるはずです。事前宣言は関数宣言と関数式の重要な違いであるため、これら 2 つの関数定義方法をさらに理解することが重要です。 . 重要な意味。

ただし、関数宣言について事前に説明する前に、var 宣言について事前に説明する必要があります。

まず、var ステートメントの前に結論を示します。

変数は、変数が宣言されているスクリプトまたは関数内で定義され、変数宣言ステートメントはスクリプトまたは関数の先頭に進みます。ただし、変数の初期化操作は元の var ステートメントの場所で引き続き実行され、変数の値は宣言ステートメントの前では未定義になります。

上記の結論から 3 つの簡単なポイントを要約できます:

1. 変数宣言は関数の先頭に進みます。 2. 宣言のみが進められ、初期化は進められず、初期化は引き続き元の初期化位置で実行されます。 3. 宣言前の変数の値は不定です。

例を挙げてみましょう:

var handsome='handsome';
function handsomeToUgly(){
  alert(handsome);
  var handsome='ugly';
  alert(handsome);
}
handsomeToUgly();

正しい出力は次のとおりです:

最初に unfine を出力し、次に醜い出力を行います。

間違った出力は次のとおりです:

最初にイケメンを出力し、次にブサイクを出力します。

変数宣言の役割を事前に説明します。関数本体全体にハンサムなローカル変数が定義されていますが、関数本体内のハンサムな変数は事前に宣言されているため、同じ名前のハンサムな変数が隠されています。関数に進むと、上部は次のようになります:

var handsome='handsome';
function handsomeToUgly(){
  var handsome;
  alert(handsome);
  var handsome='ugly';
  alert(handsome);
}
handsomeToUgly();

したがって、alert(handsome) の前に、上で説明したように var ハンサム ステートメントがすでに存在します

宣言前の変数の値は未定義です

したがって、最初の出力は未定義です。

そして上記の理由により:

宣言のみが進められ、初期化は進められず、元の初期化位置で初期化が行われます

したがって、2 番目の出力は醜いものになります。

事前に関数宣言

次の 2 章では、var 宣言と併せて関数の事前宣言について説明します。

皆さんは関数宣言の宣言について事前によく知っているはずです。非常に身近な例を示します。

小伙伴们都知道，对于函数声明的函数定义方法，即上面的第一种函数调用方法是正确的，可以输出myvin is handsome.的真理，因为函数调用语句可以放在函数声明之后。而对于函数表达式的函数定义方法，即上面的第二种函数调用的方法是不能输出myvin is handsome.的正确结果的。

结合上面的myvin is handsome.例子，函数声明提前的结论似乎很好理解，不就是在使用函数声明的函数定义方法的时候，函数调用可以放在任意位置嘛。对啊，你说的很对啊，小伙伴，我都不知道怎么反驳你了。那就容我再扯几句。

从小伙伴所说的

不就是在使用函数声明的函数定义方法的时候，函数调用可以放在任意位置嘛
可以引出一点：

函数声明提前的时候，函数声明和函数体均提前了。

而且：

函数声明是在预执行期执行的，就是说函数声明是在浏览器准备执行代码的时候执行的。因为函数声明在预执行期被执行，所以到了执行期，函数声明就不再执行（人家都执行过了自然就不再执行了）。

上面是一点。

函数表达式为什么不能声明提前
我们再说一点：为什么函数表达式不能像函数声明那样进行函数声明提前呢？

辛亏我知道一点儿，否则真不知道我该怎么回答呢？

咳咳，按照我的理解给小伙伴们解释一下下：

我们上面说了var的声明提前，注意我上面提过的：

只是声明被提前，初始化不提前，初始化还在原来初始化的位置进行初始化

Ok，我们把函数表达式摆在这看看：

var variable=function(arg1, arg2, ...){
          <!-- function body -->
}

函数表达式就是把函数定义的方式写成表达式的方式（貌似是白说，但是这对于解释和理解为毛函数表达式不能函数声明提前具有良好的疗效），就是把一个函数对象赋值给一个变量，所以我们把函数表达式写成这个样子：

var varible=5看到这，也许小伙伴们会明白了，一个是把一个值赋值给一个变量，一个是把函数对象赋值给一个变量，所以对于函数表达式，变量赋值是不会提前的，即function(arg1, arg2, ...){}是不会提前的，所以函数定义并没有被执行，所以函数表达式不能像函数声明那样进行函数声明提前。

函数声明提前的实例分析

还是那句话，还是例子来的实在：

sayTruth();
if(1){
  function sayTruth(){alert('myvin is handsome')};
}
else{
  function sayTruth(){alert('myvin is ugly')};
}

在浏览器不抛出错误的情况下（请自行测试相应的浏览器是否有抛出错误的情况，为啥我不测试？我能说我懒么。。。），浏览器的输出结果是输出myvin is ugly（我不愿承认，但是事实就是这样啊啊啊啊，难道道出了人丑就该多读书？？？？？？）。

为什么呢？当然是声明提前了。因为函数声明提前，所以函数声明会在代码执行前进行解析，执行顺序是这样的，先解析function sayTruth(){alert('myvin is handsome')}，在解析function sayTruth(){alert('myvin is ugly')}，覆盖了前面的函数声明，当我们调用sayTruth()函数的时候，也就是到了代码执行期间，声明会被忽略，所以自然会输出myvin is ugly（好残酷的现实。。。）。忘了的可以看上面说过的：

函数声明是在预执行期执行的，就是说函数声明是在浏览器准备执行代码的时候执行的。因为函数声明在预执行期被执行，所以到了执行期，函数声明就不再执行了（人家都执行过了自然就不再执行了）。

小了个结

关于函数声明的函数提前（提升）就聊到这里先，希望我的理解和扯淡能够对有需要的小伙伴有所帮助。

当然，实践出真知。对事物的了解、认知和运用还是在于多看多用多总结，记得有句名言，是讲声明和实践的：“动起来，为新的声明喝彩。”。

以上这篇浅析函数声明和函数表达式——函数声明的声明提前就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。