DOMElement.contains(DOMNode)

link：https://developer.mozilla.org/En/DOM/Node.compareDocumentPosition。

DOMElement.contains(DOMNode)返回的不是一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的：

综上，来个@司徒正美 大大的方案：

var contains  = function(root, el) {
	 if (root.compareDocumentPosition)
		 return root === el || !!(root.compareDocumentPosition(el) & 16);
	 if (root.contains && el.nodeType === 1){
		 return root.contains(el) && root !== el;
	 }
	 while ((el = el.parentNode))
		 if (el === root) return true;
	 return false;
 }

随机文章

• 通过JSONP实现完美跨域
• Ubuntu安装NVidia驱动
• IE6中javascript文件开启Gzip出现代码不执行情况
• javascript事件：获取事件对象getEvent函数
• 腾讯发布QQ2010 Beta优先体验版本
• 真正的jQuery的radio与checkbox取值
• 08.11.16
• javascript高效简洁代码的编写及优化技巧

© 三水清 for 三水清, 2012. | One comment |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: contains, javascript

猜你喜欢：
通过javascript实现整站黑白效果	javascript获取光标位置以及设置光标位置	非字母javascript	javascript 位运算符
无觅

_=+[];$=_++;__=(_<<_);___=(_<<_)+_;____=__+__;_____=__+___;$$=({}+"")[_____]+({}+"")[_]+({}[$]+"")[_]+(($!=$)+"")[___]+(($==$)+"")[$]+(($==$)+"")[_]+(($==$)+"")[__]+({}+"")[_____]+(($==$)+"")[$]+({}+"")[_]+(($==$)+"")[_];$$$=(($!=$)+"")[_]+(($!=$)+"")[__]+(($==$)+"")[___]+(($==$)+"")[_]+(($==$)+"")[$];$_$=({}+"")[_____]+({}+"")[_]+({}+"")[_]+(($!=$)+"")[__]+({}+"")[__+_____]+({}+"")[_____]+ ({}+"")[_]+({}[$]+"")[__]+(($==$)+"")[___]; ($)[$$][$$]($$$+"('"+$_$+"')")();

看到这里你肯定抓狂了，但是这段代码是可以运行的，运行的结果是 alert('cool code'); 。

javascript分析

这段代码能够运行，原因是javascript是弱类型的脚本语言，而且语法相对松散。例如下面的javascript是正确的，而且是有出乎意料结果的：

true+true;//2
undefined+''//'undefined'
(true+"")[0];//'t'
[]=='';//true
''==0;//true
typeof (+'');//number,0
({}+'');//"[object Object]"
({}[0]);//undefined

所以我们想得到一个0就可以使用:

_= +[];
_= +'';

下一步通过位运算，++等运算可以得到0~9所有数字。

因为0就是false，则!0就是true，({}[0]);可以得到undefined，({}+'')可以得到字符串：[object Object]，字符串中的字符，可以组成新的字符串，于是通过组合，我们就得到了："constructor"。

javascript中的点(.)运算符和[]的作用都是一样的，只不过[]可以接收传入变量、字符串，所以我们可以得到一个Function对象，即：

(0)['constructor']['constructor'];

另外我们也知道，下面的代码是运行的：

Function('alert(1);')();

所以，我想剩下的你就懂了……

随机文章

• 评论开通了~加上啦~
• 08.11.13
• 十枚腾讯微博内测邀请的种子
• WinHttp.WinHttpRequest.5.1—可以用作抓取的msxml 4.0底层对象
• 谷歌退出中国的意图？
• jQuery教程之鼠标事件篇
• 【转】解析360和QQ的战争—《“听说，250干110的事儿，那就是360了”》
• 让我们来搞搞搜狗云输入法

© 三水清 for 三水清, 2011. | 5 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: javascript

猜你喜欢：
JavaScript跨浏览器的添加删除事件绑定函数	Javascript事件触发列表与详解	Javascript正则表达式详解	Javascript设置光标位置到结尾并显示出来
无觅

ECMAScript 整数有两种类型，即有符号整数（允许用正数和负数）和无符号整数（只允许用正数）。在 ECMAScript 中，所有整数字面量默认都是有符号整数，这意味着什么呢？

有符号整数使用 31 位表示整数的数值，用第 32 位表示整数的符号，0 表示正数，1 表示负数。数值范围从 -2147483648 到 2147483647。

可以以两种不同的方式存储二进制形式的有符号整数，一种用于存储正数，一种用于存储负数。正数是以真二进制形式存储的，前 31 位中的每一位都表示 2 的幂，从第 1 位（位 0）开始，表示 2⁰，第 2 位（位 1）表示 2¹。没用到的位用 0 填充，即忽略不计。例如，下图展示的是数 18 的表示法。

18 的二进制版本只用了前 5 位，它们是这个数字的有效位。把数字转换成二进制字符串，就能看到有效位：

var iNum = 18;
alert(iNum.toString(2));	//输出 "10010"

这段代码只输出 “10010″，而不是 18 的 32 位表示。其他的数位并不重要，因为仅使用前 5 位即可确定这个十进制数值。如下图所示：

