In this post, we will learn JavaScript’s variable scope and hoisting and all the idiosyncrasies of both.

We must understand how variable scope and variable hoisting work in JavaScript, if want to understand JavaScript well. These concepts may seem straightforward; they are not. Some important subtleties exist that we must understand, if we want to thrive and excel as JavaScript developers.

Receive Updates

Variable Scope

A variable’s scope is the context in which the variable exists. The scope specifies from where you can access a variable and whether you have access to the variable in that context.

Variables have either a local scope or a global scope.

Local Variables (Function-level scope)

Unlike most programming languages, JavaScript does not have block-level scope (variables scoped to surrounding curly brackets); instead, JavaScript has function-level scope. Variables declared within a function are local variables and are only accessible within that function or by functions inside that function. See my post on for more on accessing variables in outer functions from inner functions.

Demonstration of Function-Level Scope

	var name = "Richard";

	function showName () {
	var name = "Jack"; // local variable; only accessible in this showName function
	console.log (name); // Jack
	}
	console.log (name); // Richard: the global variable

No Block-Level Scope

	var name = "Richard";
	// the blocks in this if statement do not create a local context for the name variable
	if (name) {
	name = "Jack"; // this name is the global name variable and it is being changed to "Jack" here
	console.log (name); // Jack: still the global variable
	}

	// Here, the name variable is the same global name variable, but it was changed in the if statement
	console.log (name); // Jack

If You Don’t Declare Your Local Variables, Trouble is Nigh

Always declare your local variables before you use them. In fact, you should use to check your code for syntax errors and style guides. Here is the trouble with not declaring local variables:

	// If you don't declare your local variables with the var keyword, they are part of the global scope
	var name = "Michael Jackson";

	function showCelebrityName () {
	console.log (name);
	}

	function showOrdinaryPersonName () {
	name = "Johnny Evers";
	console.log (name);
	}
	showCelebrityName (); // Michael Jackson

	// name is not a local variable, it simply changes the global name variable
	showOrdinaryPersonName (); // Johnny Evers

	// The global variable is now Johnny Evers, not the celebrity name anymore
	showCelebrityName (); // Johnny Evers

	// The solution is to declare your local variable with the var keyword
	function showOrdinaryPersonName () {
	var name = "Johnny Evers"; // Now name is always a local variable and it will not overwrite the global variable
	console.log (name);
	}

Local Variables Have Priority Over Global Variables in Functions

If you declare a global variable and a local variable with the same name, the local variable will have priority when you attempt to use the variable inside a function (local scope):

	var name = "Paul";

	function users () {
	// Here, the name variable is local and it takes precedence over the same name variable in the global scope
	var name = "Jack";

	// The search for name starts right here inside the function before it attempts to look outside the function in the global scope
	console.log (name);
	}

	users (); // Jack

Global Variables

All variables declared outside a function are in the global scope. In the browser, which is what we are concerned with as front-end developers, the global context or scope is the window object (or the entire HTML document).

Any variable declared or initialized outside a function is a global variable, and it is therefore available to the entire application. For example:

	// To declare a global variable, you could do any of the following:
	var myName = "Richard";

	// or even
	firstName = "Richard";

	// or
	var name; //
	name;
	</pre>

If a variable is initialized (assigned a value) without first being declared with the var keyword, it is automatically added to the global context and it is thus a global variable:

	function showAge () {
	// Age is a global variable because it was not declared with the var keyword inside this function
	age = 90;
	console.log(age);//
	}

	showAge (); // 90

	// Age is in the global context, so it is available here, too
	console.log(age); // 90

Demonstration of variables that are in the Global scope even as they seem otherwise:

	// Both firstName variables are in the global scope, even though the second one is surrounded by a block {}.
	var firstName = "Richard";
	{
	var firstName = "Bob";
	}

	// To reiterate: JavaScript does not have block-level scope

	// The second declaration of firstName simply re-declares and overwrites the first one
	console.log (firstName); // Bob

Another example

	for (var i = 1; i <= 10; i++) {
	console.log (i); // outputs 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
	};

	// The variable i is a global variable and it is accessible in the following function with the last value it was assigned above
	function aNumber () {
	console.log(i);
	}

	// The variable i in the aNumber function below is the global variable i that was changed in the for loop above. Its last value was 11, set just before the for loop exited:
	aNumber (); // 11

setTimeout Variables are Executed in the Global Scope

