一、 重要：js中的function函数声明、函数表达式

// 函数声明
// Ex: 会在代码执行之前提前加载到作用域中，即js解析器会优先读取，确保在所有代码执行之前声明已经被解析；所以可以在定义之前调用。
function test(){
document.write("test() invoke!" + "
");
}

// 函数表达式
// Ex: 在代码执行到那一行的时候才会有定义；定义之后才能调用。
var t2 = function(){
document.write("t2() invoke!" + "
");
}

//函数声明：会在代码执行之前提前加载到作用域中
test("1"+name); // test() invoke!14
var name =1;
function test(name){
document.write("test() invoke!" + name + "
");
}
name=2;
test("2"+name); //test() invoke!22

//函数表达式：在代码执行到那一行的时候才会有定义
var t2;
//t2(); // t2 is not a function
test("21"+name); //test() invoke!212
name =3;
test("22"+name); //test() invoke!223
t2 = function(){
document.write("t2() invoke!" + "
");
}

t2(); //正确 t2() invoke!

name=4;
test("3"+name); //test() invoke!34

分析：

1. 为什么是 test() invoke!14?

Js顺序逐行解析完后，name=4， 所以是 test() invoke!14

2. 执行test("2"+name);前 name =2;

// 函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以fnName()形式调用

fnName();
function fnName(){
…
}//正常，因为‘提升’了函数声明，函数调用可在函数声明之前

fnName();
var fnName=function(){
…
}//报错，变量fnName还未保存对函数的引用，函数调用必须在函数表达式之后

var fnName;
fnName();
fnName =function(){
…
}//报错，变量fnName还未保存对函数的引用，函数调用必须在函数表达式之后

var fnName=function(){
alert('Hello World');
}();//函数表达式后面加括号，当javascript引擎解析到此处时能立即调用函数

function fnName(){
alert('Hello World');
}(1);//不会报错，但是javascript引擎只解析函数声明，忽略后面的括号，函数声明不会被调用

function(){
console.log('Hello World');
}();//语法错误，虽然匿名函数属于函数表达式，但是未进行赋值操作，
//所以javascript引擎将开头的function关键字当做函数声明，报错：要求需要一个函数名

// 问题： 它们之间的区别是什么？都会解析到就立即调用，是只参数位置不同。

(function test(arg){
document.write(arg + "
");
}("111")); //传说中推荐写法

(function test(arg){
document.write(arg + "
");
})("222"); //Jquery写法

二、 Js中的私有作用域 和闭包

资料：http://www.jb51.net/article/24101.htm

闭包：在内部定义的函数和变量只能在此范围内有效。形成是否是私有变量的概念。

var i=3;
function init(pa){
alert("外层init："+i+","+pa);
}

(function(pa) {
//私有作用域
var i=2;
//i=2;//这不是私有变量，会修改外层的i
function init(){
alert("内层init："+i+","+pa);
}
init(); //内层init：2,lyn
})('lyn');

init("vergil");//外层init：3,vergil

闭包含义：

闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

什么是闭包：

function f1(){
var n=999;
add=function(){//没用var声明，表示是全局变量。 匿名表达式
n+=1;
}
function f2(){
document.write(n+"
");
}
return f2;
}
var result=f1();//result指向的是f1()的返回值,不是f1，二是f2的匿名
result();// 999
add();
result();//

f2函数就是闭包，f2可以访问f1的内部变量n。

函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

原因：在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后被垃圾回收机制（garbage collection）回收。

当内部函数在定义它的作用域的外部被引用时,就创建了该内部函数的闭包；

如ex，f2定义在f1内部，但在f1的外部被引用了，既result();

如果内部函数引用了外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被释放,因为闭包需要它们.

如ex，f2函数内部使用了外部的n；在var result=f1();调用完后。result指向f2，f1()结束调用。但此时不会释放局部变量n；因为n还被f2所用。

闭包注意事项：

1） 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。

解决方法: 在退出函数之前，将不使用的局部变量全部删除。

2） 闭包会在父函数外部，改变父函数内部变量的值。

所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

通过Jquery源码理解闭包/私有变量：

// Jquery的定义可以理解为：
(function(){
var a=…
})(jQuery);
// 此时，保护了内部的a不会被外部/全局变量修改。

几个理解js闭包的示例：

1、

var name = "The Window";
var object = {
　　name : "My Object",
　　getNameFunc : function(){
　　　　return function(){
　　　　　　return this.name;
　　　};
　　}
};
alert(object.getNameFunc()()); //The Window

解析： object.getNameFunc()()实质， var temp = object.getNameFunc();

temp() 等价于 window.temp(); // 此时调用的this是window，即全局变量

2、

function outerFun()
{
var a=0;
function innerFun()
{
a++;
alert(a);
}
}
innerFun(); //error

解析：outerFun外部无法调用内部方法。

3、

function outerFun()
{
var a=0;
function innerFun()
{
a++;
alert(a);
}
return innerFun; //注意这里
}
var obj1=outerFun();
obj1(); //
obj1(); //
var obj2=outerFun();
obj2(); //
obj2(); //

解析： JS对象之间是独立的

三、 Js中的私有变量 （结合闭包理解）

资料：http://www.cnblogs.com/zhaobing/archive/2014/07/10/3836698.html

1. 特权函数构造器

name属性在每个对象中都有一份，不会引起共享错误，getName和setName方法是用闭包形式访问name变量，这样避免了外部环境对Person的name变量的访问，只能通过函数对Person的name变量访问;

function Person(name){
this.getName = function(){
return name;
};
this.setName = function(value){
name = value;
};
}
var person = new Person('Lyn');
document.write(person.getName()+"
"); //Lyn
person.setName('Vergil');
document.write(person.getName()+"
"); //Vergil

//构造函数模式实现私有变量（通过闭包实现）
function Person(nameStr){
var name = nameStr;//私有变量
this.age = 15;//公有变量
this.getName = function(){
return name;
};
this.setName = function(value){
name = value;
};
this.getInfo = function(){
document.write(name + " " +this.age + "
");
};
}
var p1 = new Person('Lyn');
var p2 = new Person('Vergil');
p1.getInfo(); //Lyn 15
p2.getInfo(); //Vergil 15
p1.setName('VergiLyn');
p1.getInfo(); //VergiLyn 15
p2.getInfo(); //Vergil 15

问题： 每次调用时都会创建函数对象，耗费资源，函数不可以共享。

2. 静态变量 （其实就是单例）

//静态私有变量
(function() {
var name = "NULL";//静态私有，被所有实例所共享
//js中不加var其实就是定义全局变量
Person = function(value) { //默认为全局变量了 ，可以被外部访问
name = value;
};
Person.prototype.getName = function() {
return name;
};
Person.prototype.setName = function(value) {
name = value;
};
})();

var person1 = new Person("Lyn");
document.write(person1.getName()+ "," + name+"
"); //"Lyn",""
person1.setName("Dante");
document.write(person1.getName()+ "," + name +"
"); //"Dante",""

var person2 = new Person("Vergil");
document.write(person1.getName()+","+name+"
"); //"Vergil",""
document.write(person2.getName()+","+name+"
"); //"Vergil",""
document.write(sss); //error：sss undefined

注意：可以访问到name，但值并不是想象中的Lyn、Dante，也不是初始值"NULL"或者undefined。

忘记当初这js在哪测试的了，但我在写的时候去w3s和runoob测试了下，貌似结果不一样。

四、 Js中的true/false

false：undefined、null、false、""、0

typeof undefined // undefined

typeof null // object

null === undefined // false

null == undefined // true

五、 Js中的 typeof

typeof 一般只能返回如下几个结果：

number,boolean,string,function,object,undefined

ex:

typeof "John" // 返回 string

typeof 3.14 // 返回 number

typeof false // 返回 boolean

typeof [1,2,3,4] // 返回 object

typeof {name:'John', age:34} // 返回 object

六、 Js中的 === 、==

// ===：类型 和 值 全相等；

// ==：只比较值相等；

null === undefined // false

null == undefined // true

var o = new Object("s"); //object

var s = "s"; //string

/** 注意Jquery提供的方法的趋避 */

document.write($.type(o) + "
");// string

document.write((typeof o ) + "
");// object

document.write($.type(s) + "
");// string

document.write((typeof s ) + "
");// string

document.write((o == s) + "
"); // true

document.write((o === s) + "
"); // false

七、 Js中的call / apply

call / apply的作用是一样的，都是js内置。

区别： 参数形式不一样；

*.call(obj,arg1…)

*.apply(obj,argArray)

作用：

Ex:

var temp = new TempObj();

var lyn = new LynObj(1,"vergilyn");

temp.tempMethod(lyn,arg1,arg2)

TempObj()中存在方法tempMethod(arg1,arg2)

LynObj()中不存在，现在用LynObj对象的this去调用TempObj的tempMethod()方法。

即，temp内部的this指针不指向temp而是lyn。

八、 重要：js中的prototype

函数运行时会先去本体的函数中去找，如果找到则运行，找不到则去prototype中寻找函数。（或者可以理解为prototype不会克隆同名函数）

访问顺序，先 本体 -> 原型链prototype ；当在本体找到同名时，就调用了，不会再去寻找prototype的了。

var LynObj = function(id,name){
this.name = name;
this.id = id;
this.show=function(){
alert("本体中同名的show():"+this.name);
}
}
//LynObj的原型 要写在 new LynObj()之前
LynObj.prototype={
age:24,
id:-1,
show:function(){}, //本体中有，不会调用此方法
add:function(a1,a2){
alert("add: " + a1 + " + " + a2 +" = " + (a1+a2));
}
};
var lyn = new LynObj(1,"vergilyn");
lyn.show(); //本体中的同名show()：vergilyn
alert(lyn.age); //
alert(lyn.id); //1,对象本身的，不是prototype中的
lyn.add(2,4); //add: 2 + 4 = 6

问题：  1、 如果想调用prototype中的同名方法， 以上写法是不可以的。

解决：

var TempObj = function(){ //为了能调用prototype中的全部属性/方法
this.age = 24;
this.name = "dante";
this.show = function(){
alert("prototype中同名的show():"+this.name);
},
this.add = function(a1,a2){
alert("add: " + a1 + " + " + a2 +" = " + (a1+a2));
}
};
LynObj.prototype= new TempObj();

var temp = new TempObj()
var lyn = new LynObj(1,"vergilyn");
lyn.show(); //本体中的同名show()：vergilyn
alert(lyn.age); //
alert(lyn.name);//vergilyn
lyn.add(2,4); //add: 2 + 4 = 6
temp.show.call(lyn);//prototype中同名的show():vergilyn

/* call 或者 apply 是js内置； 把temp中的this改为lyn对象，调用show()
* 区别: call(obj,arg1…)， apply(obj,argArrays)
*/

九、 JS中的for-in / in， 形式 for(name in obj) / name in obj

for-in：循环遍历对象/数组，name表示对象的属性/数组的下标。

in：判断name是否是obj的直接属性。返回true/false

注：in判断的是直接属性，见ex

var obj = {"a1":{"b1":"b1","b2":"b2"},"a2":"a2","a3":"a3"};
for(name in obj){
document.write(name + ":" + obj[name] + "
");
// a1:[Object] a2:a2 a3:a3
}

var arr = [1,3,5];
for(index in arr){
document.write(index + ":" + arr[index] + "
");
//0:1 1:3 2:5
}
document.write(("b1" in obj) + "
"); // false
document.write(("b1" in obj.a1) + "
"); // true

document.write(("a3" in obj) + "
"); // true
document.write(("a4" in obj) + "
"); // false

// "1" / 1 都表示下标 js的2中调用 obj.name 等价于 obj[name]
document.write(("1" in arr) + "
"); // true
document.write((1 in arr) + "
"); // true

十、 Jquery的扩展extend

1、 jQuery.extend: jQuery类的 类方法;对jQuery类扩展， 只需 jQuery.extend(…)；

/** 为jQuery类扩展的一些类方法。Jquery部分源码 */
jQuery.extend({
expando:"jQuery"+(version+Math.random()).replace( /\D/g, "" ),
isFunction: function( obj ) {
return jQuery.type( obj ) === "function";
},
isEmptyObject: function( obj ) { //判断是不是empty对象，
var name; // name = undefined
for ( name in obj ) {return false;}
return true;
}
)}

2、 jQuery.fn.extend: 因为 jQuery.fn = jQuery.prototype； 所以定义了jQuery的对象方法; 对jQuery对象扩展，只需 jQuery.fn.extend(…)；

jQuery.fn.extend( {
filter: function( selector ) {
return this.pushStack( winnow( this, selector || [], false ) );
},
not: function( selector ) {
return this.pushStack( winnow( this, selector || [], true ) );
}
)}

特别：

1. 根据实际的参数，判断是对jQuery的扩展(不管是类/对象)，还是这是个工具类。

2. 区分深复制/浅复制的区别。

深复制：会递归处理对象中的对象。

浅复制：(可理解为)把对象中的对象当作是属性。

// jQuery-1.12.3 sourcecode：
jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
target = arguments[ 0 ] || {}, //arguments js函数内置属性， 表示函数实际接收到的参数。类似数组，实质不是数组
i = 1,
length = arguments.length,
deep = false; //是否深复制

// Handle a deep copy situation  
// Lyn：判断深复制情况   ； arguments\[0\] true深复制  false浅复制  
/\*\* 深复制 浅复制 区别： 深复制会递归处理复杂对象  
 \*     ex：  
 \*         var dest={};  
 \*         var result=$.extend( true/false,  dest,  
                { name: "John", location: {city: "Boston",county:"USA"} },  
                { last: "Resig", location: {state: "MA",county:"China"} } ); 

 \*      深复制： dest = {name:"John",last:"Resig",  
 \*                        location:{city:"Boston",state:"MA",county:"China"}}  
 \*  
 \*      浅复制： dest = {name:"John",last:"Resig",  
 \*                        location:{state:"MA",county:"China"}}  
 \*  
 \*/  
if ( typeof target === "boolean" ) {  
    deep = target;  
    target = arguments\[ i \] || {};//i默认1  
    i++;  
}

// Handle case when target is a string or something (possible in deep copy)  
// 当target不是object 或者 function 时，设置成{} 空内容的对象  
if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {  
    target = {};  
}

// 判断是不是对jQuery自身进行扩展。  
// jQuery.extend()   : 扩展jQuery类  
// jQuery.fn.extend(): 扩展jQuery对象  
if ( i === length ) {  
    target = this; //this指 jQuery(类) 或者 jQuery.fn(jQuery实际的对象)；所以，此if表示判断对jQuery自身的扩展(类/对象)  
    i--;  
}

for( ; i < length; i++ ) {//因为数组循环,所以arguments后面的值覆盖之前的

    // Only deal with non-null/undefined values  
    if ( ( options = arguments\[ i \] ) != null ) {  

//同时赋值临时变量options
// Extend the base object ****核心的继承逻辑 for循环****
for ( name in options ) {
src = target[ name ]; //可以理解为 json的 target.name
copy = options[ name ];
// Prevent never-ending loop 防止无限循环
if ( target === copy ) {
//目标对象和要拷贝的对象 恒相等，就(不复制)执行下一个循环
continue;
}
//Recurse if we're merging plain objects or arrays递归如果我们合并对象/数组
if ( deep && copy
&& ( jQuery.isPlainObject(copy)
|| (copyIsArray = jQuery.isArray(copy))
//同时赋值临时变量copyIsArray
)
) { //深复制 用递归处理合并的如果是 对象 或 数组

                if ( copyIsArray ) {  
                    copyIsArray = false;  
                    clone = src && jQuery.isArray( src ) ? src : \[\];

                } else {  
                    clone = src && jQuery.isPlainObject( src ) ? src : {};  
                }

// Never move original objects, clone them 从不移动原始对象， 把新的克隆进去
// Lyn: 递归处理 对象 或 数组
target[ name ] = jQuery.extend( deep, clone, copy );

            // Don't bring in undefined values 不增加一个undefined的值  
            } else if ( copy !== undefined ) { //浅复制  
                target\[ name \] = copy;  
            }  
        }  
    }  
}  
return target;//返回自定义的目标对象，  

// 注：因为target = arguments[0/1]所以参数0/1如果是对象，其对象结构会被改变
// 或者 为了扩展jQuery，Jquery对象被改变
};