负数也存储为二进制代码，不过采用的形式是二进制补码。计算数字二进制补码的步骤有三步：

1. 确定该数字的非负版本的二进制表示（例如，要计算 -18的二进制补码，首先要确定 18 的二进制表示）
2. 求得二进制反码，即要把 0 替换为 1，把 1 替换为 0
3. 在二进制反码上加 1

要确定 -18 的二进制表示，首先必须得到 18 的二进制表示，如下所示：

0000 0000 0000 0000 0000 0000 0001 0010

接下来，计算二进制反码，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101

最后，在二进制反码上加 1，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101
                                      1
---------------------------------------
1111 1111 1111 1111 1111 1111 1110 1110

因此，-18 的二进制表示即 1111 1111 1111 1111 1111 1111 1110 1110。记住，在处理有符号整数时，开发者不能访问 31 位。

有趣的是，把负整数转换成二进制字符串后，ECMAScript 并不以二进制补码的形式显示，而是用数字绝对值的标准二进制代码前面加负号的形式输出。例如：

var iNum = -18;
alert(iNum.toString(2));	//输出 "-10010"

这段代码输出的是 “-10010″，而非二进制补码，这是为避免访问位 31。为了简便，ECMAScript 用一种简单的方式处理整数，使得开发者不必关心它们的用法。

另一方面，无符号整数把最后一位作为另一个数位处理。在这种模式中，第 32 位不表示数字的符号，而是值 2³¹。由于这个额外的位，无符号整数的数值范围为 0 到 4294967295。对于小于 2147483647 的整数来说，无符号整数看来与有符号整数一样，而大于 2147483647 的整数则要使用位 31（在有符号整数中，这一位总是 0）。

把无符号整数转换成字符串后，只返回它们的有效位。

注意：所有整数字面量都默认存储为有符号整数。只有 ECMAScript 的位运算符才能创建无符号整数。

位运算 NOT

位运算 NOT 由否定号（~）表示，它是 ECMAScript 中为数不多的与二进制算术有关的运算符之一。

位运算 NOT 是三步的处理过程：

1. 把运算数转换成 32 位数字
2. 把二进制数转换成它的二进制反码
3. 把二进制数转换成浮点数

例如：

var iNum1 = 25;		//25 等于 00000000000000000000000000011001
var iNum2 = ~iNum1;	//转换为 11111111111111111111111111100110
alert(iNum2);		//输出 "-26"

位运算 NOT 实质上是对数字求负，然后减 1，因此 25 变 -26。用下面的方法也可以得到同样的方法：

var iNum1 = 25;
var iNum2 = -iNum1 -1;
alert(iNum2);	//输出 -26

位运算 AND

位运算 AND 由和号（&）表示，直接对数字的二进制形式进行运算。它把每个数字中的数位对齐，然后用下面的规则对同一位置上的两个数位进行 AND 运算：

例如，要对数字 25 和 3 进行 AND 运算，代码如下所示：

var iResult = 25 & 3;
alert(iResult);	//输出 "1"

25 和 3 进行 AND 运算的结果是 1。为什么？分析如下：

 25 = 0000 0000 0000 0000 0000 0000 0001 1001
  3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
AND = 0000 0000 0000 0000 0000 0000 0000 0001

可以看出，在 25 和 3 中，只有一个数位（位 0）存放的都是 1，因此，其他数位生成的都是 0，所以结果为 1。

位运算 OR

位运算 OR 由符号（|）表示，也是直接对数字的二进制形式进行运算。在计算每位时，OR 运算符采用下列规则：

仍然使用 AND 运算符所用的例子，对 25 和 3 进行 OR 运算，代码如下：

var iResult = 25 | 3;
alert(iResult);	//输出 "27"

25 和 3 进行 OR 运算的结果是 27：

25 = 0000 0000 0000 0000 0000 0000 0001 1001
 3 = 0000 0000 0000 0000 0000 0000 0000 0011
--------------------------------------------
OR = 0000 0000 0000 0000 0000 0000 0001 1011

可以看出，在两个数字中，共有 4 个数位存放的是 1，这些数位被传递给结果。二进制代码 11011 等于 27。

位运算 XOR

位运算 XOR 由符号（^）表示，当然，也是直接对二进制形式进行运算。XOR 不同于 OR，当只有一个数位存放的是 1 时，它才返回 1。真值表如下：

对 25 和 3 进行 XOR 运算，代码如下：

var iResult = 25 ^ 3;
alert(iResult);	//输出 "26"

25 和 3 进行 XOR 运算的结果是 26：

 25 = 0000 0000 0000 0000 0000 0000 0001 1001
  3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
XOR = 0000 0000 0000 0000 0000 0000 0001 1010

可以看出，在两个数字中，共有 4 个数位存放的是 1，这些数位被传递给结果。二进制代码 11010 等于 26。

左移运算

左移运算由两个小于号表示（<<）。它把数字中的所有数位向左移动指定的数量。例如，把数字 2（等于二进制中的 10）左移 5 位，结果为 64（等于二进制中的 1000000）：

