機能巻上げ✨

イントロ
私の最後のポストでは、我々は詳細にホーニングと変数巻き上げについて議論しました.どのように変数を巻いて動作を理解すると、機能の巻上に移動しましょう.

テストあなたの知識
次の3つのsayHelloo ()の結果を説明できますか?

sayHello()

function sayHello () {
  function hello () {
    console.log('Hello!')
  }

  hello()

  function hello () {
    console.log('Hey!')
  }
}

sayHello()

function sayHello () {
  function hello () {
    console.log('Hello!')
  }

  hello()

  var hello = function () {
    console.log('Hey!')
  }
}

sayHello()

var sayHello = function () {
  function hello () {
    console.log('Hello!')
  }

  hello()

  function hello () {
    console.log('Hey!')
  }
}

答えはねえ!こんにちは!そして、3番目のものは実際にTypeErrorをもたらします.
あなたがこれらの権利を推測しない場合は心配しないでください.最後にいくつかのクイズがあるだろうし、それまでに、あなた自身が機能を巻いて快適に見つけることができます.

機能巻上げ
変数の巻き上げからこの例を覚えていますか?

console.log(x)
var x

// undefined

ここでのキーは、Xがその宣言の前に利用可能だったことでした.関数の宣言に同じロジックが適用されます.

sayHello()

function sayHello () {
  console.log('Hello!')
}

// Hello!

この例では、3行目から宣言前にSayHello関数を呼び出します.私は宣言されていない機能を呼んでいるようですが、私はそれを使用することができますし、それはこんにちはを印刷!これは機能巻上げのおかげです.
メモリ作成フェーズ中に、JavaScriptエンジンは、関数のキーワードによって関数宣言を認識し、それを立ち上げました.言い換えれば、JavaScriptエンジンは、移動する前に、メモリに入れて関数を利用可能にしました.このため、実行フェーズで宣言前にSayHello関数にアクセスできました.
それではこれはどうですか.次のコードは何をするかわかりますか?

sayHello()

var sayHello = function () {
  console.log('Hello!')
}

うーん、それは正しいです-それはTypeErrorになります.うーん、なんだ!
場面の背後に何が起こっているかを完全に理解するために、関数宣言と関数式の違いを知る必要があります.その最初に少し時間をかけましょう.

関数宣言対関数式
JavaScript関数と関数式の中で、関数のキーワードを持つ関数を定義する方法は2つあります.
関数の宣言は関数のキーワードで始まり、関数の名前(SayHello)を呼び出し、関数が呼び出されたときに実行されるコードのブロック({ console . log (' hello !'))を呼び出します.

function sayHello() {
  console.log('Hello!')
}

sayHello()

// Hello!

一方、関数式を使用すると、名前のない関数や非機能コードブロックの一部を定義できます.関数式の典型的な使用法は、関数を変数に代入することです.以下、匿名関数、つまり名前のない関数を定義しています.そして、変数(var sayhello =)にそれを割り当てるので、私は後でSayHelloを通して機能を参照することができます.

var sayHello = function() {
  console.log('Hello!')
}

sayHello()

// Hello!

もし私がこれらの関数を定義した後にコールするなら、SayHelp ()を使って同じように呼び出すことができます.しかし、JavaScriptエンジンが最初にそれらを見たとき、それは非常に異なる方法でそれらを扱います.

関数式は
例2に戻りましょう.これはTypeErrorを投げました.SayHelloは機能ではなく、JavaScriptエンジンの視点から一歩一歩起こっていることを通り抜けます.

sayHello()

var sayHello = function () {
  console.log('Hello!')
}

メモリ作成フェーズ中に、JavaScriptエンジンは、3行目のvarキーワードに遭遇します.JavaScriptエンジンが変数宣言に何をしているか覚えていますか?はい、それは値で変数をホイストします:未定義.そして、それは変数開始をホイストしません.
さて、typeerrorは意味を持ち始めます.変数宣言( var sayhello )は未定義の値で囲んでいました.ただし、変数の初期化(= function ()\console . log ( hello !))立ち上げられなかった.したがって、実行が行1に達して、SayHelloに電話をしようとすると、それは失敗しました.SayHello変数が行3の実行中に関数式に代入された後のみ、SayHelp ()で関数を呼び出すことができます.これを次のように証明することができます.

console.log(sayHello)

var sayHello = function () {
  console.log('Hello!')
}

sayHello()

// undefined
// Hello!

得た?
すべてのフィードバック、質問、またはトピックの要求を投稿してください.私も感謝👏 あなたがポストのような場合、他の人もこれを見つけることができます.