### 一、对象 ~~~ var obj = {}; obj[true] = "foo"; obj[3] = "bar"; obj[obj] = "baz"; obj["true"]; obj["3"]; obj["[object Object]"]; ~~~ ### 二、数组也是对象 ~~~ var ary = ["foo", 42, "bar"]; ary.baz = "baz"; ary.length; //3 ary.baz; /* 如果试图想数组添加一个属性，但是属性名“看起来”像一个数字，那么它会变成一个数值下标 */ ary["4"] = "baz"; ary.length; //5 ary[4]; ~~~ ### 三、对象属性 writable：可写（修改） enumerable：可枚举（for ... in） configurable：可配置（配置、删除） **注意：delete只能删除对象（可删除）属性，即configurable为true的属性。** ~~~ var obj = {}; Object.defineProperty(obj, "a", {enumerable:true, value:2}); Object.defineProperty(obj, "b", {enumerable:false, value:3}); /* 检查给定属性名是否直接存在于对象中（而不是在原型链上）并满足enumerable:true */ obj.propertyIsEnumerable("a"); //true obj.propertyIsEnumerable("b"); //false /* 返回一个数组，包含所有（自身）可枚举属性 */ Object.keys(obj); //["a"] /* 返回一个数组，包含所有（自身）属性 */ Object.getOwnPropertyNames(obj); //["a", "b"] ~~~ 注意：in和hasOwnProperty(..)的区别在于是否查找[[Prototype]]链，然而，Object.keys(..)和Object.getOwnPropertyNames(..)都只会查找对象直接包含的属性。 ### 四、对象原型 获取对象原型：Object.getPropertyOf(..) ~~~ function Foo(){} var foo = new Foo(); Foo.prototype === Object.getPrototypeOf(foo); //true ~~~ 注意：在面向类的语言中，类可以复制（实例化）多次，就像用模具制作东西一样。在JavaScript中，并没有类似的复制机制。不能创建一个类的多个实例，只能创建多个对象，它们[[property]]关联的是同一个对象。这样就可用通过委托访问对象的属性和方法了。 **类理论：**在构造完成后，通常只需要操作这些实例（而不是类），因为每个实例都有你需要完成任务的所有行为。 ### 五、原型链[[prototype]] [[prototype]]机制就是存在于对象中的一个内部链接，它会引用其他对象。 ~~~ var foo = { something:function(){ // .... } }; var bar = Object.create(foo); // 创建新对象bar，并将其关联到对象foo上。 ~~~ Object.create(null)会创建一个拥有空链接的对象，这个对象无法进行委托，其不存在原型链，所以instanceof总是返回false。其不受原型链干扰，非常适合用来存储数据！ **对象之间的关系不是复制而是委托！！！** 谈及原型链不得不提及我们经常在JavaScript中的类型检查！即内省：检查实例的类型；主要目的是通过创建方式来判断对象的结构和功能。 方式一：a instanceof Foo 方式二：**“鸭子类型”**：如果看起来像鸭子，叫起来像鸭子，那就一定是鸭子。 ~~~ if(a.something) { a.something(); // something()并不一定在a自身上 } ~~~ 方式三：isPrototypeOf()、getPrototypeOf() **建议使用方式三！！！** ### 六、函数 JavaScript中的函数无法（用标准、可靠的方法）真正地复制，所以只能共享函数对象的引用。这意味着，如果修改共享函数，比如增加一个属性，所有引用地方都会随之修改！ ### 七、构造函数 ~~~ function Foo(){} Foo.prototype = {}; var a1 = new Foo(); a1.constructor === Foo; //false a1.constructor === Object; //true ~~~ **详解：** 创建一个新对象并替换了函数默认的.prototype对象引用，那么新对象并不会自动获得.constructor属性。 a1并没有.constructor属性，所以它会委托[[Prototype]]链上的Foo.prototype。但是这个对象也没有.constructor属性，所以它会继续委托给链顶端的Object.protoype。 实际上，对象的.constructor会默认指向一个函数，这个函数可以通过对象的.prototype引用！ **总之，constructor并不表示被构造！！！改变prototype并不能彻底改变继承关系！！！** ~~~ function Foo(name){ this.name = "FenFei" } function Bar(){} ~~~ **错误理解一：** ~~~ Bar.prototype = Foo.prototype; Bar.prototype.myTest = 123; new Foo().myTest; //123 ~~~ 并不会创建一个关联到Bar.prototype的新对象，它只是让Bar.prototype直接引用Foo.prototype对象。当执行类似Bar.prototype.myTest = 123的赋值语句时会直接修改Foo.prototype对象本身。 **错误理解二：** ~~~ Bar.prototype = new Foo(); new Bar("Camile").name; //FenFei ~~~ 的确会创建一个关联到Bar.prototype的新对象。但是它使用了Foo()的“构造函数调用”，如果Foo有副作用（比如注册到其他对象、给this添加数据属性等等），就会影响Bar()的后代。 **正确处理方式一[ES6之前]：** ~~~ Bar.prototype = Object.create(Foo.prototype); Bar.prototype.myTest = 123; new Foo().myTest; //undefined new Bar("Camile").name; //undefined ~~~ **正确处理方式二[ES6之后]：** ~~~ Object.setPrototypeOf(Bar.prototype, Foo.prototype); Bar.prototype.myTest = 123; new Foo().myTest; //undefined new Bar("Camile").name; //undefined ~~~ ### 八、函数关系 （1）在a的整条[[prototype]]链中是否有指向Foo.prototype的对象？ ~~~ a instanceof Foo; ~~~ （2）在a的整条[[prototype]]链中是否出现过Foo.prototype？ ~~~ Foo.prototype.isPrototypeOf(a); // 不需要间接引用函数Foo，它的prototype属性会自动访问。 ~~~ （3）区别 isPrototypeOf()方法可以判断对象间的关系。 b是否出现在c的[[prototype]]链中？ ~~~ b.isPrototypeOf(c); ~~~ **示例：** ~~~ function Foo(){} var a = new Foo(); console.log(a instanceof Foo); // true console.log(Foo.prototype.isPrototypeOf(a)); // true var b = {}; var c = Object.create(b); console.log(b.isPrototypeOf(c)); // true console.log(b instanceof c); // TypeError ~~~ 在传统面向类的语言中，类定义之后就不会进行修改，所以类的设计模式不支持修改。但是JavaScript最强大的特性之一就是它的动态性，任何对象的定义都可以修改（除非你把它设置成不可变）！ [转载请标明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)]

