Tại sao các tên hàm JavaScript của tôi xung đột?

Tôi đã viết đoạn mã sau chỉ để xem điều gì sẽ xảy ra khi một biến và một hàm có chức năng được gán cho nó có tên xung đột:

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

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

f();

Đầu ra tôi nhận được là "Bản gốc của tôi". Tại sao hàm khác không được gọi?

Ngoài ra, nếu tôi thay đổi bài tập ban đầu của mình thành var f = new function() {, tôi nhận được "Tôi là bản gốc", theo sau là câu nói TypeError object is not a function. Ai đó có thể vui lòng giải thích?

Khai báo hàm được kéo (chuyển lên trên cùng) trong JavaScript. Mặc dù không chính xác về thứ tự phân tích cú pháp, mã bạn có về mặt ngữ nghĩa giống như mã sau vì khai báo hàm được lưu trữ:

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


f();

Lần lượt, ngoại trừ tên của hàm giống như:

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


f();

Do đó, do cẩu biến đổi giống như:

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

f();

Điều này giải thích những gì bạn nhận được, bạn đang ghi đè chức năng. Nói chung, nhiều varkhai báo được cho phép trong JavaScript - var x = 3; var x = 5hoàn toàn hợp pháp. Trong tiêu chuẩn ECMAScript 6 mới, các letcâu lệnh cấm điều này.

Bài viết này của @kangax thực hiện một công việc tuyệt vời trong việc giải mã các hàm trong javascript

Nếu có vẻ như không có ai trả lời câu hỏi tiếp theo của bạn, vì vậy tôi sẽ trả lời nó ở đây, mặc dù bạn thường đặt các câu hỏi tiếp theo dưới dạng các câu hỏi riêng biệt.

Bạn đã hỏi tại sao điều này:

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

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

f();

in ra "Bản gốc của tôi." và sau đó là một lỗi.

Điều đang xảy ra ở đây là newnguyên nhân khiến hàm được sử dụng như một hàm tạo. Vì vậy, điều này tương đương với sau:

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

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

f();

Và nhờ chức năng nâng đỡ mà Benjamin đã giải thích, phần trên về cơ bản tương đương với cái này:

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

f = new myConstructor();

f();

Biểu thức này:

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

khiến một đối tượng mới được xây dựng và gán cho f, bằng cách sử dụng một hàm ẩn danh làm phương thức khởi tạo. "Tôi nguyên bản." được in ra khi hàm tạo thực thi. Nhưng đối tượng được xây dựng tự nó không phải là một hàm, vì vậy khi điều này cuối cùng thực thi:

f();

bạn gặp lỗi, vì fkhông phải là một hàm.

Thứ lỗi cho tôi nếu đây là cách tiếp cận sai để thêm điểm. Tôi đã không ở đây nhiều, và sẽ hoan nghênh sự chỉ đạo và / hoặc chỉ trích mang tính xây dựng.

Câu trả lời của Benjamin giải quyết câu hỏi của OP một cách xuất sắc, nhưng tôi muốn thêm một điều chỉnh sẽ cho chúng ta một chuyến tham quan đầy đủ về việc nâng cẩu và những điều kỳ lạ của nó.

Nếu chúng ta bắt đầu mã gốc bằng lệnh gọi tới f, như sau:

f();

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

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

f();

Đầu ra sau đó sẽ là:

Me duplicate.
Me original.

Lý do là varvà các functiontuyên bố được lưu trữ theo những cách hơi khác nhau.

Đối với varcác tờ khai được chuyển đến phía trên của phạm vi * hiện tại, nhưng bất kỳ chuyển nhượng không được kéo lên. Theo như giá trị của var đã khai báo, nó không được xác định cho đến khi đạt đến dòng gán ban đầu.

Đối với các functioncâu lệnh , cả khai báo và định nghĩa đều được lưu trữ. Biểu thức hàm , như được sử dụng trong var f = function() {...cấu trúc, không được nâng lên.

Vì vậy, sau khi lưu trữ, việc thực thi giống như mã là:

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();

* Tất cả phạm vi JavaScript đều là từ vựng, hoặc hàm, phạm vi, nhưng có vẻ như nó sẽ khiến mọi thứ nhầm lẫn khi sử dụng từ f vào thời điểm đó.