javascript的作用域是一个重要的知识点，javascript作用域（scope）是通过javascript的作用域链（scope chain）来实现的。

javascript作用域

javascript作用域(scope)：简单的说，就是创建一个函数时在什么环境下创建的，它控制了javascript代码运行时变量和函数的访问范围。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

全局作用域（Global Scope）

在代码中任何地方都能访问到的对象拥有全局作用域，注意：全局变量是魔鬼！因为它效率低（后面讲到），污染全局环境！一般有一下三种方式获取全局作用域。

代码最外层定义的函数和变量拥有全局作用域

在代码的最外层，定义的函数、变量，都是拥有全局作用域的。

var a = 1;
function b(){
    var a = 2;
}
b();
alert(a);//1

函数内部不使用var定义的拥有全局作用域

在函数内部，不使用var定义的变量拥有全局作用域，这是个坑！要注意，很多前端开发工程师不习惯写var，其实这时候你已经污染了全局作用域！

var a = 1;
function b(){
    a = 2;
    c = 3;
}
b();
alert(a);//2
alert(c);//3

javascript有this关键字，this跟javascript的执行上下文密切相关，很多前端开发工程师至今对this关键字还是模棱两可，本文将结合代码讲解下javascript的this关键字。

this和对象的关系

首先来看下面的代码：

var person = {
    name:'Theo Wong',
    gender:'male',
    getName:function(){
        console.log(person.name);
    }
};
person.getName();

定义了一个person对象，对象中包含了name、gender属性，还包括了一个getName的方法，其作用是输出person对象的name。在这种情况下，我们可以使用this来在person对象中代替person对象本身，所以上面的代码跟下面的直接结果是一样的：

var person = {
    name:'Theo Wong',
    gender:'male',
    getName:function(){
        console.log(this.name);
    }
};
person.getName();

请记住一点：this永远指向的是函数对象的所有者！上面的例子中getName的所有者是person对象，所以this指代的是person。

this和全局对象

我们再来看看再全局对象中，this指代的是什么，我们知道javascript是脚本语言，所以javascript的执行需要有一个宿主环境，在浏览器中这个宿主环境就是window对象，所以在全局函数中，this指代的是window对象（除非使用new，call，apply方法来改变this的指代关系）。懂得了这个关键点，下面的代码就好理解了：

var a = 1;
console.log(a);//1
console.log(this.a);//1
console.log(window.a);//1

很多前端开发工程师经常使用在函数名字之前添加个window来调用函数，这是因为在浏览器中全局对象就是window，所有的函数变量都是在window对象之中，所以下面的代码中的this指代window对象就好理解了：

var a = 1;
function foo(){
    var b = 2;
    console.log(this.a+b);//3
}
foo();

所以说，只要记住：this永远指向的是函数对象的所有者，即this的值是由激活执行上下文代码的调用者决定的，就好理解this的指代关系了。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生（来自@otakustay 的纠正）

html5 web storage的浏览器支持情况

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

要判断浏览器是否支持localStorage可以使用下面的代码：

if(window.localStorage){
    alert("浏览支持localStorage")
}else{
   alert("浏览暂不支持localStorage")
}
//或者
if(typeof window.localStorage == 'undefined'){
    alert("浏览暂不支持localStorage")
}

localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

localStorage和sessionStorage的方法

setItem存储value

用途：将value存储到key字段
用法：.setItem( key, value)

代码示例：

    sessionStorage.setItem("key", "value");
    localStorage.setItem("site", "js8.in");

一个隐藏的DOM是获取不到宽高的，如果想要获取，采用下面的方法：
首先clone一个DOM，设置position:absolute，然后设置top为一个比较大的负值，然后使其显示出来，最后获取到了DOM的宽高后，将其remove。

具体代码如下：

前些日子参加了公司RIA的实习生和新员工的javascript培训课程，做了个PPT，今天拿来跟大家分享下，高手飘过，欢迎拍砖。
本课程分了两段，第一部分是javascript入门基础和中级教程，后面是高级，讲到了javascript的作用域链和原型链，以及javascript面向对象的继承写法，最后简单提了一下前端安全，最后简单介绍了下前端的发展和展望，要新员工开阔下眼界，同时提供了一些学习的资源和RSS源。

大家应该写过下面类似的代码吧，其实这里我想要表达的是有时候一个方法定义的地方和使用的地方会相隔十万八千里，那方法执行时，它能访问哪些变量，不能访问哪些变量，这个怎么判断呢？这个就是我们这次需要分析的问题——词法作用域

var classA = function(){
    this.prop1 = 1;
}
classA.prototype.func1 = function(){
    var that = this,
        var1 = 2;

    function a(){
        return function(){
            alert(var1);
            alert(this.prop1);
        }.apply(that);
    };
    a();
}
var objA = new ClassA();
objA.func1();

词法作用域：变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。 with和eval除外，所以只能说JS的作用域机制非常接近词法作用域（Lexical scope）。

下面通过几个小小的案例，开始深入的了解对理解词法作用域和闭包必不可少的，JS执行时底层的一些概念和理论知识。

经典案列重现