JavaScript中的this，刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要，然而自己并不关心；随着自己对JavaScript一步步深入了解，突然恍然大悟，原来它真的很重要！所以，自己花费了大约2周的时间去查贴、翻阅之前读的书籍，将this的全貌展示如下。 ### 一、this是什么--基于调用位置的上下文；调用位置不同，this值不同。 大家都JavaScript中this存在两个误解： （1）this指向函数自身 （2）this指向函数的作用域 作用域无法通过JavaScript代码访问，它存在于JavaScript引擎内部。每当把this和词法作用域的查找混合使用时，一定要提醒自己，这是无法实现的！ this是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用位置（也就是函数的调用方式）！ 示例： ~~~ var foo = "golbal foo"; var myObj = {foo : 'myObj foo'}; var say = function(){ console.log(this.foo); } myObj.say = say; myObj.say(); //结果：myObj foo say(); //结果：golbal foo ~~~ ### 二、为什么使用this ~~~ var me = { name: "fenfei" }; //不使用this，调用 function speak(name){ console.log("Hello, I'm "+ name); } speak(me.name); //Hello, I'm fenfei //使用this，调用 function speak(){ console.log("Hello, I'm "+ this.name); } speak.call(me); //Hello, I'm fenfei ~~~ this提供了一种更优雅的方式来隐式“传递”对象引用，因此可以将API设计得更加简洁并易于复用。 ### 三. this的四大绑定规则 #### 1. 默认绑定--函数调用类型：独立函数调用，this指向全局对象。 ~~~ var a = "foo"; function foo(){ console.log(this.a); } foo(); // "foo" ~~~ 在严格模式下，全局对象将无法使用默认绑定，因此this会绑定到undefined。 ~~~ var a = "foo"; function foo(){ "use strict"; console.log(this.a); } foo(); // TypeError：this is undefined ~~~ #### 2. 隐式绑定--调用位置是否有上下文对象，或者说被某个对象拥有或者包含 ~~~ function foo(){ console.log(this.a); } var obj1 = { a : 2, foo : foo } var obj2 = { a : 1, obj1 : obj1 } obj2.obj1.foo(); //结果：2 ~~~ 当foo()被调用时，它的落脚点指向obj1对象，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。 对象属性引用链中只有最顶层或者说最后一次层会影响调用位置。 **注意：隐式丢失** 常见的this绑定问题就是“隐式绑定”的函数会丢失绑定对象，也就是“默认绑定”，从而把this绑定到全局对象（严格模式下为undefined）。 ~~~ var a = "foo"; function foo(){ console.log(this.a); } var obj = { a : 2, foo : foo } var bar = obj.foo; bar(); //"foo" ~~~ 虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身，因此此时的bar()其实是不带任何修饰的函数调用，因此应用了默认绑定。 ~~~ var a = "foo"; function foo(){ console.log(this.a); } function doFoo(fn){ //var fn = obj.foo fn(); } var obj = { a : 2, foo : foo } doFoo(obj.foo); //"foo" setTimeout(obj.foo, 100); //"foo" ~~~ 参数传递其实就是一种隐式赋值，因此传入函数式会被隐式赋值（LHS） ### 3. 显示绑定 （1）call、apply （2）硬绑定 ~~~ function foo(){ console.log(this.a); } var obj = { a:2 }; var bar = function(){ foo.call(obj); }; bar(); //2 setTimeout( bar, 1000); //2 bar.call( window ); //2 ~~~ 创建了函数bar()，在其内部手动调用了foo.call(obj)，因此强制把foo的this绑定到了obj上。无论之后如何调用函数bar，总会手动在obj上调用foo。这种显示的强制绑定，称为“硬绑定”。 ### 4. new绑定 new调用函数会自动执行下面操作： （1）创建（或者说构造）一个全新的对象； （2）这个新对象会被执行[[原型]]连接； （3）这个新对象会绑定到函数调用的this； （4）如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。 ### 四、优先级 了解了函数调用中this绑定的四条规则，需要做的就是找到函数的调用位置并判断对应哪条规则。 1. 函数是否是new绑定？如果是，this绑定的是新创建的对象。 ~~~ var bar = new Foo(); ~~~ 2. 函数是否通过call、apply显示绑定或硬绑定？如果是，this绑定的是指定的对象。 ~~~ var bar = foo.call(obj); ~~~ 3. 函数是否在某个上下文对象中隐式调用？如果是，this绑定的是那个上下文对象。 ~~~ var bar = obj.foo(); ~~~ 4. 上述全不是，则使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局window对象。 ~~~ var bar = foo(); ~~~ ### 五、绑定this注意点 ### 1. 忽略this 把null或undefined作为this的绑定对象传入call、apply、bind，调用时会被忽略，实际应用的是默认绑定规则！ ~~~ function foo(){ console.log(this.a); } var a = 1; foo.call(null, 2); //1 foo.apply(undefined, [3]); //1 ~~~ ### 2. 间接引用 ~~~ function foo(){ console.log(this.a); } var a = 2; var o = { a : 3,foo : foo}; var p = { a : 4}; o.foo(); //3 (p.foo = o.foo)(); //2 间接引用 var pfoo = o.foo; pfoo(); //2 隐式丢失 ~~~ 注意：同上述“隐式丢失”结果一样，但是过程不太一样，区分！！ ### 3. ES6箭头函数 箭头函数不使用this的四种标准规则，而是根据外层（函数或者全局）作用域来决定this。 箭头函数的绑定无法被修改。常用于回调函数中，如事件处理器或定时器。和ES6之前代码中的this = self机制一样。 ~~~ function foo(){ setTimeout(()=>{ console.log(this.a); },100); } var obj = { a : 2}; foo.call(obj); ~~~ 等价于： ~~~ function foo(){ var self = this; setTimeout(function(){ console.log(self.a); },100); } var obj = { a : 2}; foo.call(obj); ~~~ ### 六、详解如何确定this #### 1.（隐式绑定）如果某个对象中某个成员是个function，当从这个对象上调用这个方法时this指向当前对象。 ~~~ var FenFei = { firstname:"li", lastname:"gang", timeTravel:function(year){ console.log(this.firstname + " " + this.lastname + " is time traveling to " + year); } } FenFei.timeTravel(2014); //li gang is time traveling to 2014（父/拥有者对象：FenFei） ~~~ #### 2.（隐私绑定）可以通过创建一个新的对象，来引用FenFei对象上的timeTravel方法。 ~~~ var Camile = { firstname:"li", lastname:"yunxia" } Camile.timeTravel = FenFei.timeTravel; Camile.timeTravel(2014); //li yunxia is time traveling to 2014（父/拥有者对象：Camile） ~~~ 注意：此示例同上述“隐式丢失”、“间接引用”区分！！！ #### 3.（隐式丢失）使用变量保存FenFei.timeTravel方法的引用 ~~~ var getTimeTravel = FenFei.timeTravel; getTimeTravel(2014); //undefined undefined is time traveling to 2014（父/拥有者对象：Window；window对象里并没有firstName和lastName属性） ~~~ **PS**：谨记方法中的this将指向调用它的那个父/拥有者对象！无论何时，当一个函数被调用，我们必须看方括号或者是圆括号左边紧邻的位置，如果我们看到一个引用（reference），那么传到function里面的this值就是指向这个方法所属于的那个对象，如若不然，那它就是指向全局对象的。 #### 4. 异步调用的方法内部的this ~~~ <button id="async">点击我</button> ~~~ ~~~ var btnDom = document.getElementById("async"); btnDom.addEventListener('click',FenFei.timeTravel);//undefined undefined is time traveling to [object MouseEvent]（父/拥有者对象：button） btnDom.addEventListener('click',function(e){ FenFei.timeTravel(2014);//li gang is time traveling to 2014（父/拥有者对象：FenFei） }); ~~~ #### 5.（new绑定）构造函数里的this 当使用构造函数创建一个对象的实例时，构造函数里的this就是新建的实例。 ~~~ var TimeTravel = function(fName, lName){ this.firstname = fName; this.lastname = lName; } var FenFei = new TimeTravel("li", "gang"); console.log(FenFei.firstname + " " + FenFei.lastname); //li gang ~~~ #### 6.（显示绑定）call和apply方法设定this值 ~~~ var Camile = { firstname:"li", lastname:"yunxia" } FenFei.timeTravel.call(Camile,2014); //li yunxia is time traveling to 2014（指定this对象为Camile） FenFei.timeTravel.apply(Camile,[2014]); //li yunxia is time traveling to 2014（指定this对象为Camile） ~~~ **PS**：注意和上述“2”处做对比 #### 7.（显示绑定）bind将函数绑定至某个对象（ES5） ~~~ function f(y){ return this.x + y; } var o = {x:1}; /* f.bind(o)返回一个新函数，调用g(2)会把原始的函数f()当作o的方法来调用 */ var g = f.bind(o); g(2); // 3 ~~~ **补充：ES5之前方法模拟bind()方法** ~~~ function myBind(f, o){ if(f.bind){ return f.bind(o); }else{ return function(){ return f.apply(o, arguments); } } } ~~~ bind的作用和apply，call类似都是改变函数的execute context，也就是runtime时this关键字的指向。但是使用方法略有不同。一个函数进行bind后可稍后执行。  ### 七、补充 #### 1. 使用new为函数创建多个实例的时候，这些实例会共享prototype。 当在一个实例里直接给this添加属性的时，会隐藏prototype中与之同名的属性。 如果想访问prototype中的属性值而不是自己的设定的属性值： （1）删除实例自己添加的属性： delete 实例名.属性名 （2）直接访问prototype中的属性：Thing.prototype.name ~~~ function Thing(){} Thing.prototype.name = "leegang"; Thing.prototype.getName = function(){ console.log(this.name); } Thing.prototype.setName = function(newName){ this.name = newName; } Thing.prototype.deleteName = function(){ delete this.name; } var thing = new Thing(); /*thing：Thing {}*/ thing.setName("liyunxia"); /*thing：Thing {name: "liyunxia"}*/ thing.getName(); //结果：liyunxia thing.deleteName(); /*thing：Thing {}*/ thing.getName(); //结果：leegang thing.__proto__为Thing {name: "leegang"} thing.name = "liyunxia"; /*Thing {name: "liyunxia"}*/ thing.getName(); //结果：liyunxia delete thing.name; /*thing：Thing {}*/ thing.getName(); //结果：leegang thing.__proto__为Thing {name: "leegang"} ~~~ #### 2. 柯里化 把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，如果其他的参数是必要的，返回接受余下的参数且返回结果的新函数 ~~~ var sum = function(x, y){ return x + y; } var succ = sum.bind(null, 1); succ(2); //3 function f(y, z){ return this.x + y +z; } var g = f.bind({x:1}, 2); g(3); //6 ~~~ 转载请写明出处：[http://blog.csdn.net/ligang2585116](http://blog.csdn.net/ligang2585116)

