2015-09-17 9 views
1

Может ли кто-нибудь объяснить мне, как это работает?Функции вызова JavaScript

console.log(func(10)); 
// 20 
var func = function(x) { 
    return x * x; 
} 

console.log(func(10)); 
// 100 
var func = function(x) { 
    return x + x; 
} 

Я хотел знать, как компьютер читает его? Пожалуйста, объясните, насколько это возможно.

EDIT:
Я спрашиваю, потому что я нашел в книге "Красноречивым Javascript" что-то вроде этого:

console.log("The future says:", future()); 

function future() { 
    return "We STILL have no flying cars."; 
} 

И он говорит:

Этот код работает, даже хотя функция определена ниже кода , который использует его. Это связано с тем, что объявления функций не являются частью регулярного потока управления сверху вниз. Они концептуально перемещены в начало их области и могут использоваться всем кодом в этом области. Это иногда полезно, потому что это дает нам право на код заказа таким образом, который кажется значимым, не беспокоясь о , чтобы определить все функции выше их первого использования.

+1

Как указано выше, это * не работает. Он не работает в первой строке, потому что вы не можете вызывать 'undefined' как функцию, но это значение' func' имеет в первой строке. –

ответ

2

Обновление: Повторите свое редактирование, см. Ниже под разделителем.

Код, который вы указали не будет работа. Мы можем изменить порядок его немного, чтобы заставить его работать, хотя:

var func = function(x) { 
    return x * x; 
}; 
console.log(func(10)); // 100 

var func = function(x) { 
    return x + x; 
}; 
console.log(func(10)); // 20 

Вот что происходит с вышесказанным:

  1. Перед любой шаг за шагом выполнение кода, браузер сканирует код для объявлений var. Он находит первый var func и поэтому создает переменную в текущем контексте с этим именем. Затем он находит второй var, но, поскольку имя одно и то же, оно ничего не делает со вторым. На этом этапе func имеет значение undefined. (Этот бит, где он var заранее называется «var hoisting.»)

    Теперь начинается пошаговое выполнение кода.

  2. Двигатель назначает функцию переменной func.

  3. Двигатель вызывает func, минус 10. func10 * 10 (100); двигатель передает это значение в console.log, который записывает его.

  4. Двигатель назначает новую функцию переменной func.

  5. Двигатель вызывает func, минус 10. (200); двигатель передает это значение в console.log, который записывает его.


Так что же случилось с кодом, как вы показали, что это? Вот как двигатель работает код, как в вопросе:

  1. Перед любой шаг за шагом выполнение кода, браузер проверяет код var деклараций и создает переменные, как в # 1 выше.

    Теперь начинается пошаговое выполнение кода.

  2. двигатель пытается вызвать func, но значение в func в настоящее время undefined, и поэтому он не может с ошибкой.


Re правки: код Вы отправили из красноречивых JavaScript очень отличается:

console.log("The future says:", future()); 

function future() { 
    return "We STILL have no flying cars."; 
} 

Это использует объявление функции а, в то время как ваш ранее используемый код функциональные выражения. This question and its answers вдаваться в детали, но декларации и выражения, даже если они выглядят действительно похожими, ведут себя по-разному друг от друга. Вот порядок вещей с вышесказанным:

  1. Двигатель сканирует JavaScript через код ищет объявления функций и обрабатывает их в порядке исходного кода. Таким образом, он видит function future() { ... } и создает функцию, связывая ее с идентификатором области видимости future. Это называется «подъем объявления функций», и это немного похоже на подъемное устройство var, потому что оно происходит до того, как будет выполнен пошаговый код.

    Затем начинается пошаговое выполнение.

  2. Двигатель вызывает функцию future, получает ее возвращаемое значение, а затем вызывает console.log, используя это возвращаемое значение.

+0

Спасибо :). Теперь я понимаю. Я думал, что функция func() {} равна var func = function() {} :) – Steave

+0

@Steave: Ах да, * очень * небольшая разница в синтаксисе, [очень большая разница в том, что происходит] (http: // stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname). –