前些日子参加了公司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=”#”来代替。

在javascript开发中我们会经常获取页面中的事件对象，然后来处理这些事件，例如下面的getEvent函数就是获取javascript下的页面事件对象。

function getEvent(event){
    return event || window.event;
}

我们使用getEvent的时候可以这样调用。

function foo(event){
    var evt = getEvent(event);
    alert(evt);
}

并且把foo函数绑定到一个onclick事件上。
但是常用的是foo函数不会有参数，或者第一个参数没有传入，我们可以通过arguments[0]来获取第一个参数。
在IE中event是一个全局变量，即window.event，而在Firefox等浏览器，事件会作为第一个参数传入foo函数，所以getEvent可以改为：

function getEvent(event){
    return arguments[0] || window.event;
}

这时在一些版本的浏览器，例如Firefox 中会出现获取不到event对象的问题，其实我们可以看成事件的触发是下面的方式：

function onclick(event) {
    foo();
}

这样，第一个函数是onclick，即event会默认作为第一个参数传入，而foo函数没有将event作为参数传入，这样严重限制了getEvent的灵活性，所以我们需要修改下getEvent函数。

新浪微博的开放平台提供了jsSDK的方法，但是很多人反映不会使用，这里最关键的一点是不会放跨域文件。
的确，我也承认开放平台的开发文档写的不是很详细，比如对于一些接口是使用REST的，要人云里雾里，而对于REST的介绍却很隐晦，我也是尝试了几次才找到的方法（例如删除微博接口）。
下面简单说说jsSDK的操作。

放置跨域文件

为了实现跨域请求api的接口，我们需要在自己的域名下放置一个xd.html的文件，这个文件可以理解成在你网站做代理的，通过它才可以请求道api.t.sina.com.cn的内容。感兴趣的童靴可以研究下这种跨域的实现方式，国内的人人、腾讯，国外的facebook都是这种跨域方式。

基本原理是通过html5的postMessage和window.name来实现跨域。其实如果进一步研究是完全可以不要这个跨域文件的！相信下一个版本的JSSDK不会出现跨域文件来误导大家。
跨域文件放置要点

1. 放置来应用的同域名下，例如你的应用网址是js8.in，则你的xd.html文件就要放在js8.in域名下
2. 不一定是根目录下，因为可以通过jsSDK中的xdpath来传入xd.html路径，默认是根目录，即js8.in/xd.html

严格来说javascript是基于对象而不是面向对象的语言，因为javascript没有像java语言那么丰富的类、继承、封装，但是javascript是基于原型（prototype）的面向对象开发，是一种动态、弱类型、基于原型的语言。前几天看了阿里UED的《重温javascript继承机制》，今天重新看了，很有感触，特地转载了重要的部分，记录一下，下次有需要的时候还要重新看一下！的确是不错的一篇文章。

继承的演变

1、采用new关键字生成实例

处理表单验证这样简单功能脚本语言显然是不需要”继承”机制的，然而如果Javascript里面都是对象，就需要有一种办法来把所有对象联系起来。最后，Brendan Eich还是设计了”继承”。只是，他并没有引入”类”（class）的概念，因为一旦有了”类”，Javascript就是一种完整的面向对象编程语言了，
这好像有点太正式了，与设计初衷也远了，同时增加了初学者的入门难度。
参照到C++和Java语言都使用new命令来生成实例：

C++这样写：

> ClassName *object = new ClassName(param);

Java这样写：

> Foo foo = new Foo();

那么，也可以把new命令引入了Javascript，用来从原型对象生成一个实例对象。但是，Javascript中没有”类”的话，怎样表示原型对象呢？
依然是参照C++和Java使用new命令时，都会调用”类”的构造函数（constructor）。Brendan Eich简化了设计，在Javascript语言中，new命令后面跟的是构造函数，不再是类。
我们举个例子来说，现在有一个叫做WD构造函数，表示前端开发（web-developper）对象的原型。

> function WD(skill){
>     this.skill = skill;
> }

对这个构造函数使用new关键字，就会生成一个前端开发对象的实例。

> var WD1 = new WD('html');
> console.log(WD1.skill); // html

在构造函数中的this关键字，它其实代表的是新创建的实例对象。

2、new 出来对象的缺陷

采用new关键字，用构造函数生成实例对象无法共享属性和方法。
比如，在WD对象的构造函数中，设置一个实例对象的共有属性skill。

> function WD(skill){
>     this.skill = skill;
>     this.sex = '男';
> }

然后，生成两个实例对象：

> var WD1 = new WD('html');
> var WD2 = new WD('css');

这两个对象的skill属性是独立的，修改其中一个，不会影响到另一个。

> WD1.skill= 'Javascript';
> console.log(WD2.skill);//“css”，不受WD1的影响

每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。

3、引入prototype属性

为了实现属性和方法的共享，Brendan Eich决定为构造函数设置一个prototype属性。
这个属性包含一个对象（以下简称”prototype对象”），所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。
实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。
还是以WD构造函数为例，现在用prototype属性进行改写：

> function WD(skill){
>     this.skill = skill;
> }
> 
> WD.prototype = { sex : '男' };
> 
> var WD1 = new WD('html');
> var WD2 = new WD('css');
> 
> console.log(WD1.sex); // 男
> console.log(WD2.sex); // 男

现在，sex属性放在prototype对象里，是两个实例对象共享的。只要修改了prototype对象，就会同时影响到两个实例对象。

> WD.prototype.sex = '女';
> console.log(WD1.sex); //女
> console.log(WD2.sex); // 女

由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像”继承”了prototype对象一样。这就是Javascript继承机制的设计思想。

三、构造函数如何实现继承

现在有一个”MED”对象的构造函数（MED:Marketing Experience Design,营销体验设计）

> function MED(){
>     this.aim = "营销体验设计";
> }

依然是”WD”对象的构造函数，

> function WD(skill,sex){
>     this.skill = skill;
>     this.sex = sex;
> }

怎样才能使”WD”继承”MED”呢？

端午和上个周末做的微博应用送大礼中设计到ajax返回json的数据格式中，我没有完全使用PHP默认的json_encode来编码，因为这样编码出来的是unicode编码的，也就是\u的编码，虽然unicode编码可以在不同的页面中编码不会出现乱码问题。但是一个汉字编码成unicode会变成\u+4个字符，这样在字符长度上要比汉字多。

因为我的php文件和html声明中都是使用的UTF-8，不会出现编码乱码问题，所以就放弃了直接使用json_encode的方法，而是把汉字先urlencode然后再使用json_encode，json_encode之后再次使用urldecode来解码，这样编码出来的json数组中的汉字就不会出现unicode编码了~
代码如下

//默认为：{"test":"\u6211\u662f\u6d4b\u8bd5"}
$array = array(
    'test'=>urlencode("我是测试")
);
$array = json_encode($array);
echo urldecode($array);
//{"test":"我是测试"}

此举主要是为了节省传输字符数，因为我的送大礼默认会引入几百个好友信息，对于数据的流量还是比较大的~所以采用汉字传输要比unicode字符编码传输要节省带宽~而且处理好了页面编码问题，不会出现乱码现象。

json_encode出null的问题

如果文档编码或者字符串编码（例如UTF-8抓取了一个GBK页面）为非UTF-8，就会出现json_encode编码失败的问题，变现为输出汉字为null。