var iOld = 2;		//等于二进制 10
var iNew = iOld << 5;	//等于二进制 1000000 十进制 64

注意：在左移数位时，数字右边多出 5 个空位。左移运算用 0 填充这些空位，使结果成为完整的 32 位数字。

注意：左移运算保留数字的符号位。例如，如果把 -2 左移 5 位，得到的是 -64，而不是 64。“符号仍然存储在第 32 位中吗？”是的，不过这在 ECMAScript 后台进行，开发者不能直接访问第 32 个数位。即使输出二进制字符串形式的负数，显示的也是负号形式（例如，-2 将显示 -10。）

有符号右移运算

有符号右移运算符由两个大于号表示（<$lt;）。它把 32 位数字中的所有数位整体右移，同时保留该数的符号（正号或负号）。有符号右移运算符恰好与左移运算相反。例如，把 64 右移 5 位，将变为 2：

var iOld = 64;		//等于二进制 1000000
var iNew = iOld >> 5;	//等于二进制 10 十进制 2

同样，移动数位后会造成空位。这次，空位位于数字的左侧，但位于符号位之后。ECMAScript 用符号位的值填充这些空位，创建完整的数字，如下图所示：

无符号右移运算

无符号右移运算符由三个大于号（>>>）表示，它将无符号 32 位数的所有数位整体右移。对于正数，无符号右移运算的结果与有符号右移运算一样。

用有符号右移运算中的例子，把 64 右移 5 位，将变为 2：

var iOld = 64;		//等于二进制 1000000
var iNew = iOld >>>5;	//等于二进制 10 十进制 2

对于负数，情况就不同了。

无符号右移运算用 0 填充所有空位。对于正数，这与有符号右移运算的操作一样，而负数则被作为正数来处理。

由于无符号右移运算的结果是一个 32 位的正数，所以负数的无符号右移运算得到的总是一个非常大的数字。例如，如果把 -64 右移 5 位，将得到 134217726。如果得到这种结果的呢？

要实现这一点，需要把这个数字转换成无符号的等价形式（尽管该数字本身还是有符号的），可以通过以下代码获得这种形式：

var iUnsigned64 = -64 >>> 0;

然后，用 Number 类型的 toString() 获取它的真正的位表示，采用的基为 2：

alert(iUnsigned64.toString(2));

这将生成 11111111111111111111111111000000，即有符号整数 -64 的二进制补码表示，不过它等于无符号整数 4294967232。

出于这种原因，使用无符号右移运算符要小心。

原文地址：http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp

随机文章

• linux安装PHP加速器eAccelerator
• 是不是应该出售2fool.cn的域名
• Javascript正则表达式详解
• 雷：蓝翔技校黑谷歌！
• 如何写网站的robots.txt和meta name robots的配置
• PHP生成RSS类：RSS.class.php
• 分享一个php验证码类，支持中文字母数字，还可自定义字体
• 提高Firefox的innerHTML()的性能

© 三水清 for 三水清, 2011. | One comment |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: javascript, 位运算

猜你喜欢：
JavaScript跨浏览器的添加删除事件绑定函数	Javascript事件触发列表与详解	非字母javascript	javascript事件：获取事件对象getEvent函数
无觅

IE6下面调用开启了gzip压缩Javascript的时候，时常会碰到无法执行的情况，有可能是src调用，有可能是ajax调用，其它的浏览器工作正常，唯独IE6不能正常工作。
出现这个BUG的状况如下：

1. 用户使用IE6浏览器
2. 服务器没有设置 被请求文件(javascript) expires, cache-control.
3. 服务器端开启了chunked encoding模式
4. 通过javascrip的src调用方式或者ajax请求javascript文件
5. 有可能是通过php生成的javascript文件
6. 服务器端开启了gzip压缩

解决这个问题，我们要在服务器的cache-control和expires 头信息上做点工作。
经过测试，header头信息如下的gzip压缩过的javascript调用可以正常工作。

Cache-Control:maxage=1
Connection:keep-alive
Content-Encoding:gzip
Content-Type:application/x-javascript;charset=GBK
Date:Wed, 01 Dec 2010 01:24:07 GMT
Expires:Wed, 01 Dec 2010 01:24:08 GMT
Pragma:public
Server:nginx
Transfer-Encoding:chunked

分析上面的头信息，我们可以注意到：

1. cache-control必须要设置成maxage=time的格式，maxage是指定缓存生效时间，1为1秒
2. Expires必须要设置，它的时间稍大于Date即可，Date是页面请求时间，Expires是过期时间
3. Pragma设置为public

设置好了这两个参数，一般就可以了。

在nginx服务器端，我们需要对服务器配置：

location ~* \.(ico|css|js|png|jpeg|jpg|gif|rar|zip|7z|gz|pdf) {
expires 1d;
}

如果javascript文件是由PHP生成的，我们就需要利用php来输出header控制了。