1、经典案例一

/*全局（window）域下的一段代码*/
function a(i) {
    var i;
    alert(i);
};
a(10);

疑问：上面的代码会输出什么呢？
答案：没错，就是弹出10。具体执行过程应该是这样的

a 函数有一个形参 i，调用 a 函数时传入实参 10，形参 i=10
接着定义一个同名的局部变量 i，未赋值
alert 输出 10

思考：局部变量 i 和形参 i 是同一个存储空间吗？

2、经典案例二

/*全局（window）域下的一段代码*/
function a(i) {
    alert(i);
    alert(arguments[0]); //arguments[0]应该就是形参 i
    var i = 2;
    alert(i);
    alert(arguments[0]);
};
a(10);

疑问：上面的代码又会输出什么呢？（（ 10,10,2,10 || 10,10,2,2 ））
答案：在FireBug中的运行结果是第二个10,10,2,2，猜对了… ，下面简单说一下具体执行过程

javascript的变量类型真的很要人纠结，即使你是很有经验的js工程师，你也很难说清楚js的类型和分类。
最近在讲javascript入门指南的时候，有人提出数组为什么不是基本类型，我通过演示typeof []的结果来说明，数组是对象类型派生出来的，而不是六种基本类型。
其实要理解javascript的变量类型很简单，就是我们要找到一个划分的标准。

javascript变量类型分类

在很多书中都提到了javascript的变量类型，每本书都有不同的划分标准，如果按照typeof和instanceof的返回值来区分，可以把javascript的变量类型分为两套类型系统：基本类型和对象类型衍生出来的对象类型系统。
基本类型包括：undefined，number，boolean，string，object，function，他们之前通过typeof的返回值来区分。
第二套对象类型系统是由第一套系统衍生发展而来的，例如前面提到的Array，还有Null，Number，Boolean等等，对象类型可以通过instanceof来判断。
那么对象类型中的Number和基本类型中的number又是什么关系呢？他们又是什么区别呢？
答案就是，他们是映射关系，即下例：

var a = new Number(123);
console.log(a.valueOf()===123);//true
var b = new String(123);
console.log(b.valueOf()===123);//false
console.log(b.valueOf()==='123');//true

obj.valueOf()返回的是该对象的原始值。

值类型和引用类型

在IE中提供了一个fireEvent方法，顾名思义就是触发某个事件发生的意思。刚开始我以为是会跟平时使用onclick()一样，没想到最近在写javascript入门ppt的时候发现了，原来自己太自以为是了！看来还有很多javascript的细节没有掌握好啊！

现在根据自己的总结详细的记录下fireEvent方法的使用。fireEvent是IE提供的一种方法，msdn文档地址：http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx

onclick()

我们先看第一段实例代码：

*   i am one;
*   i am two;
*   i am three;
click me!

*   i am one;
*   i am two;
*   i am three;
click me!

今天在整理javascript入门培训的PPT时，提到了匿名函数，所以拿来分享下心得。

匿名函数的写法

顾名思义，就是没有名字的函数（⊙﹏⊙b汗）。匿名函数通常用于javascript作用域的控制，可以有效的避免对全局变量的污染。常见的匿名函数有下面四种写法，欢迎补充：

匿名函数写法一

(function(){
    //do something
})();

匿名函数写法二

!function(){
    //do something
}();

上面!还可以写成+，!!等多种方式。
上面两种方法是我常用的，下面两种方法是google上找的，我没用过（好吧，我out啦）。

匿名函数写法三

(function(){
    //do something
}());

匿名函数写法四

void function(){
    //do something
}();

刚才微博上@朴灵 提出来：写法三比较安全，正如网友@Rain的留言，匿名函数上面的写法都存在前后文;问题，所以需要注意的是匿名函数在压缩工具打包压缩后会出现上下文错误合并()的问题，例如第一种写法，如果下面的代码，未压缩之前是正常的，压缩后就不正常了，所以要严格上下文的;问题，而第三种就不会出现类似问题：

var a = function(){}
(function(){
    alert(1);
})();

上例中就出现了错误，这就是因为a函数会把他后面的匿名函数作为参数传入a中，这也就解释了为什么有人习惯在匿名函数之前添加;了，就是为了防止上文没有严格遵循javascript语法，漏掉;的问题。

今天遇见IE6一个location.href的bug，具体情况是这样的，IE6下，在a标签中，将href写成javascript:; javascript:void(0);，并且给这个标签绑定onclick事件，点击后，执行location.href实现页面跳转，例如下面的代码：

<a href="javascitp:;">点击跳转</a>

或者

<a href="javascitp:void(0);">点击跳转</a>

toURL函数的代码如下所示：

function toURL(){
    location.href = "http://js8.in";
}

这样在非IE6浏览器下都可以使用，但是在IE6下就是跳转不了，而且不报错，在location.href之后的代码，例如（alert(1);）也是执行的。

IE6下location.href失效解决的方法

解决IE6中a标签中location.href失效的方式就是a标签中的href不用使用javascript:;或javascript:void(0);。具体原因还不清楚，不过我们可以使用href=”#”来代替。