เหตุใดชื่อฟังก์ชัน JavaScript ของฉันจึงไม่ตรงกัน

ฉันเขียนสคริปต์ต่อไปนี้เพื่อดูว่าเกิดอะไรขึ้นเมื่อตัวแปรและฟังก์ชันที่มีฟังก์ชันที่กำหนดให้มีชื่อของพวกเขาขัดแย้งกัน:

var f = function() {
    console.log("Me original.");
}

function f() {
    console.log("Me duplicate.");
}

f();

ผลลัพธ์ที่ได้คือ "ฉันเป็นต้นฉบับ" เหตุใดจึงไม่เรียกฟังก์ชันอื่น ๆ

นอกจากนี้ถ้าผมเปลี่ยนการกำหนดเดิมของฉันไปvar f = new function() {ฉันได้รับ "ฉันต้นฉบับ" ตามด้วย TypeError object is not a functionพูด ใครช่วยอธิบายหน่อยได้ไหม

การประกาศฟังก์ชันถูกยกขึ้น (ย้ายไปด้านบน) ใน JavaScript แม้ว่าจะไม่ถูกต้องในแง่ของลำดับการแยกวิเคราะห์ แต่รหัสที่คุณมีจะตรงกับความหมายต่อไปนี้เนื่องจากการประกาศฟังก์ชันจะถูกยกขึ้น:

function f() {
    console.log("Me duplicate.");
}
var f = function() {
    console.log("Me original.");
}


f();

ซึ่งในทางกลับกันยกเว้นชื่อของฟังก์ชันจะเหมือนกับ:

var f = function() {
    console.log("Me duplicate.");
}
var f = function() {
    console.log("Me original.");
}


f();

ซึ่งในทางกลับกันเนื่องจากการยกแบบแปรผันจึงเหมือนกับ:

var f;
f = function() {
    console.log("Me duplicate.");
}
f = function() {
    console.log("Me original.");
}

f();

ซึ่งอธิบายถึงสิ่งที่คุณได้รับคุณกำลังลบล้างฟังก์ชัน โดยทั่วไปvarอนุญาตให้มีการประกาศหลายรายการใน JavaScript ซึ่งvar x = 3; var x = 5เป็นสิ่งที่ถูกกฎหมายอย่างสมบูรณ์ ในมาตรฐาน ECMAScript 6 ใหม่letข้อความห้ามสิ่งนี้

บทความนี้โดย @kangax ทำงานได้อย่างยอดเยี่ยมในฟังก์ชั่น demystifying ใน javascript

หากดูเหมือนไม่มีใครตอบคำถามติดตามของคุณฉันจะตอบที่นี่แม้ว่าโดยทั่วไปคุณควรถามคำถามติดตามผลเป็นคำถามแยกต่างหาก

คุณถามว่าทำไมถึงเป็นแบบนี้:

var f = new function() {
    console.log("Me original.");
}

function f() {
    console.log("Me duplicate.");
}

f();

พิมพ์ "Me original" แล้วเกิดข้อผิดพลาด

สิ่งที่เกิดขึ้นที่นี่คือnewสาเหตุที่ฟังก์ชันถูกใช้เป็นตัวสร้าง ดังนั้นสิ่งนี้จึงเทียบเท่ากับสิ่งต่อไปนี้:

function myConstructor() {
    console.log("Me original.");
}
var f = new myConstructor();

function f() {
    console.log("Me duplicate.");
}

f();

และต้องขอบคุณฟังก์ชั่นยกที่เบนจามินอธิบายข้างต้นนั้นเทียบเท่ากับสิ่งนี้:

var myConstructor = function() {
    console.log("Me original.");
};
var f = function() {
    console.log("Me duplicate.");
};

f = new myConstructor();

f();

นิพจน์นี้:

var f = new function() {
    console.log("Me original.");
}

ทำให้อ็อบเจ็กต์ใหม่ถูกสร้างและกำหนดให้fโดยใช้ฟังก์ชันที่ไม่ระบุชื่อเป็นตัวสร้าง "ฉันเป็นคนเดิม" ถูกพิมพ์ออกมาในขณะที่ตัวสร้างดำเนินการ แต่อ็อบเจ็กต์ที่สร้างขึ้นนั้นไม่ใช่ฟังก์ชันดังนั้นเมื่อดำเนินการในที่สุด:

f();

คุณได้รับข้อผิดพลาดเนื่องจากfไม่ใช่ฟังก์ชัน

ยกโทษให้ฉันหากนี่เป็นวิธีที่ผิดในการเพิ่มประเด็น ฉันไม่ได้อยู่แถวนี้มากนักและยินดีต้อนรับการชี้นำและ / หรือคำวิจารณ์ที่สร้างสรรค์

คำตอบของเบนจามินตอบคำถามของ OP ได้อย่างดีเยี่ยม แต่ฉันต้องการเพิ่มการปรับแต่งหนึ่งอย่างที่จะทำให้เราได้รับชมการชักรอกและความแปลกประหลาดของมัน

หากเราเริ่มต้นรหัสเดิมด้วยการเรียกร้องfให้ทำดังนี้:

f();

var f = function() {
   console.log("Me original.");
};

function f() {
   console.log("Me duplicate.");
}

f();

ผลลัพธ์จะเป็น:

Me duplicate.
Me original.

เหตุผลที่เป็นเช่นนั้นvarและfunctionข้อความถูกยกขึ้นในรูปแบบที่แตกต่างกันเล็กน้อย

สำหรับvarการประกาศถูกย้ายไปที่ด้านบนสุดของขอบเขตปัจจุบัน * แต่การมอบหมายใด ๆจะไม่ถูกยกขึ้น เท่าที่ค่าของ var ที่ประกาศไปจะไม่มีการกำหนดจนกว่าจะถึงบรรทัดการกำหนดเดิม

สำหรับfunctionข้อความทั้งคำประกาศและคำจำกัดความจะถูกยกขึ้น นิพจน์ฟังก์ชันที่ใช้ในvar f = function() {...โครงสร้างจะไม่ถูกยกขึ้น

ดังนั้นหลังจากการชักรอกการดำเนินการจะเหมือนกับว่ารหัสคือ:

var f; // declares var f, but does not assign it.

// name and define function f, shadowing the variable
function f() { 
  console.log("Me duplicate.");
}

// call the currently defined function f
f(); 

// assigns the result of a function expression to the var f,
// which shadows the hoisted function definition once past this point lexically
f = function() { 
  console.log("Me original."); 
}

// calls the function referenced by the var f
f();

* ขอบเขต JavaScript ทั้งหมดเป็นศัพท์หรือฟังก์ชันขอบเขต แต่ดูเหมือนว่ามันจะสับสนในการใช้คำ f ณ จุดนั้น