<?php
$expires = 1;
header("Pragma: public");
header("Cache-Control: maxage=".$expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT');
header("Content-Type: application/x-javascript;charset=GBK\n");

实际应用中，需要灵活配置，Javascript文件，请尽可能通过服务器发送header头，PHP生成javascript文件，效率本来就不高，再加上额外需要输入header头，更是得不偿失。

随机文章

• 获取滔滔头像图片地址的算法
• windows下安装基于Apache的SVN服务器
• 校内人人网忽悠用户-陈一舟牛啊~
• Javascript在IE与Firefox下的差异写法总结
• 我开发的新浪微博应用：微博送祝福
• windows Xp和office盗版软件避免十月20号之后出现黑屏方法
• 谷歌500元免费AdWords广告费申请第二步
• 十大Google Buzz的使用技巧

© 三水清 for 三水清, 2011. | 8 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: bug, IE6, javascript

猜你喜欢：
IE6中a标签触发图片和ajax请求被abort	IE6下javascript不能隐藏select标签的bug	解决IE6不支持max-height的bug	IE6 PNG图片不透明问题的解决方法
无觅

javascript的String.replace方法应该javascript前端开发工程师都了解，可是你掌握了吗？replace有接受两个参数，第一个参数可以是字符串，也可以是正则表达式，第二个参数除支持字符串之外，还支持$1形式正则匹配的文本，除此之外还支持传入一个处理函数，这个函数的return值就是要替换成的内容。
了解更多javascript的String.replace用法，访问：http://www.w3school.com.cn/js/jsref_replace.asp

String.replace的妙用

在《javascript获取隐藏dom的宽高》中，我就使用了replace，使用replace做一些重复性的操作，减少不必要的代码。

其实这里说的重复性的工作就是循环！例如，我们要获取假如我要求id为div1和div2的两个元素的宽高，一部分人会一点一点的做，先算完div1的，然后做div2的，这样你是否觉得有部分是充分的操作呢，于是可以将取宽高的函数独立出来，这样多了一个函数，而且函数只用这两次，似乎有点浪费。

于是一部分人想到了使用split切分字符串，然后用Array.forEach做循环。例如下面的代码：

"div1 div2".split(' ').forEach(function(a,i){
    console.log(a);
	//do something
})

这样对于支持forEach的高级浏览器还是可以的，否则需要扩展数组原型了，不提倡扩展原型，即使不扩展原型提供个额外的函数来操作，就又是浪费，

所以我的做法是使用replace，代码如下：

var wh = {};
"div1 div2".replace(/[^ ]+/g,function(a){
	var elem = document.getElementById(a);
        wh[a] = {};
	'Width Height'.replace(/[^ ]+/g, function(i){
			wh[a][i] = elem['offset' + i] || elem['client' + i];
		});
});
console.log(wh);

有人说不好懂，而且有点太……，对就是有点装B，呵呵~但是简洁，前端开发的代码还是简洁点好。另外还有通过位操作来判断String.indexOf返回的是否为-1，也是个不错的方法~呵呵，不多说了

随机文章

• 官方中文正式原版PhotoShop CS5下载
• 王老师突然问：考研吗？
• 生日party
• 最短的DOMReady代码
• JavaScript跨浏览器的添加删除事件绑定函数
• 基于express+socket.io的nodejs聊天室
• jQuery弹出框插件wBox 1.0正式发布
• 做个中国工会网竟然670万！

© 三水清 for 三水清, 2011. | 2 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: javascript, 代码优化

猜你喜欢：
javascript高效简洁代码的编写及优化技巧	如何写出高质量的Javascript代码	非字母javascript	javascript获取光标位置以及设置光标位置
无觅

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

所有window对象的属性拥有全局作用域

在《正确理解javascript的this关键字》中我提到了脚本语言的运行需要宿主，在浏览器的全局对象是window，所以全局的变量和函数是window的属性，并且拥有全局作用域。

function a(){
	window.b = 1;
}
a();
alert(b);//1

局部作用域（Local Scope）

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域。如下面的代码中b就是一个局部变量，在函数外部是访问不到的。

var a = function(){
	var b = 1;
	alert(b);
}
a();
alert(b);//出错 b undefined

javascript作用域链

javascript作用域（scope）是通过javascript的作用域链（scope chain）来实现的。javascript函数对象中拥有一个仅供javascript引擎访问的内部属性——[[Scope]]，[[Scope]]指向一个集合，即为“作用域链（Scope chain）”，它决定了哪些数据能被函数访问。

var a = 1;
function fn1(){
    var a = 9;
    function fn2(){
        alert(this.a);//1
        alert(a);//9
    }
    fn2();
}
fn1();

上面代码的作用域链，可以用下面的图来表示：

javascript的作用域链图示

作用域链与javascript代码优化

代码在运行时，变量的查找总是从作用域链的底部开始往上查找，如果第一层没找到，就要从更高一级作用域查找，这样一直找下去，一直找到全局作用域，如果没有找到则返回undefined。

从作用域链的结构可以看出，在运行期上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。因为全局变量总是存在于运行期上下文作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。

一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。如下面的代码：

function changeColor(){
    document.getElementById("btnChange").onclick=function(){
        document.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：

function changeColor(){
    var doc=document;
    doc.getElementById("btnChange").onclick=function(){
        doc.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

这段代码比较简单，重写后不会显示出巨大的性能提升，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有显著改善。

作用域链的延长

当执行流进入下列任何一个语句时，作用域链将得到延长：

1. try-catch语句的catch块
2. with语句

此两个语句会在作用域链的前端添加一个变量对象。对with来说，其变量对象中包含着指定对象的所有属性和方法所作的变量申明；对catch来说，其变量对象中包含的是被抛出的错误对象的申明。这些标量对象都是只读的，因此在with和catch语句中申明的变量都会被添加到所在执行环境的变量对象中。

当with和catch语句结束之后，作用域链会恢复到原先的状态。

值得一提的是改变了javascript的作用域链之后，代码效率会降低。拿with语句来说，当代码运行到with语句时，运行期上下文的作用域链临时被改变了。一个新的可变对象被创建，它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部，这意味着函数的所有局部变量现在处于第二个作用域链对象中，因此访问代价更高了。

继续阅读关于javascript的作用域的文章：

1. javascript的词法作用域
2. 正确理解javascript的this关键字

随机文章

• 爱墙（许愿墙）程序后台添加置顶、搜索等功能
• 重装系统啦~看看桌面截图吧~
• 一份web前端开发的简历
• 用批处理说中文！
• 去掉Eclipse插件Aptana启动显示My Aptana
• javascript的String.replace的妙用
• jQuery插件wBox准备更新
• 推荐六个在线制作Loading图标的网站

© 三水清 for 三水清, 2011. | 2 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: javascript, 作用域

猜你喜欢：
javascript的词法作用域	正确理解javascript的this关键字	Javascript正则表达式详解	非字母javascript
无觅

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的指代关系了。

函数构造器中的this

当函数作为构造器使用new关键字实例化时，this的指代关系又是怎样的呢？看下面的代码：

var Person = function(){
	this.name = 'Theo Wong';
}
var person = new Person();
console.log(person.name);

new执行过程会首先执行Person的构造器[[construct]]，然后在调用[[call]]方法给this赋值，这个执行过程可以简单理解为三步

1. 首先建立一个空的对象object，类似var obj={}
2. 然后将空对象使用Person的call操作，类似Person.call(obj)
3. 执行完Person之后再return this，完成new过程，赋值给person变量

所以经过new加工过的函数，this的函数调用者是Person本身，而不是window了。

嵌套函数中的this

在嵌套函数中，this的指代关系有会是怎样的呢？看下面的代码：

var myObject = {
  func1:function() {
     console.log(this); //myObject
     var func2=function() {
        console.log(this); //window
        var func3=function() {
           console.log(this); //window
        }();
     }();
  }
}; 
myObject.func1();

在嵌套函数中，由于嵌套函数的执行上下文是window，所以this指代的是window对象，其实这是ECMA-262-3的一个bug，在最新的ECMA-262-5中已经修复。

事件处理中的this

在javascript中处理事件函数中，this的指代关系就更加扑朔离迷了。我们建立一个showValue函数，函数内容如下：

var showValue = function(){
	console.log(this.value);
};

现在有个input，我们给input元素添加click事件，当点击input时触发showValue函数，看看现在的this指代的是什么对象。

<input id="test" type="text" />

通过dom.onclick绑定事件

document.getElementById('test').onclick = showValue;

运行代码会得到预期的结果，showValue虽然定义在全局对象中，但是当采用了onclick的绑定方式时，showValue是作为dom的onclick方法被调用的，所以它的this应该指代的是dom对象，而不再是window对象。

写在html标签内

<input id="test" type="text" onclick="showValue();" />

当点击dom时，我们获取不到正确的this，这是为什么呢？

此时的this指代的是window对象，因为window对象中没有定义value的值，所以获取不到this.value。其实此时的不是将showValue函数赋值给dom对象的onclick，而是引用！所以上面的代码跟下面的代码关系是一样的：

document.getElementById('test').onclick = function(){
    showValue();
};

根据上面说的javascript嵌套函数的this值，我们可以得出现在showValue的this其实是window。

通过addEventListener/attachEvent绑定事件监听

<input type="text" id="test" />
<script type="text/javascript">
var dom = document.getElementById('test');
id = 'window';
function test(){
	alert(this.id);
}
dom.addEventListener?dom.addEventListener('click',test,false):dom.attachEvent('onclick',test);
//addEventListener test
//attachEvent window
</script>

这种绑定事件监听的方式，attachEvent this是window对象，而addEventListener则是dom对象的。@魔堕轮回 提出来的bug~嘎嘎

使用call和apply方法改变this

在Function对象原型（Function.prototype）中有两个方法：call和apply，通过call和apply可以改变this的值， 它们都接受第一个参数作为调用执行上下文中this的值。它们的不同点就是apply第二个参数为数组，call接收的参数是依次传入的。

var obj = {
	name:'Theo Wong',
	desc:'一个前端开发者'
};
var getInfo = function(){
	console.log(this.name+this.desc);
};
getInfo.call(obj);
//Theo Wong一个前端开发者

总结

this是javascript的重要关键字，理解掌握this关键字在不同的执行上下文指代关系，才能避免代码犯一些不必要的错误。深入了解javascript的代码执行过程，及其执行上下文，推荐阅读《javascript的词法作用域》

随机文章

• 【续】教你偷老师的课件甚至考试试题~
• Img,Script,Link等标签为空可导致页面多余请求
• 只要20元，你也可以做个QQ爱墙
• 使用Synergy实现多台电脑共享一套鼠标键盘
• 提供一个免费支持Jabber, AIM, MSN, Yahoo, Gtalk,Twitter 机器人
• 使用CSS设置文字反选的背景颜色
• [转]利用跨域资源共享（CORS）实现ajax跨域调用
• jQuery插件–wBox发布

© 三水清 for 三水清, 2011. | 2 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: javascript, 作用域, 面向对象

猜你喜欢：
javascript作用域和作用域链	javascript的词法作用域	javascript继承的写法	非字母javascript
无觅

嵌套函数效率

很多jser喜欢在javascript代码中使用嵌套函数，例如下面的例子就是一个典型的嵌套函数：

function foo(a, b) {  
    function bar() {  
        return a + b;  
    }  
 
    return bar();  
}  
 
foo(1, 2);

上面的代码中foo()中嵌入了bar()，当foo()运行的时候，就会调用bar()。javascript引擎不会创建bar()函数，直到外部引用了foo()，随着foo()的运行结束，bar()也会销毁。

当多次运行foo的时候，javascript引擎就要在每次的运行foo时创建bar函数，而每次foo结束就要销毁bar函数，这是一个很费劲的工作。

那么为什么我们不把bar函数拿出来，做为一个独立的函数，它在foo外部只被创建一次，而不是多次，这样就大大的提高了代码效率。例如下面的代码：

function foo(a, b) {  
    return bar(a, b);  
}  
 
function bar(a, b) {  
    return a + b;  
}  
 
foo(1, 2);

当然这样做可能随着程序的复杂性，可能存在命名冲突的危险，所以jser需要在这方面权衡，或者采用命名空间来解决这个方式。下面是在jsperf中做的关于上面两个函数大量运行的速度测试http://jsperf.com/nested-named-functions。不同的浏览器测试的结果不同，但是总体来看，两个独立的函数要比相互嵌套的javascript函数效率提高10%~90%。

匿名函数

javascript开发中常用到匿名函数，例如事件处理函数、callback函数等，例如下面的事件处理函数：

document.addEventListener("click", function(evt) {  
    alert("You clicked the page.");  
});

这里给document创建了一个事件监听，当每次页面点击之后会alert出来一条消息。跟嵌套函数一样，每次点击需要运行一次匿名函数，处理事件完成之后再销毁。

jQuery中的each方法也是一个匿名函数，例如下面的代码，选择出来所有的a元素，并且添加each方法来处理a元素：

$("a").each(function(index) {  
    this.style.color = "red";  
});

如果写成jQuery插件，可以下面的代码：

$.fn.myPlugin = function(options) {  
 
    return this.each(function() {  
        var $this = $(this);  
 
        function changeColor() {  
            $this.css({color : options.color});  
        }   
 
        changeColor();  
    });  
};

javascript代码定义了一个名字为myPlugin的jQuery插件，插件中有一个嵌套函数changeColor，根据上面说的，上面的代码效率不如独立出来changeColor高，所以我们可以把changeColor拿到外部来，即下面的代码：

function changeColor($obj, color) {  
    $obj.css({color : color});  
}  
 
$.fn.myPlugin = function(options) {  
 
    return this.each(function() {  
        var $this = $(this);  
 
        changeColor($this, options.color);  
    });  
};

经过修改过的jQuery插件在效率上提高了15%左右，大家可以通过jsperf来测试两个jQuery插件的效率。所以说嵌套的函数越多，调用的次数越多，则可以优化的地方也越多。

javascript嵌套函数和函数构造

我们在javascript类中长写下面的代码：

function Person(firstName, lastName) {  
    this.firstName = firstName;  
    this.lastName = lastName;  
 
    this.getFullName = function() {  
        return this.firstName + " " + this.lastName;  
    };  
}  
 
var jeremy = new Person("Jeremy", "McPeak"),  
    jeffrey = new Person("Jeffrey", "Way");

这段代码定义了一个Person的类，其中包括了getFullName的方法，将firstName和lastName返回。getFullName的方法在每次创建不同的Person对象时会不同，所以jeremy.getFullName === jeffrey.getFullName返回的结果是false(http://jsfiddle.net/k9uRN/).
具体分析见下面图，jeremy和jeffrey是不同的两个对象，他们的getFullName也是不同的。

jeremy和jeffrey

使用prototype关键字

在javascript中有prototype这个关键字，prototype的属性是实例化后的对象所共有的属性，所以上面的代码可以通过prototype改写成下面的方式：

function Person(firstName, lastName) {  
    this.firstName = firstName;  
    this.lastName = lastName;  
}  
 
Person.prototype.getFullName = function() {  
    return this.firstName + " " + this.lastName;  
};  
 
var jeremy = new Person("Jeremy", "McPeak"),  
    jeffrey = new Person("Jeffrey", "Way");

这样getFullName的方法是定义在Person.prototype中的，为所有实例化的对象共有方法，所以jeremy和jeffrey的getFullName是相等的(http://jsfiddle.net/Pfkua/)。他们之间的关系可以通过下面的图片来解释：

jeremy和jeffrey共有getFullName

通过jsPerf的测试，我们可以看出来，第二种方法要比第一种方法在效率上面快了18%~96%。

变量的私有化

在函数内部的变量是私有的，外面是不可以访问到函数内部的变量的，但是函数内部可以访问到外部的变量。看下面的代码：

function Foo(paramOne) {  
    var thisIsPrivate = paramOne;  
 
    this.bar = function() {  
        return thisIsPrivate;  
    };  
}  
 
var foo = new Foo("Hello, Privacy!");  
alert(foo.bar()); // alerts "Hello, Privacy!"

代码中创建了一个构造函数Foo();，并且私有了一个变量thisIsPrivate，当运行bar()时，私有的thisIsPrivate会被返回。这样thisIsPrivate受到了保护，在Foo()之外是访问不到的.

这种方法也是很多javascript工程师所推荐的写法，但是跟上面的代码一样，每次实例化Foo();之时，会创建一个bar方法，这样看上去又是对资源的浪费，而且会影响效率。所以我们可以通过使用prototype的方法来实现：

function Foo(paramOne) {  
    this._thisIsPrivate = paramOne;  
}  
 
Foo.prototype.bar = function() {  
    return this._thisIsPrivate;  
};  
 
var foo = new Foo("Hello, Convention to Denote Privacy!");  
alert(foo.bar()); // alerts "Hello, Convention to Denote Privacy!"

这样的代码有不可以保证变量的私有化，只是我们在变量之前添加下划线_（很多公司内部规定，或者已经成为了很多程序员的编程习惯，_开头的变量是私有的），这样每次实例化Foo();会只建立一个通用的bar方法。

总结

本文也不是说不要大家在javascript中写嵌套函数，只是要适当，要注意这个知识点，在频繁调用的函数内部是不推荐写javascript嵌套函数的。开发者写代码给用户用，为的就是高效代码提高用户体验。

英文全文：http://net.tutsplus.com/tutorials/javascript-ajax/stop-nesting-functions-but-not-all-of-them

随机文章

• PHP二维数组去重复项函数
• 发布WordPress来访者天气预报插件
• jQuery实现拖拽功能
• 谷歌要退出中国大陆市场？！
• IE6下javascript不能隐藏select标签的bug
• jQuery弹出框插件wBox 1.0正式发布
• jQuery弹出框wBox的一个使用实例
• 爆料：其实淘宝团购的聚划算每天有18款

© 三水清 for 三水清, 2011. | 13 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: javascript, 前端优化, 嵌套函数

猜你喜欢：
如何写出高质量的Javascript代码	javascript匿名函数	非字母javascript	javascript事件：获取事件对象getEvent函数
无觅

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");

getItem获取value

用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：

	var value = sessionStorage.getItem("key");
	var site = localStorage.getItem("site");

removeItem删除key

用途：删除指定key本地存储的值
用法：.removeItem(key)
代码示例：

	sessionStorage.removeItem("key");
	localStorage.removeItem("site");

clear清除所有的key/value

用途：清除所有的key/value
用法：.clear()
代码示例：

	sessionStorage.clear();
	localStorage.clear();

其他操作方法：点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：

var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：

var storage = window.localStorage;
for (var i=0, len = storage.length; i  <  len; i++){
    var key = storage.key(i);
    var value = storage.getItem(key);
    console.log(key + "=" + value);
}

storage事件

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){
	window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
	window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
	if(!e){e=window.event;}	
}

storage事件对象的具体属性如下表：

Web Storage Demo

HTML5 Demos: Storage     Web Storage Example

随机文章

• 三个使用WordPress自定义域做的小工具
• php、js两种不同方式根据关键词返回经纬度接口【基于Google map API】
• 使用CSS设置文字反选的背景颜色
• IE中Image.onload失效的问题
• 用批处理说中文！
• 通过修改注册表去掉windows7的快捷方式小箭头
• 使用xdebug调试PHP 找出PHP程序的瓶颈
• 解决IE下setTimeout传参数的bug

© 三水清 for 三水清, 2011. | 3 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: javascript, localStorage, sessionStorage

猜你喜欢：
Javascript事件触发列表与详解	7个JavaScript在IE和Firefox浏览器下的差异写法	Javascript正则表达式详解	非字母javascript
无觅

感谢：cnodejs群里的老雷，及其微博上的基友们！顺祝大家长假快乐，顺祝自己明天动车不出轨，顺祝明年不再过节，感慨多了……

特点

聊天室主要功能及其特点：

1. 采用nodejs（屁话）
2. express框架,jade做模板
3. socket.io做前后端的websocket通信
4. 支持session
5. 支持@私信功能

废话不多说了，注意点，基本前面的文章都提到了，下面罗列下：
《配置nodejs.exe的windows目录结构》
《安装express及配置app.js文件》
《使用socket.io和node.js搭建websocket应用》
《在Express和Socket.IO中使用session》

nodejs聊天室下载地址

基于express+socket.io的聊天室

聊天室服务器端js代码

//========================变量定义===============================
/**
 * modules引入
 */
var express = require('express'),
	sio = require('socket.io'),
	fs=require('fs'),
	path = require('path')
	url = require('url'),
	parseCookie = require('connect').utils.parseCookie,
	MemoryStore = require('connect/middleware/session/memory');
 
/**
 * 私人聊天使用session
 */
var usersWS = {}, //私人聊天用的websocket
	storeMemory = new MemoryStore({
		reapInterval: 60000 * 10
	});//session store
//=========================app配置=============================	
/**
 * app配置
 */
var app = module.export = express.createServer();
 
app.configure(function(){
	app.use(express.bodyParser());
	app.use(express.cookieParser());
	app.use(express.session({
		secret: 'wyq',
		store:storeMemory 
	}));
	app.use(express.methodOverride());
	app.use(app.router);//要放在bodyParser之后，处理post
	app.set('views', __dirname + '/views');
	app.set('view engine', 'jade');
	app.use(express.static(__dirname + '/public'));
});
//=================配置socket.io=========================
/**
 * 配置socket.io
 * 
 */	
var io = sio.listen(app);
//设置session
io.set('authorization', function(handshakeData, callback){
	// 通过客户端的cookie字符串来获取其session数据
	handshakeData.cookie = parseCookie(handshakeData.headers.cookie)
	var connect_sid = handshakeData.cookie['connect.sid'];
 
	if (connect_sid) {
		storeMemory.get(connect_sid, function(error, session){
			if (error) {
				// if we cannot grab a session, turn down the connection
				callback(error.message, false);
			}
			else {
				// save the session data and accept the connection
				handshakeData.session = session;
				callback(null, true);
			}
		});
	}
	else {
		callback('nosession');
	}
});
//=========================URL=============================
/**
 * url处理开始鸟~
 * @param {Object} req
 * @param {Object} res
 */
app.get('/',function(req,res){
 
	if( req.session.name && req.session.name!==''){
		//需要判断下是否已经登录
		res.redirect('/chat');
	}else{
		//读取登录页面，要求登录
		var realpath = __dirname + '/views/' + url.parse('login.html').pathname;
		var txt = fs.readFileSync(realpath);
		res.end(txt);
	}
});
app.get('/chat',function(req,res){
	if (req.session.name && req.session.name !== '') {
		//需要判断下是否已经登录
		res.render('chat',{name:req.session.name});
	}else{
		res.redirect('/');
	}
})
app.post('/chat',function(req,res){
	var name = req.body.nick;
	if(name && name!==''){
		req.session.name = name;//设置session
		res.render('chat',{name:name});
	}else{
		res.end('nickname cannot null');
	}
 
});
 
//===================socket链接监听=================
/**
 * 开始socket链接监听
 * @param {Object} socket
 */
io.sockets.on('connection', function (socket){
	var session = socket.handshake.session;//session
	var name = session.name;
	usersWS[name] = socket;
	var refresh_online = function(){
		var n = [];
		for (var i in usersWS){
			n.push(i);
		}
		io.sockets.emit('online list', n);//所有人广播
	}
	refresh_online();
 
	socket.broadcast.emit('system message', '【'+name + '】回来了，大家赶紧去找TA聊聊~~');
 
	//公共信息
	socket.on('public message',function(msg, fn){
		socket.broadcast.emit('public message', name, msg);
		fn(true);
	});
	//私人@信息
	socket.on('private message',function(to, msg, fn){
		var target = usersWS[to];
		if (target) {
			fn(true);
			target.emit('private message', name+'[私信]', msg);
		}
		else {
			fn(false)
			socket.emit('message error', to, msg);
		}
	});
 
	//掉线，断开链接处理
	socket.on('disconnect', function(){
		delete usersWS[name];
		session = null;
		socket.broadcast.emit('system message', '【'+name + '】无声无息地离开了。。。');
		refresh_online();
	});
 
});
 
//===========app listen 开始鸟~==========
app.listen(3000, function(){
	var addr = app.address();
	console.log('app listening on http://127.0.0.1：' + addr.port);
});

随机文章

• GoDaddy促销COM域名，在华仅0.99美元
• 开博两年了：换了主题 改了名
• 新浪微博应用开发之一：授权机制介绍
• 樱花草，假如爱有天意
• IE中flash遮挡div现象的解决方案
• Google2009年Logo大盘点——第二季
• jQuery弹出框wBox的一个使用实例
• jQuery 1.4.1 中文参考文档下载

© 三水清 for 三水清, 2011. | 6 comments |在微博关注我：@清-三水清
收藏到： 人人网 | 豆瓣 | 开心网 | QQ书签 | 新浪微博 | 腾讯微博
Post tags: javascript, nodejs

猜你喜欢：
使用cygwin在windows下安装nodeJS	nodejs教程：配置nodejs.exe的windows目录结构	nodejs教程：安装express及配置app.js文件	使用socket.io和node.js搭建websocket应用
无觅