Note that all functions in setTimeout are executed in the global scope. This is a tricky bit; consider this:

	// The use of the "this" object inside the setTimeout function refers to the Window object, not to myObj

	var highValue = 200;
	var constantVal = 2;
	var myObj = {
	highValue: 20,
	constantVal: 5,
	calculateIt: function () {
	setTimeout (function () {
	console.log(this.constantVal * this.highValue);
	}, 2000);
	}
	}

	// The "this" object in the setTimeout function used the global highValue and constantVal variables, because the reference to "this" in the setTimeout function refers to the global window object, not to the myObj object as we might expect.

	myObj.calculateIt(); // 400
	// This is an important point to remember.

Do not Pollute the Global Scope

If you want to become a JavaScript master, which you certainly want to do (otherwise you will be watching Honey Boo Boo right now), you have to know that it is important to avoid creating many variables in the global scope, such as this:

	// These two variables are in the global scope and they shouldn't be here
	var firstName, lastName;

	function fullName () {
	console.log ("Full Name: " + firstName + " " + lastName );
	}

This is the improved code and the proper way to avoid polluting the global scope

	// Declare the variables inside the function where they are local variables

	function fullName () {
	var firstName = "Michael", lastName = "Jackson";

	console.log ("Full Name: " + firstName + " " + lastName );
	}

In this last example, the function fullName is also in the global scope.

Variable Hoisting

All variable declarations are hoisted (lifted and declared) to the top of the function, if defined in a function, or the top of the global context, if outside a function.

It is important to know that only variable declarations are hoisted to the top, not variable initialization or assignments (when the variable is assigned a value).

Variable Hoisting Example:

	function showName () {
	console.log ("First Name: " + name);
	var name = "Ford";
	console.log ("Last Name: " + name);
	}

	showName ();
	// First Name: undefined
	// Last Name: Ford

	// The reason undefined prints first is because the local variable name was hoisted to the top of the function
	// Which means it is this local variable that get calls the first time.
	// This is how the code is actually processed by the JavaScript engine:

	function showName () {
	var name; // name is hoisted (note that is undefined at this point, since the assignment happens below)
	console.log ("First Name: " + name); // First Name: undefined

	name = "Ford"; // name is assigned a value

	// now name is Ford
	console.log ("Last Name: " + name); // Last Name: Ford
	}

Function Declaration Overrides Variable Declaration When Hoisted

Both function declaration and variable declarations are hoisted to the top of the containing scope. And function declaration takes precedence over variable declarations (but not over variable assignment). As is noted above, variable assignment is not hoisted, and neither is function assignment. As a reminder, this is a function assignment: var myFunction = function () {}.

Here is a basic example to demonstrate:

	// Both the variable and the function are named myName
	var myName;
	function myName () {
	console.log ("Rich");
	}

	// The function declaration overrides the variable name
	console.log(typeof myName); // function

	// But in this example, the variable assignment overrides the function declaration
	var myName = "Richard"; // This is the variable assignment (initialization) that overrides the function declaration.

	function myName () {
	console.log ("Rich");
	}

	console.log(typeof myName); // string

It is important to note that function expressions, such as the example below, are not hoisted.

	var myName = function () {
	console.log ("Rich");
	}

In strict mode, an error will occur if you assign a variable a value without first declaring the variable. Always declare your variables.

Be good. Sleep well. And enjoy coding.

~~~~~~~~~~~~~~~~~~~~~~~

Understand JavaScript Closures With Ease

feb. 2 2013

Closures allow JavaScript programmers to write better code. Creative, expressive, and concise. We frequently use closures in JavaScript, and, no matter your JavaScript experience, you will undoubtedly encounter them time and again. Sure, closures might appear complex and beyond your scope, but after you read this article, closures will be much more easily understood and thus more appealing for your everyday JavaScript programming tasks.

This is a relatively short (and sweet) post on the details of closures in JavaScript. You should be familiar with before you read further, because to understand closures you must understand JavaScript’s variable scope.

Receive Updates

What is a closure?

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s argumentsobject, however, even though it can call the outer function’s parameters directly.

You create a closure by adding a function inside another function.

A Basic Example of Closures in JavaScript: 