JavaScript闭包，是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《[JavaScript闭包](http://blog.csdn.net/ligang2585116/article/details/44702115)》，博客中只是简单阐述了闭包的工作过程和列举了几个示例，并没有去刨根问底，将其弄明白！ 现在随着对JavaScript更深入的了解，也刚读完《**你不知道的JavaScript（上卷）**》这本书，所以乘机整理下，从底层和原理上去刨一下。 JavaScript并不具有动态作用域，它只有词法作用域。词法作用域是在写代码或者说定义时确定的，而动态作用域是在运行时确定的。了解闭包前，首先我们得知道什么是词法作用域（作用域是由书写代码时函数声明的位置来决定的）。 ### 一、何为闭包 #### 示例1： ~~~ function foo(){ var a = 2; function bar(){ console.log(a); } return bar; } var baz = foo(); bzz(); //2 ~~~ 在foo()执行后，通常认为垃圾回收机制会将foo()的整个内部作用域都被销毁；而闭包可以阻止这样事情发生，让其内部作用域依然存在。因为bar()处于foo()内部，它拥有涵盖foo()作用域的闭包，使得该作用域能够一直存活，以供bar()在之后任何时间进行引用。 bar()依然持有对该作用域的引用，而这个引用就叫作**闭包**。 简言之：当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。 #### 示例2： 无论使用何种方式对函数类型的值进行传递，当函数在别处被调用时都可以观察到闭包。 ~~~ function foo(){ var a = 2; function baz(){ console.log(a); } bar(baz); } function bar(fn){ fn(); // 这就是闭包 } ~~~ #### 示例3： 将一个内部函数(timer)传递给setTimeout。timer具有涵盖wait()作用域的闭包，保有对变量message的引用。 wait()执行1000毫秒后，它的作用域并不会消失，timer依然保有wait()作用域的闭包。 ~~~ function wait(message){ setTimeout( function timer(){ console.log(message); },1000); } wait("Hello,ligang"); ~~~ #### 示例4： 下述activator()具有涵盖setupBot()作用域的闭包！ ~~~ function setupBot(name, selector){ $(selector).click(function activator(){ console.log("Activating: "+ name); }); } setupBot("Closure Bot 1", "#bot_1"); setupBot("Closure Bot 2", "#bot_2"); ~~~ ### 二、循环和闭包 ~~~ for(var i=1; i<=5; i++){ setTimeout(function timer(){ console.log(i); }, i*1000); } // 期望：每秒一次的频率输出1~5 // 结果：每秒一次的频率输出五次6 ~~~ 先解释一下：“i*1000”，5个定时分别在1s、2s、3s、4s、5s后执行，并不是1s、3s、6s、10s、15s。也就是频率为1s，不是每次间隔增加1s。如果去掉i写成“1000”，会在for执行完1s后直接输出五次6。 回调函数在循环结束后才被执行，因此输出的是循环终止条件是i值。事实上，当定时器运行时即使每个迭代中执行的是setTimeout(..., 0)，所有的回调函数依然是在循环结束后才被执行。 根据作用域的工作原理，尽管五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个i。 ### 解决方案1： ~~~ for(var i=0; i<=5; i++){ (function(j){ setTimeout(function timer(){ console.log(j); }, j*1000 ); })(i); } // 结果：每秒一次的频率输出1~5 ~~~ 每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问。 ### 解决方案2（ES6）： ~~~ for(var i=0; i<=5; i++){ let j = i; setTimeout(function timer(){ console.log(j); }, j*1000 ); } // 结果：每秒一次的频率输出1~5 ~~~ ~~~ for(let i=0; i<=5; i++){ setTimeout(function timer(){ console.log(i); }, i*1000 ); } // 结果：每秒一次的频率输出五次6 ~~~ ### 三、模块 模块需要具备两个必要条件： （1）必须有外部的封闭函数，该函数必须至少被调用一次（每次调用都会创建一个新的模块实例）。 （2）封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有的状态。 #### 典型的模块化： ~~~ function CoolMoudle(){ var something = "cool"; var doSomething = function(){ console.log(something); } return{ doSomething: doSomething }; } var foo = CoolMoudle(); //如果不执行外部函数CoolMoudle()，内部作用域和闭包都无法创建 foo.doSomething(); //cool ~~~ #### 单例模式： ~~~ var foo = (function CoolModule(id){ function change(){ // 修改公共API publicAPI.identify = identify2; } function identify1(){ console.log(id); } function identify2(){ console.log(id.toUpperCase()); } var publicAPI = { change: change, identify: identify1 }; return publicAPI; })("foo module"); foo.identify(); //foo module foo.change(); foo.identify(); //FOO MODULE ~~~

JavaScript并不是传统的块级作用域，而是函数作用域！ ### 一、作用域 1. JavaScript引擎在代码执行前会对其进行编译，在这个过程中，像var a = 2 这样的声明会被分解成两个独立的步骤： 第一步（编译阶段）：var a 在其作用域中声明新变量。这会在最开始的阶段，也就是代码执行前进行。 第二步（运行阶段）：a = 2 会查询变量a（LHS查询）并对其进行赋值。 2. LHS & RHS（当前作用域->上级作用域->...->全局作用域） LHS(左侧)：试图找到变量的容器本身 RHS(右侧)：查找某个变量的值 示例： ~~~ function foo(a){ var b = a; return a + b; } var c = foo(2); // LHS(3处)：c；a(隐式变量分配)；b; // RHS(4处)：foo(2)；=a；a；b； ~~~ 3. 异常 ~~~ function foo(a){ console.log(a + b); b = a; } foo(2); ~~~ （1）在ES5“严格模式”下，LHS抛出ReferenceError；“非严格模式”下，LHS会自动隐式的创建一个全局变量。 （2）RHS查询在所有嵌套的作用域中遍寻不到所需遍历会抛出ReferenceError。 （3）RHS查询到一个变量，但你尝试对其不合理的操作（引用null或undefined类型中的属性），会抛出TypeError。 一句话概括之：ReferenceError同作用域判别失败相关；而TypeError则代表作用域判别成功了，但是对结果的操作是非法或不合理的。 PS：从原理上阐述了博客中《JavaScript函数及其prototype》函数执行覆盖等问题！！！ ### 二、词法作用域 词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。JavaScript中有两个机制可以“欺骗”词法作用域：eval(...)和with。 1. eval eval函数可以接受一个字符串参数，并将其中的内容视为好像在书写时存在于程序中这个位置的代码（在当前位置，可生成代码，并运行）。 eval可以对一段包含一个或多个声明的“代码”字符串进行演算，并借此修改已经存在的词法作用域（运行阶段）。 ~~~ function foo(str,a){ eval(str); console.log(a, b); //1 , 3 console.log(a, window.b); //1 , 2 } var b = 2; foo("var b = 3;", 1); ~~~ 解释：上述全局变量b被覆盖了，由于b是全局的，可以window.b获取到；但非全局的变量如果被覆盖，就无法访问到了！ 严格模式下： ~~~ function foo(str,a){ "use strict"; eval(str); console.log(a, b); //1 , 2 console.log(a, window.b); //1 , 2 } var b = 2; foo("var b = 3;", 1); ~~~ 2. with with通常被当作重复引用一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。 with将对象的属性当作作用域中的标识符来处理，从而创建了一个新的词法作用域（运行阶段）。 ~~~ function foo(obj){ with(obj){ a = 2; } } var o1 = { a : 3 }; var o2 = { b : 3 }; foo(o1); console.log( o1.a ); // 2 foo(o2); console.log( o2.a ); // undefined console.log( a ); // 2，表明a泄漏到全局作用域上了！ ~~~ 这两个机制的副作用是引擎无法在编译时对作用域查找进行优化，导致代码运行速度变慢，建议不要使用它们！ PS：从原理上阐述了博客《 JavaScript语言精粹【糟粕、毒瘤】》中with不能使用的原因！！！ ### 三、函数作用域和块作用域 1. 匿名和具名 ~~~ /* 匿名（引用自身只能用过期的arguments.callee引用） */ setTimeout(function(){ console.log("i wait 1 second!") },1000); /* 具名（可读性好） */ setTimeout(function timeoutHandler(){ console.log("i wait 1 seco nd!") },1000); ~~~ 2. 立即执行函数表达式 ~~~ /* IIFE模式 */ var a = 2; (function IIFE(global){ var a = 3; console.log(a); //3 console.log(global.a); //2 })(window); /* UMD模式 */ var b = 2; (function UMD(def){ def(window); })(function tmpF(global){ var b = 3; console.log(b); //3 console.log(global.b); //2 }); ~~~ 3. 块作用域 try/catch会创建一个块作用域 ~~~ try{ undefined(); }catch(err){ console.log(err); //可以正常使用 } console.log(err); //ReferenceError: err is not defined /* 坑1 */ for(var i=0;i<10;i++){} console.log(i); //10 /* 坑2 */ { console.log(bar); //undefined 不会报错！！ var bar = 2; } ~~~ ES6中引入新的let关键字！！ ~~~ /* 填坑1 */ for(let i=0;i<10;i++){} console.log(i); //SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode /* 填坑2 */ { console.log(bar); //SyntaxError 报错！！ let bar = 2; } ~~~ 推荐两个将ES6代码转化成兼容ES6之前的环境（大部分是ES5，但不全是）工具：Traceur和let-er

最近，在读《你不知道的JavaScript（上卷）》这本书，书中详细阐述了JavaScript众多重要但经常被大家忽略的点，在此强烈推荐！！！书中，第4章讲述了“提升”，从示例出发讲述了变量和函数提升的过程，纠正了自己以前错误的理解（相信好多人理解都是错误）！ 我们习惯将var a = 2;看做一个声明，而实际上JavaScript引擎不这么认为！下面几个示例让你彻底搞懂JavaScript中的变量提升！ 示例1： ~~~ a = 2; var a ; console.log(a); //2 ~~~ 示例2： ~~~ console.log(b); //undefined var b = 2; ~~~ 示例3： ~~~ var c; console.log(c); //undefined c = 2; ~~~ 示例4： ~~~ foo(); function foo(){ console.log(d); //undefined var d = 2; } ~~~ 示例5： ~~~ bar(); //TypeError var bar = function too(){ // .... } ~~~ 示例6： ~~~ aoo(); //TypeError boo(); //ReferenceError var aoo = function boo(){ // ... } ~~~ 示例7： ~~~ function foo(){ console.log(1); } foo(); //1 foo = function(){ console.log(2); }; ~~~ 示例8： ~~~ foo(); //3 function foo(){ console.log(1); } var foo = function(){ console.log(2); }; function foo(){ console.log(3); } ~~~ 示例9： ~~~ foo(); //b var a = true; if(a){ function foo(){ console.log("a"); } }else{ function foo(){ console.log("b"); } } ~~~ **总结:** 1. var a = 2;其中var a在编译阶段，a=2在执行阶段； 2. 无论作用域中的声明（变量和函数）出现在什么地方，都将在代码本身执行前首先进行处理； 3. 声明本身会被提升，而包括函数表达式的赋值在内的赋值操作并不会提升； 4. 函数会首先被提升，然后才是变量，重复的var（变量）声明会被忽略掉； 5. 后面的函数声明可以覆盖前面的。 **PS：** 1. RHS查询在所有嵌套的作用域中遍寻不到所需遍历会抛出ReferenceError。 2. RHS查询到一个变量，但你尝试对其不合理的操作（引用null或undefined类型中的属性），会抛出TypeError。

> 原文出处：[你不知道的JavaScript](http://blog.csdn.net/column/details/you-donot-know-js.html) 作者：[ligang2585116](http://blog.csdn.net/ligang2585116) **本系列文章经作者授权在看云整理发布，未经作者允许，请勿转载！** # 你不知道的JavaScript > JavaScript语言本身有很多复杂精妙的概念，也是其语言的精髓。你不知道的JavaScript让开发者深入理解语言内部的机制。