function showName (firstName, lastName) { var nameIntro = "Your name is ";    // this inner function has access to the outer function's variables, including the parameterfunction makeFullName () {         return nameIntro + firstName + " " + lastName;     }return makeFullName (); } showName ("Michael", "Jackson"); // Your name is Michael Jackson

Closures are used extensively in Node.js; they are workhorses in Node.js’ asynchronous, non-blocking architecture. Closures are also frequently used in jQuery and just about every piece of JavaScript code you read.

A Classic jQuery Example of Closures: 

$(function() {var selections = []; $(".niners").click(function() { // this closure has access to the selections variableselections.push (this.prop("name")); // update the selections variable in the outer function's scope});});

Closures’ Rules and Side Effects

Closures have access to the outer function’s variable even after the outer function returns:
One of the most important and ticklish features with closures is that the inner function still has access to the outer function’s variables even after the outer function has returned. Yep, you read that correctly. When functions in JavaScript execute, they use the same scope chain that was in effect when they were created. This means that even after the outer function has returned, the inner function still has access to the outer function’s variables. Therefore, you can call the inner function later in your program. This example demonstrates:
```
function celebrityName (firstName) {    var nameIntro = "This celebrity is ";    // this inner function has access to the outer function's variables, including the parameter   function lastName (theLastName) {        return nameIntro + firstName + " " + theLastName;    }    return lastName;}var mjName = celebrityName ("Michael"); // At this juncture, the celebrityName outer function has returned.// The closure (lastName) is called here after the outer function has returned above// Yet, the closure still has access to the outer function's variables and parametermjName ("Jackson"); // This celebrity is Michael Jackson 
```

Closures store references to the outer function’s variables; they do not store the actual value.  Closures get more interesting when the value of the outer function’s variable changes before the closure is called. And this powerful feature can be harnessed in creative ways, such as this private variables example first demonstrated by Douglas Crockford: 

function celebrityID () {    var celebrityID = 999;    // We are returning an object with some inner functions    // All the inner functions have access to the outer function's variables    return {        getID: function ()  {            // This inner function will return the UPDATED celebrityID variable            // It will return the current value of celebrityID, even after the changeTheID function changes it          return celebrityID;        },        setID: function (theNewID)  {            // This inner function will change the outer function's variable anytime            celebrityID = theNewID;        }    }}var mjID = celebrityID (); // At this juncture, the celebrityID outer function has returned.mjID.getID(); // 999mjID.setID(567); // Changes the outer function's variablemjID.getID(); // 567: It returns the updated celebrityId variable

Closures Gone Awry

 Because closures have access to the updated values of the outer function’s variables, they can also lead to bugs when the outer function’s variable changes with a for loop. Thus:

// This example is explained in detail below (just after this code box).function celebrityIDCreator (theCelebrities) {    var i;    var uniqueID = 100;    for (i = 0; i < theCelebrities.length; i++) {      theCelebrities[i]["id"] = function ()  {        return uniqueID + i;      }    }        return theCelebrities;}var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];var createIdForActionCelebs = celebrityIDCreator (actionCelebs);var stalloneID = createIdForActionCelebs [0];  console.log(stalloneID.id()); // 103

In the preceding example, by the time the anonymous functions are called, the value of i is 3 (the length of the array and then it increments). The number 3 was added to the uniqueID to create 103 for ALL the celebritiesID. So every position in the returned array get id = 103, instead of the intended 100, 101, 102.

The reason this happened was because, as we have discussed in the previous example, the closure (the anonymous function in this example) has access to the outer function’s variables by reference, not by value. So just as the previous example showed that we can access the updated variable with the closure, this example similarly accessed the i variable when it was changed, since the outer function runs the entire for loop and returns the last value of i, which is 103.

To fix this side effect (bug) in closures, you can use an Immediately Invoked Function Expression (IIFE), such as the following:

function celebrityIDCreator (theCelebrities) {    var i;    var uniqueID = 100;    for (i = 0; i < theCelebrities.length; i++) {        theCelebrities[i]["id"] = function (j)  { // the j parametric variable is the i passed in on invocation of this IIFE            return function () {                return uniqueID + j; // each iteration of the for loop passes the current value of i into this IIFE and it saves the correct value to the array            } () // BY adding () at the end of this function, we are executing it immediately and returning just the value of uniqueID + j, instead of returning a function.        } (i); // immediately invoke the function passing the i variable as a parameter    }    return theCelebrities;}var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];var createIdForActionCelebs = celebrityIDCreator (actionCelebs);var stalloneID = createIdForActionCelebs [0]; console.log(stalloneID.id); // 100var cruiseID = createIdForActionCelebs [1]; console.log(cruiseID.id); // 101

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

原文是一篇很经典的讲解IIFE的文章，很适合收藏。本文虽然是译文，但是直译的很少，而且添加了不少自己的理解。

ps：下文中提到的“立即执行函数”其实就是“立即执行函数表达式”

我们要说的到底是什么？

在javascript中，每一个函数在被调用的时候都会创建一个执行上下文，在该函数内部定义的变量和函数只能在该函数内部被使用，而正是因为这个上下文，使得我们在调用函数的时候能创建一些私有变量。

// makeCounter函数返回的是一个新的函数，该函数对makeCounter里的局部变量i享有使用权

function makeCounter() {

// i只是makeCounter函数内的局部变量

var i = 0;

return function() {

console.log( ++i );

};

}

// 注意counter和counter2是不同的实例，它们分别拥有自己范围里的i变量

var counter = makeCounter();

counter(); // 1

counter(); // 2

var counter2 = makeCounter();

counter2(); // 1

counter2(); // 2

i; // 报错，i没有定义，它只是makeCounter内部的局部变量

很多情况下我们并不需要像以上代码一样初始化很多实例，甚至有时候并不需要返回值。

问题的核心

现在我们定义了一个函数（function foo(){}或者var foo = function(){}），函数名后加上一对小括号即可完成对该函数的调用，比如下面的代码：

1 2	var foo = function(){ /* code */ }; foo();

接着我们来看下面的代码：

1	function(){ /* code */ }(); // SyntaxError: Unexpected token (

报错了，这是为何？这是因为在javascript代码解释时，当遇到function关键字时，会默认把它当做是一个函数声明，而不是函数表达式，如果没有把它显视地表达成函数表达式，就报错了，因为函数声明需要一个函数名，而上面的代码中函数没有函数名。（以上代码，也正是在执行到第一个左括号(时报错，因为(前理论上是应该有个函数名的。）

一波未平一波又起

有意思的是，如果我们给它函数名，然后加上()立即调用，同样也会报错，而这次报错原因却不相同：

1	function foo(){ /* code */ }(); // SyntaxError: Unexpected token )

为什么会这样？在一个表达式后面加上括号，表示该表达式立即执行；而如果是在一个语句后面加上括号，该括号完全和之前的语句不搭嘎，而只是一个分组操作符，用来控制运算中的优先级（小括号里的先运算）。所以以上代码等价于：

1 2	function foo(){ /* code */ } (); // SyntaxError: Unexpected token )

相当于先声明了一个叫foo的函数，之后进行()内的表达式运算，但是()（分组操作符）内的表达式不能为空，所以报错。（以上代码，也就是执行到右括号时，发现表达式为空，所以报错）。

如果想要了解更多，可以参考

立即执行函数（IIFE）

看到这里，相信你一定迫不及待地想知道究竟如何做了吧，其实很简单，只需要用括号全部括起来即可，比如下面这样：

1	(function(){ /* code */ }());

为什么这样就能立即执行并且不报错呢？因为在javascript里，括号内部不能包含语句，当解析器对代码进行解释的时候，先碰到了()，然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。

而立即执行函数并非只有上面的一种写法，写法真是五花八门：

// 最常用的两种写法

(function(){

/* code */ }()); // 老道推荐写法

(function(){

/* code */ })(); // 当然这种也可以

// 括号和JS的一些操作符（如 = && || ,等）可以在函数表达式和函数声明上消除歧义

// 如下代码中，解析器已经知道一个是表达式了，于是也会把另一个默认为表达式

// 但是两者交换则会报错

var i = function(){

return 10; }();

true && function(){

/* code */ }();

0, function(){

/* code */ }();

// 如果你不怕代码晦涩难读，也可以选择一元运算符

!function(){

/* code */ }();

~function(){

/* code */ }();

-function(){

/* code */ }();

+function(){

/* code */ }();

// 你也可以这样

new function(){

/* code */ }

new function(){

/* code */ }() // 带参数

无论何时，给立即执行函数加上括号是个好习惯

通过以上的介绍，我们大概了解通过()可以使得一个函数表达式立即执行。

有的时候，我们实际上不需要使用()使之变成一个函数表达式，啥意思？比如下面这行代码，其实不加上()也不会保错：

1	var i = function(){ return 10; }();

但是我们依然推荐加上()：

1	var i = (function(){ return 10; }());

为什么？因为我们在阅读代码的时候，如果function内部代码量庞大，我们不得不滚动到最后去查看function(){}后是否带有()来确定i值是个function还是function内部的返回值。所以为了代码的可读性，请尽量加上()无论是否已经是表达式。

立即执行函数与闭包的暧昧关系

立即执行函数能配合闭包保存状态。

像普通的函数传参一样，立即执行函数也能传参数。如果在函数内部再定义一个函数，而里面的那个函数能引用外部的变量和参数（闭包），利用这一点，我们能使用立即执行函数锁住变量保存状态。

// 并不会像你想象那样的执行，因为i的值没有被锁住

// 当我们点击链接的时候，其实for循环已经执行完了

// 于是在点击的时候i的值其实已经是elems.length了

var elems = document.getElementsByTagName( 'a' );

for ( var i = 0; i < elems.length; i++ ) {

elems[ i ].addEventListener( 'click', function(e){

e.preventDefault();

alert( 'I am link #' + i );

}, 'false' );

}

// 这次我们得到了想要的结果

// 因为在立即执行函数内部，i的值传给了lockedIndex，并且被锁在内存中

// 尽管for循环结束后i的值已经改变，但是立即执行函数内部lockedIndex的值并不会改变

var elems = document.getElementsByTagName( 'a' );

for ( var i = 0; i < elems.length; i++ ) {

(function( lockedInIndex ){

elems[ i ].addEventListener( 'click', function(e){

e.preventDefault();

alert( 'I am link #' + lockedInIndex );

}, 'false' );

})( i );

}

// 你也可以这样，但是毫无疑问上面的代码更具有可读性

var elems = document.getElementsByTagName( 'a' );

for ( var i = 0; i < elems.length; i++ ) {

elems[ i ].addEventListener( 'click', (function( lockedInIndex ){

return function(e){

e.preventDefault();

alert( 'I am link #' + lockedInIndex );

};

})( i ), 'false' );

}

其实上面代码的lockedIndex也可以换成i，因为两个i是在不同的作用域里，所以不会互相干扰，但是写成不同的名字更好解释。以上便是立即执行函数+闭包的作用。

我为什么更愿意称它是“立即执行函数”而不是“自执行函数”

IIFE的称谓在现在似乎已经得到了广泛推广（不知道是不是原文作者的功劳？），而原文写于10年，似乎当时流行的称呼是自执行函数（Self-executing anonymous function），接下去作者开始为了说明立即执行函数的称呼好于自执行函数的称呼开始据理力争，有点咬文嚼字，不过也蛮有意思的，我们来看看作者说了些什么。

// 这是一个自执行函数，函数内部执行的是自己，递归调用

function foo() {

foo(); }

// 这是一个自执行匿名函数，因为它没有函数名

// 所以如果要递归调用自己的话必须用arguments.callee

var foo = function() {

arguments.callee(); };

// 这可能也算是个自执行匿名函数，但仅仅是foo标志引用它自身

// 如果你将foo改变成其它的，你将得到一个used-to-self-execute匿名函数

var foo = function() {

foo(); };

// 有些人叫它自执行匿名函数，尽管它没有执行自己，只是立即执行而已

(function(){

/* code */ }());

// 给函数表达式添加了标志名称，可以方便debug

// 但是一旦添加了标志名称，这个函数就不再是匿名的了

(function foo(){

/* code */ }());

// 立即执行函数也可以自执行，不过不常用罢了

(function(){

arguments.callee(); }());

(function foo(){

foo(); }());

我的理解是作者认为自执行函数是函数内部调用自己（递归调用），而立即执行函数就如字面意思，该函数立即执行即可。其实现在也不用去管它了，就叫IIFE好了。

最后的旁白：模块模式

立即执行函数在模块化中也大有用处。用立即执行函数处理模块化可以减少全局变量造成的空间污染，构造更多的私有变量。

// 创建一个立即执行的匿名函数

// 该函数返回一个对象，包含你要暴露的属性

// 如下代码如果不使用立即执行函数，就会多一个属性i

// 如果有了属性i，我们就能调用counter.i改变i的值

// 对我们来说这种不确定的因素越少越好

var counter = (function(){

var i = 0;

return {

get: function(){

return i;

set: function( val ){

i = val;

increment: function() {

return ++i;

}

};

}());

// counter其实是一个对象

counter.get(); // 0

counter.set( 3 );

counter.increment(); // 4

counter.increment(); // 5

counter.i; // undefined i并不是counter的属性

i; // ReferenceError: i is not defined (函数内部的是局部变量)

扩展阅读

如果你愿意了解更多内容，特别是关于函数和模块模式的内容，建议阅读下列文章。

. – Dmitry A. Soshnikov

- Mozilla Developer Network

- Juriy “kangax” Zaytsev

- Ben Cherry

- Nick Morgan

~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~

原文：http://javascriptissexy.com/

在JavaScrip中，function是内置的类对象，也就是说它是一种类型的对象，可以和其它String、Array、Number、Object类的对象一样用于内置对象的管理。因为function实际上是一种对象，它可以“存储在变量中，通过参数传递给(别一个)函数(function)，在函数内部创建，从函数中返回结果值”。

因为function是内置对象，我们可以将它作为参数传递给另一个函数，延迟到函数中执行，甚至执行后将它返回。这是在JavaScript中使用回调函数的精髓。本篇文章的剩余部分将全面学习JavaScript的回调函数。回调函数也许是JavaScript中使用最广泛的功能性编程技术，也许仅仅一小段JavaScript或jQuery的代码都会给开发者留下一种神秘感，阅读这篇文章后，也许会帮你消除这种神秘感。

回调函数来自一种著名的编程范式——函数式编程，在基本层面上，函数式编程指定的了函数的参数。函数式编程虽然现在的使用范围变小了，但它一直被“专业的聪明的”程序员看作是一种难懂的技术，以前是这样，未来也将是如此。

幸运的是，函数式编程已经被阐述的像你我这样的一般人也能理解和使用。函数式编程最主要的技术之一就是回调函数，你很快会阅读到，实现回调函数就像传递一般的参数变量一样简单。这项技术如此的简单，以至于我都怀疑为什么它经常被包含在JavaScript的高级话题中去。

什么是回调或高级函数?

回调函数被认为是一种高级函数，一种被作为参数传递给另一个函数(在这称作"otherFunction")的高级函数，回调函数会在otherFunction内被调用(或执行)。回调函数的本质是一种模式(一种解决常见问题的模式)，因此回调函数也被称为回调模式。

思考一下下面这种在jQuery中常用的回调函数：

//Note that the item in the click method's parameter is a function, not a variable.//The item is a callback function$("#btn_1").click(function() {  alert("Btn 1 Clicked");});

正如在前面的例子所看到的，我们传递了一个函数给click方法的形参，click方法将会调用(或执行)我们传递给它的回调函数。这个例子就给出了JavaScript中使用回调函数的一个典型方式，并广泛应用于jQuery中。

细细体味一下另一个基本JavaScript的典型例子：

var friends = ["Mike", "Stacy", "Andy", "Rick"];friends.forEach(function (eachName, index){console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick});

我们再一次用同样的方式传递了一个匿名的函数(没有函数名的函数)给forEach方法，作为forEach的参数。

到目前为止，我们传递了一个匿名的函数作为参数给另一个函数或方法。在看其它更复杂的回调函数之前，让我们理解一下回调的工作原理并实现一个自己的回调函数。

回调函数是如何实现的？

我们可以像使用变量一样使用函数，作为另一个函数的参数，在另一个函数中作为返回结果，在另一个函数中调用它。当我们作为参数传递一个回调函数给另一个函数时，我们只传递了这个函数的定义，并没有在参数中执行它。

当包含(调用)函数拥有了在参数中定义的回调函数后，它可以在任何时候调用(也就是回调)它。

这说明回调函数并不是立即执行，而是在包含函数的函数体内指定的位置“回调”它(形如其名)。所以，即使第一个jQuery的例子看起来是这样：

//The anonymous function is not being executed there in the parameter. //The item is a callback function$("#btn_1").click(function() {  alert("Btn 1 Clicked");});

匿名函数将延迟在click函数的函数体内被调用，即使没有名称，也可以被包含函数通过 arguments对象访问。

回调函数是闭包的

当作为参数传递一个回调函数给另一个函数时，回调函数将在包含函数函数体内的某个位置被执行，就像回调函数在包含函数的函数体内定义一样。这意味着回调函数是闭包的，想更多地了解闭包，请参考作者另一个贴子。从所周知，闭包函数可以访问包含函数的作用域，所以，回调函数可以访问包含函数的变量，甚至是全局变量。

实现回调函数的基本原则

简单地说，自己实现回调函数的时候需要遵循几条原则。

使用命名函数或匿名函数作为回调

在前面的jQuery和forEach的例子中，我们在包含函数的参数中定义匿名函数，这是使用回调函数的通用形式之一，另一个经常被使用的形式是定义一个带名称的函数，并将函数名作为参数传递给另一个函数，例如：

 // global variablevar allUserData = [];// generic logStuff function that prints to consolefunction logStuff (userData) {    if ( typeof userData === "string")    {        console.log(userData);    }    else if ( typeof userData === "object")    {        for (var item in userData) {            console.log(item + ": " + userData[item]);        }    }}// A function that takes two parameters, the last one a callback functionfunction getInput (options, callback) {    allUserData.push (options);    callback (options);}// When we call the getInput function, we pass logStuff as a parameter.// So logStuff will be the function that will called back (or executed) inside the getInput functiongetInput ({name:"Rich", speciality:"JavaScript"}, logStuff);//  name: Rich// speciality: JavaScript

传递参数给回调函数

因为回调函数在执行的时候就和一般函数一样，我们可以传递参数给它。可以将包含函数的任何属性(或全局的属性)作为参数传递回调函数。在上一个例子中，我们将包含函数的options作为参数传递给回调函数。下面的例子让我们传递一个全局变量或本地变量给回调函数：

//Global variablevar generalLastName = "Clinton";function getInput (options, callback) {    allUserData.push (options);// Pass the global variable generalLastName to the callback function    callback (generalLastName, options);}

在执行之前确保回调是一个函数

在调用之前，确保通过参数传递进来的回调是一个需要的函数通常是明智的。此外，让回调函数是可选的也是一个好的实践。

让我们重构一下上面例子中的getInput函数，确保回调函数做了适当的检查。

function getInput(options, callback) {    allUserData.push(options);    // Make sure the callback is a function    if (typeof callback === "function") {    // Call it, since we have confirmed it is callable        callback(options);    }}

如果getInput函数没有做适当的检查(检查callback是否是函数，或是否通过参数传递进来了),我们的代码将会导致运行时错误。

使用含有this对象的回调函数的问题

当回调函数是一个含有this对象的方法时，我们必须修改执行回调函数的方法以保护this对象的内容。否则this对象将会指向全局的window对象(如果回调函数传递给了全局函数)，或指向包含函数。让我们看看下面的代码：

// Define an object with some properties and a method// We will later pass the method as a callback function to another functionvar clientData = {    id: 094545,    fullName: "Not Set",    // setUserName is a method on the clientData object    setUserName: function (firstName, lastName)  {        // this refers to the fullName property in this object      this.fullName = firstName + " " + lastName;    }}function getUserInput(firstName, lastName, callback)  {    // Do other stuff to validate firstName/lastName here    // Now save the names    callback (firstName, lastName);}

在下面的示例代码中，当clientData.setUserName被执行时，this.fullName不会设置clientData 对象中的属性fullName，而是设置window 对象中的fullName，因为getUserInput是一个全局函数。出现这种现象是因为在全局函数中this对象指向了window对象。

getUserInput ("Barack", "Obama", clientData.setUserName);console.log (clientData.fullName);// Not Set// The fullName property was initialized on the window objectconsole.log (window.fullName); // Barack Obama

使用Call或Apply函数保护this对象

我们可以通过使用 Call 或 Apply函数来解决前面示例中的问题。到目前为止，我们知道JavaScript中的每一个函数都有两个方法:Call和Apply。这些方法可以被用来在函数内部设置this对象的内容，并内容传递给函数参数指向的对象。

Call takes the value to be used as the this object inside the function as the first parameter, and the remaining arguments to be passed to the function are passed individually (separated by commas of course). The Apply function’s first parameter is also the value to be used as the thisobject inside the function, while the last parameter is an array of values (or the arguments object) to pass to the function. (该段翻译起来太拗口了，放原文自己体会)

这听起来很复杂，但让我们看看Apply和Call的使用是多么容易。为解决前面例子中出现的问题，我们使用Apply函数如下：

//Note that we have added an extra parameter for the callback object, called "callbackObj"function getUserInput(firstName, lastName, callback, callbackObj)  {    // Do other stuff to validate name here    // The use of the Apply function below will set the this object to be callbackObj    callback.apply (callbackObj, [firstName, lastName]);}

通过Apply函数正确地设置this对象，现在我们可以正确地执行回调函数并它正确地设置clientData对象中的fullName属性。

// We pass the clientData.setUserName method and the clientData object as parameters. The clientData object will be used by the Apply function to set the this object getUserInput ("Barack", "Obama", clientData.setUserName, clientData);// the fullName property on the clientData was correctly setconsole.log (clientData.fullName); // Barack Obama

我们也可以使用Call 函数，但在本例中我们使用的Apply 函数。

多重回调函数也是允许的

我们可以传递多个回调函数给另一个函数，就像传递多个变量一样。这是使用jQuery的AJAX函数的典型例子：

function successCallback() {    // Do stuff before send}function successCallback() {    // Do stuff if success message received}function completeCallback() {    // Do stuff upon completion}function errorCallback() {    // Do stuff if error received}$.ajax({    url:"http://fiddle.jshell.net/favicon.png",    success:successCallback,    complete:completeCallback,    error:errorCallback});

“回调地狱”的问题和解决方案

异步代码执行是一种简单的以任意顺序执行的方式，有时是很常见的有很多层级的回调函数，你看起来像下面这样的代码。下面这种凌乱的代码称作“回调地狱”，因为它是一种包含非常多的回调的麻烦的代码。我是在node-mongodb-native里看到这个例子的，MongoDB驱动Node.js.示例代码就像这样：

var p_client = new Db('integration_tests_20', new Server("127.0.0.1", 27017, {}), {'pk':CustomPKFactory});p_client.open(function(err, p_client) {    p_client.dropDatabase(function(err, done) {        p_client.createCollection('test_custom_key', function(err, collection) {            collection.insert({'a':1}, function(err, docs) {                collection.find({'_id':new ObjectID("aaaaaaaaaaaa")}, function(err, cursor) {                    cursor.toArray(function(err, items) {                        test.assertEquals(1, items.length);                        // Let's close the db                        p_client.close();                    });                });            });        });    });});

你不太可能在自己的代码里碰到这个的问题，但如果你碰到了(或以后偶然碰到了)，那么有以下两种方式解决这个问题。

命名并定义你的函数，然后传递函数名作为回调，而不是在主函数的参数列表里定义一个匿名函数。

模块化：把你的代码划分成一个个模块，这样你可以空出一部分代码块做特殊的工作。然后你可以将这个模型引入到你的大型应用程序中。

实现自己的回调函数

现在你已经完全理解(我相信你已经理解了，如果没有请快速重新阅读一遍)了JavaScript关于回调的所用特性并且看到回调的使用是如此简单但功能却很强大。你应该看看自己的代码是否有机会使用回调函数，有以下需求时你可以考虑使用回调：

避免重复代码 (DRY—Do Not Repeat Yourself)

在你需要更多的通用功能的地方更好地实现抽象(可处理各种类型的函数)。

增强代码的可维护性

增强代码的可读性

有更多定制的功能

实现自己的回调函数很简单，在下面的例子中，我可以创建一个函数完成所用的工作：获取用户数据，使用用户数据生成一首通用的诗，使用用户数据来欢迎用户，但这个函数将会是一个凌乱的函数，到处是if/else的判断，甚至会有很多的限制并无法执行应用程序可能需要的处理用户数据的其它函数。

替而代之的是我让实现增加了回调函数，这样主函数获取用户数据后可以传递用户全名和性别给回调函数的参数并执行回调函数以完成任何任务。

简而言之，getUserInput函数是通用的，它可以执行多个拥有各种功能的回调函数。

// First, setup the generic poem creator function; it will be the callback function in the getUserInput function below.function genericPoemMaker(name, gender) {    console.log(name + " is finer than fine wine.");    console.log("Altruistic and noble for the modern time.");    console.log("Always admirably adorned with the latest style.");    console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");}//The callback, which is the last item in the parameter, will be our genericPoemMaker function we defined above.function getUserInput(firstName, lastName, gender, callback) {    var fullName = firstName + " " + lastName;    // Make sure the callback is a function    if (typeof callback === "function") {    // Execute the callback function and pass the parameters to it    callback(fullName, gender);    }}

调用getUserInput函数并传递genericPoemMaker函数作为回调：

getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);// Output/* Michael Fassbender is finer than fine wine.Altruistic and noble for the modern time.Always admirably adorned with the latest style.A Man of unfortunate tragedies who still manages a perpetual smile.*/

因为getUserInput 函数只处理用户数据的输入，我们可以传递任何回调函数给它。例如我们可以像这样传递一个greetUser函数。

function greetUser(customerName, sex)  {   var salutation  = sex && sex === "Man" ? "Mr." : "Ms.";  console.log("Hello, " + salutation + " " + customerName);}// Pass the greetUser function as a callback to getUserInputgetUserInput("Bill", "Gates", "Man", greetUser);// And this is the outputHello, Mr. Bill Gates

和上一个例子一样，我们调用了同一个getUserInput 函数，但这次却执行了完全不同的任务。

如你所见，回调函数提供了广泛的功能。尽管前面提到的例子非常简单，在你开始使用回调函数的时候思考一下你可以节省多少工作，如何更好地抽象你的代码。加油吧！在早上起来时想一想，在晚上睡觉前想一想，在你休息时想一想……

我们在JavaScript中经常使用回调函数时注意以下几点，尤其是现在的web应用开发，在第三方库和框架中

异步执行(例如读文件，发送HTTP请求)

事件监听和处理

设置超时和时间间隔的方法

通用化：代码简洁

JavaScript Variable Scope and Hoisting Explained

Receive Updates

Understand JavaScript Closures With Ease

Receive Updates

我们要说的到底是什么？

立即执行函数（IIFE）

扩展阅读

什么是回调或高级函数?

回调函数是如何实现的？

实现回调函数的基本原则

“回调地狱”的问题和解决方案

实现自己的回调函数