表面上没有任何有趣的地方。但仔细一看，会发现选区的颜色是浅蓝色，而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性，立马 firebug:

不看不知道，一看真蹊跷。selection-highlight 是选区，选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性：Ctrl + C 可以复制图片中的文字！

google 太强悍了，好在前端代码都是开源的，下面简单分析下。

首先数据在哪呢，这个比较容易找到，在 firebug 里有一个请求返回的数据如下：

<?xml version="1.0" encoding="UTF-8"?>

<pdf2xml>
<meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/>
<meta name="Producer" content="Adobe Acrobat 8.1"/>
<meta name="CreationDate" content="20100316080708-04'00'"/>
<page t="0" l="0" w="612" h="773">
 <text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271,
7,280,39,322,7,330,11,344,24,370,23,395,20,418,7">
Please post comments or corrections to the Author Online forum at</text>
...

有了这份数据，就可以根据选区得到对应的文本。

接下来的问题是，如何将文本放到剪贴板里？第一反应是用 flash 实现，但感觉 google 不会这么做。禁用掉 flash 插件后，功能正常，这说明是用 js 实现的。

通过 Profile 工具 + Fiddler + 肉眼识别 + 运气，终于定位到了关键代码：

n.am = function(a) {
    if (! (!this.k.Ca && Mr(this, a))) {
        ac && this.lf.focus();
        this.lf.select();
        Nr(this, a)
    }
};

只要注释掉上面的代码，Ctrl + C 复制功能就无效。focus 和 select 为我们提供了进一步线索，在 HTML 里，发现了秘密：

到此真相大白：当用户按下 Ctrl + C 时，js 会注入事件，首先根据坐标从数据里取出对应文本，然后将文本赋值给 textarea, 并将其激活和选中。这样，就和用户选中 textarea 的内容，再按下 Ctrl + C 的效果是一样了。

强悍的 google, 技术创新无处不在！

注意：利用 textarea 只能复制纯文本，如果想复制富文本，可以借鉴 google docs 编辑 Word 文档时的处理方式：采用 iframe 充当临时容器，有兴趣的可以进一步研究。

简单演示：goog-docs-copy-demo.html

发现这个秘密后，最近在疯狂搞编辑的牛人承玉（欢迎搞编辑器的其他牛人加盟）立刻想到了各大站长们非常喜爱的功能：附带警告信息的禁止copy. 据说，能成功复制的，都不是“人”。

我的尝试是：点击按钮，复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去，但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制，对于触发的异步 Ctrl + C, 浏览器会限制其功能。

Google 的产品里有很多秘密，真诱人，创意无限！

您可能还关注的？

• 判断 iframe 是否加载完成的完美方法
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• [原创]用JS控制显示子菜单个数 自动下拉
• offsetLeft and offsetTop gives wrong coords in IE
• 讨论闭包传入参数：window & undefined

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("Local iframe is now loaded.");
        }
    };
}

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);

几点补充说明：

1. IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
2. 第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• [原创]用JS控制显示子菜单个数 自动下拉
• offsetLeft and offsetTop gives wrong coords in IE
• 讨论闭包传入参数：window & undefined

最常见的闭包 (Closure) 范式大家都很熟悉了：

(function() {
// ...
})();

很简单，大家都在用。但是，我们需要了解更多。
首先，闭包是一个匿名函数 (Anonymous function), 即是 (function() {}) 这部分。之所以要给 function 添加括弧是为了让它形成一个表达式 (expression), 有了表达式，并且确定它的类型是个函数 (Function 实例), 就可以直接调用它。所以，后面的一对括弧是可以工作的，它的意义是：我要调用 (call) 这个函数。

既然是函数调用，那就可以像一般的函数那样，在调用时传入参数。这就是本次讨论的话题。

传入 window 参数

(function(win) {
// ...
})(window);

这样做最直观的好处是书写便利：少写几个字。你可以在闭包内任何地方使用 win, 它都会指向 window 对象。另外，它有利于压缩减少最终代码的体积，经过压缩后 (如 Google Closure Complier), 所有的 win 都会被替换成形如 a 这样的简单变量。win 用得越多，减少的字节数也越多。

不过，便利的同时也会带来陷阱。在 IE 上，window 总是指向当前窗口对象，这个没有问题，但是在某些场景下，使用闭包内的 win 变量会导致拒绝访问错误 (Access denied). 重现方式大致是这样的：当页面引用其他域名的脚本，并且该脚本调用了闭包内的 window.document, 而且这个闭包代码是来自另一个域名的脚本。在这种情况下，使用 win 会保持对 window 最早的引用，通过另一个域的脚本访问 win 会导致 IE 认为脚本产生了跨越冲突，从而拒绝了对 win.document 的访问。解决办法是不使用形参 win, 而是直接使用 window. 需要说明的是，给闭包传入 document 也会导致 IE 出现同样的问题。

传入 undefined

其实把 undefined 作为形参就，实参就可以不用传了，因为 JavaScript 中访问未传入的参数就会得到 undefined. 因此，你可以这样写：

(function(undefined) {
// ...
})();

和上面的讨论一样，你可以在闭包内任何地方使用 undefined, 可以少写几个字（如果把 undefined 换成更短的名字），也可以在减少压缩后体积。

另一个的优势是，你可以认为它是个变量，把它当变量来使用，它的值恒等于 (===) 真正的 undefined. 当外部代码意外地定义了 undefined 的时候——不常见，但确实可能会发生——你可以正常地使用真正的 undefined, 而不会被外部的 undefined 意外影响. 这是由 JavaScript 作用域规则决定的。
无论是否使用这个 undefined 参数，都应该避免使用 undefined 的字符串常量，如：

if(typeof myVar === 'undefined') {
// bad part...
}

因为如果你把字符串写错了，机器不会告诉你，而且会产生一个难以检查出来的bug. 幸运的是，对于 JavaScript 来说，JsLint 可以帮你做这个校验。当 myVar 已定义的时候（通过形参或 var 声明），上面的代码改成这样会更易于调试：

if(myVar === undefined) {
// good part...
}

结论

从上面两个例子来看，我们建议不要传入 window, 但是可以安全地使用第二种方式 (写 undefined 形参)；我们还要尽量避免使用字符串常量。
最后，最重要的是，这只是两个特定对象和类型的讨论，举一反三，你会更了解 JavaScript

转自阿里UED：http://ued.alipay.com/2010/05/using-window-and-undefined-as-parameter-in-closure/

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• 最近写日期操作的几个JS函数
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• 各浏览器中cookie限制

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• 讨论闭包传入参数：window & undefined
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• 各浏览器中cookie限制

使用方法如下：

var fade = function(element, transparency, speed, callback){……}
透明度渐变：transparency:透明度 0(全透)-100(不透)；speed:速度1-100，默认为1
例<input onclick="fade('testDiv', 40)" type="button" value="透明度变化" />

var move = function(element, position, speed, callback){……}
//移动到指定位置，position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默认为10
例<input onclick="move('testDiv', {top:400})" type="button" value="垂直移动" />

var resize = function(element, size, speed, callback){……}
//长宽渐变：size:要改变到的尺寸 格式 {width:400, height:250}或{width:400}或{height:250}；speed:速度 1-100，默认为10
例<input onclick="resize('testDiv', {height:300})" type="button" value="改变高度" />

核心代码分析
1、获取一个元素的透明度
如果是IE浏览器，则攻取最终样式的滤镜filter的值，再通过正则表达式获取到透明度滤镜alpha的值，如果不存在透明度滤镜值，则透明度为100。
如果是非IE浏览器，那么可以获取最终样式的opacity属性，

function getOpacity(elem){
var alpha;
if(navigator.userAgent.toLowerCase().indexOf('msie') != -1){
alpha=elem.currentStyle.filter.indexOf("opacity=") >= 0?(parseFloat( elem.currentStyle.filter.match(/opacity=([^)]*)/)[1] )) + '':
'100';
}else{
alpha=100*elem.ownerDocument.defaultView.getComputedStyle(elem,null)['opacity'];
}
return alpha;
};

2、设置透明度
这个就简单了，不用管浏览器，通通的设置opacity及filter，
element.style.opacity = start / 100;
element.style.filter = ‘alpha(opacity=’ + start + ‘)’;
实际上这儿我偷了个懒，真正无懈可击的写法，应该是判断一下是否IE浏览器，因为在一些情况下可能使用多个滤镜，这时应该用正则替换alpha滤镜的值，而不是直接设置style.filter = ‘alpha(opacity=’ + start + ‘)’;

3、element.offsetWidth、element.offsetHeight与element.style.width、element.style.height的关系
只有在IE的border-content式盒模型情况下，这两个值才是相等的，即elementoffsetWidth==element.style.width+element.style.paddingLeft+element.style.paddingRight+element.style.borderLeftWidth+element.style.borderRightWidth
而我认为border-content式盒模型是符合修改元素尺寸时的心理预期的，对非border-content式盒模型情况下要作一个尺寸的修正。
在其它情况下应该对该值加以修正

if(!(navigator.userAgent.toLowerCase().indexOf('msie') != -1&&document.compatMode == 'BackCompat')){
//除了ie下border-content式盒模型情况外，需要对size加以修正
var CStyle=document.defaultView?document.defaultView.getComputedStyle(element,null):element.currentStyle;
if(typeof(size.width)=='number'){
size.width=size.width-CStyle.paddingLeft.replace(/D/g,'')-CStyle.paddingRight.replace(/D/g,'');
}
if(typeof(size.height)=='number'){
size.height=size.height-CStyle.paddingTop.replace(/D/g,'')-CStyle.paddingBottom.replace(/D/g,'');
}
}

有人认为以上的修正中默认了padding值的单位是px并且为整数，是不对的，
实际上经由我在ie及firefox下的测试，引用最终样式的padding值，必然是整数，并以px为单位。

4、关于把三个函数合并成一个通用动画函数
以上三个函数的主要逻辑都是一样的：
通过setInterval每隔一定时间修改元素的style属性，以达到动画效果。
所以，把三个函数合并成一个函数是可以的
只是需要在修改特定的属性时出于兼容性，必须作些处理，
因为不同的属性其值类型及单位不一样，不同浏览器下也有区别
如透明度 在非ie下为小数，在ie下是一个特别的滤镜设置
如颜色 一般是用16进制，并有#号前缀
预计这个通用的动画函数的参数会有点多，接口类下
function animator(element, interval, start, end, style, speed, tmp, callback){……}
说明
function animator(元素或元素ID, 计时器句柄,起始值,目标值,需修改的属性, 步进值(增量),值转换过滤方法(用于修改非普通递增递减形的数据，比如16进制颜色递增、前缀符号后缀单位修正), 回调函数)
function animator(‘testdiv’,'bgcolor’,'#336699′,’#aabbcc’,'backgroundColor’,2,changeColor,callback)
颜色修改方法示例（仅供参考，未测试）

changeColor=function(start,end,speed){
var _10to16 = function(color){
function tmp(index){
var tmp = color[index].toString(16);
return tmp.length == 1 ? "0" + tmp : tmp;
};
return "#" + tmp(0) + tmp(1) + tmp(2);
};
var x16to10 = function(color){
if(!/^#[0-9A-Fa-f]{3,6}$/i.test(color))retun color;
function tmp(index){
return color.charAt(index);
};
color = color.substring(1);
if(color.length == 3)
color = tmp(0) + tmp(0) + tmp(1) + tmp(1) + tmp(2) + tmp(2);
return [parseInt(tmp(0) + tmp(1), 16), parseInt(tmp(2) + tmp(3), 16), parseInt(tmp(4) + tmp(5), 16)];
};
var color = x16to10(start),
var end = x16to10(end),
var index = 3;
while(index--)
color[index] = color[index] < end[index] ? min(color[index] + speed, end[index]) : max(color[index] - speed, end[index]);
reutn color;
}

原文见：http://bbs.51js.com/viewthread.php?tid=86901

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• [原创]用JS控制显示子菜单个数 自动下拉
• offsetLeft and offsetTop gives wrong coords in IE
• 讨论闭包传入参数：window & undefined

• 注①：包括key及value，以及分号、等号
• 注②：总字节数也受HTTP Server的设置影响；
  Apache用这2个参数调整：
  LimitRequestFieldSize 限制客户端发送的请求头的字节数 【默认 8190】
  LimitRequestLine 限制接受客户端发送的HTTP请求行的字节数【默认 8190】
  当cookie超出Server的设置大小后会出现400 Bad Request

结论：我们应该保证cookie key数量<=20，单key字节<=4000b，总字节数<=4000b

感谢vfresh同学整理：）

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• 讨论闭包传入参数：window & undefined
• 最近写日期操作的几个JS函数
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化

继上次受挫折之后 又看了看相关js测试题

找到这个

再次分享一下

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• 讨论闭包传入参数：window & undefined
• 最近写日期操作的几个JS函数
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化

<div class="Area">
  <div id="menu1" class="main_tit">
	<h2><a href="http://www.iamued.com">IamUed.com-前端开发</a></h2>
	<ul  class="sublist">
		<li><a href="http://www.iamued.com">javascript</a></li>
		<li><a href="http://www.iamued.com">Ria</a></li>
		<li><a href="http://www.iamued.com">ActionScript</a></li>
		<li><a href="http://www.iamued.com">Flash</a></li>
		<li><a href="http://www.iamued.com">Flex</a></li>
		<li><a href="http://www.iamued.com">W3C</a></li>
		<li><a href="http://www.iamued.com">xhtml</a></li>
	</ul>
  </div>
  一级内具体内容
</div>

可以看到 对于程序输出来讲 这样的结构不需要任何逻辑 相对代码结构清晰整洁

核心JS代码如下

//核心方法 传送一个数组参数
function submenumore(menuarr)
{
    for(var j=0;j<menuarr.length;j++)//循环该数组
    {
        var listli=document.getElementById(menuarr[j]).getElementsByTagName("ul")[0].getElementsByTagName("li");//根据数组获取到该子菜单的li
        if(listli.length > 5)//如果子菜单数量大于5
        {
            var newimg=document.createElement("a");//新建一个a元素 作为大于5个之后显示的小图标容器
            newimg.className="moreimg";//给a元素设置一个样式
            newimg.onmouseover=function()//绑定事件 主要用于显示之后的子菜单 这里不多做解释
            {
                showsubmore(this);
            }
            newimg.onmouseout=function()//绑定事件 主要用于隐藏之后的子菜单 这里不多做解释
            {
                hidesubmore(this);
            }
            var newul=document.createElement("ul");//新建一个Ul元素 用来存档多余的子菜单
            newul.className="sublistmore";//给新的UL设置样式
            for(var i=5;i<listli.length;i++)
            {
                newul.appendChild(listli[i]);//将其余的子菜单 添加到这个新的有序列表里
                i--;
            }
            newul.onmouseover=function()//绑定事件 主要用于显示之后的子菜单 这里不多做解释
            {
                this.style.display="block"
            }
            newul.onmouseout=function()//绑定事件 主要用于隐藏之后的子菜单 这里不多做解释
            {
                this.style.display="none"
            }
            var imgli=document.createElement("li");//新建一个li元素
            imgli.appendChild(newimg);//将之前建立的A元素 添加到这里 为了页面结构统一 可以比较好的调整样式
            document.getElementById(menuarr[j]).getElementsByTagName("ul")[0].insertBefore(imgli,null);//将新建的LI插入到5个子菜单后面
            document.getElementById(menuarr[j]).appendChild(newul);//将多余子菜单加入到数组所传的容器内
        }
    }
}

这里要解释一个地方

 for(var i=5;i<listli.length;i++)
  {
     newul.appendChild(listli[i]);//将其余的子菜单 添加到这个新的有序列表里
     i--;
  }

这里为什么要i–呢
由于读取出来的是一个引用对象
所以将之前数组内对象 添加到新的 对象里
之前的数组length将-1
所以将i–以获得之前数组的连贯对象

在代码中用到了2个之前收集的方法 主要是为了兼容各种浏览器

//该函数主要取得对象距离浏览器的真实距离Offset
function GetRealOffset(o)
{
    var elem = o;
    var leftOffset = elem.offsetLeft;
    var topOffset = elem.offsetTop;
    var parent = elem.offsetParent;
    while(parent)
    {
        leftOffset += parent.offsetLeft;
        topOffset += parent.offsetTop;
        parent = parent.offsetParent;
    }
    var Offsets = new Object();
    Offsets.top = topOffset;
    Offsets.left = leftOffset;
    return Offsets;
}
//该函数主要用于取得元素的兄弟节点 由于火狐下兄弟节点将TextNode也计算在内 所以用该函数兼容
function getnextSibling(o)
{
    do
    {
        o = o.nextSibling;
    }
    while (o.nodeType != 1)
    return o;
}

其他的更多的是页面样式的问题 不做过多解释了

查看DEMO
下载代码
转载请注明：转自我是UED-原文链接:http://www.iamued.com/qianduan/1010.html

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化
• offsetLeft and offsetTop gives wrong coords in IE
• 讨论闭包传入参数：window & undefined

谈谈我的一些体验吧！

先看当下一些的网站对“top置顶”的应用:

大家熟悉的QQ校友

QQ空间

他们都有一个共同的体验，那就是给用户一个缓冲的过程，而不是直接飙到顶部。

大多的网站应用方式都是直接给个空的链接，如：href=”#”;这样的置顶很僵硬，很呆板。

本博客底部就用到的缓冲的体验效果，大家不妨看完本文去体验一下哦

说了这么多，还没告诉大家如何去实现，方法有点小难度，当然对于js比较牛的人来说，那就小菜一碟了。。

只看代码：

/**
 * 回到页面顶部
 * @param acceleration 加速度
 * @param time 时间间隔 (毫秒)
 **/
function goTop(acceleration, time) {
	acceleration = acceleration || 0.1;
	time = time || 16;

	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var x3 = 0;
	var y3 = 0;

	if (document.documentElement) {
		x1 = document.documentElement.scrollLeft || 0;
		y1 = document.documentElement.scrollTop || 0;
	}
	if (document.body) {
		x2 = document.body.scrollLeft || 0;
		y2 = document.body.scrollTop || 0;
	}
	var x3 = window.scrollX || 0;
	var y3 = window.scrollY || 0;

	// 滚动条到页面顶部的水平距离
	var x = Math.max(x1, Math.max(x2, x3));
	// 滚动条到页面顶部的垂直距离
	var y = Math.max(y1, Math.max(y2, y3));

	// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
	var speed = 1 + acceleration;
	window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

	// 如果距离不为零, 继续调用迭代本函数
	if(x > 0 || y > 0) {
		var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
		window.setTimeout(invokeFunction, time);
	}
}

调用：

<a href="javascript:void(0);" onclick="goTop();return false;">TOP</a>

查看DEMO

您可能还关注的？

• 弹出窗口[浮层]与切换页面的对比总结
• 太NB了：Google Docs Ctrl + C 技术浅析
• [分享]W3C Javascript 最新Chm格式下载
• 判断 iframe 是否加载完成的完美方法
• 讨论闭包传入参数：window & undefined

var person = {
    name:null,
    setName:function(name){
        this.name = name;
        return this.name;
    },
    getName:function(){
        alert(this.name);
    }
}

具有JavaScript特色的一种编程方式,以类为单位含有属性name,方法setName和getName.调用方法比较简便person.setname(‘R’),this由此至终均指向person,person的属性与方法均不私有,可以进行调用.

2.prototype构造器调用模式

var Person = function(){
    this.name = null;
}
Person.prototype.setName = function(name){
    this.name = name;
}
Person.prototype.getName = function(){
    alert(this.name);
}

也是很常见的编程方式,创建一个Person类,然后利用prototype对类进行扩展,添加方法.与对象字面量最大区别在于,调用该类的方法时,必须先new(跟Java调用类相似).var p = new Person();p.getName();如果不用new,而直接创建,会产生错误.而且这种错误将不会报错,难以发现.错误的产生原因来自于this指向Person.prototypel,而Person并没有setName方法.

3.利用匿名函数进行函数编程

(function(){
    var name;

    var setName = function(n){
         name = n;
    }
    window['person']['setName'] = setName;

    var getName = function(){
        alert(name);
    }
    window['person']['getName'] = getName;
})()

类的出现,其中一个最大的好处就是降低了全局变量的出现,但是如果你依旧习惯于函数式编程,没关系,只要创建一个匿名函数,进行闭包,就可以再里面进行函数编程,也不需要担心全局变量的出现.如上所看到的var name;在匿名函数外部是无法调用的,然后利用外部的变量来调用内部的函数,或者是变量.可以借此创建私有变量和私有方法.
4.类式编程(不知道取什么名)

var person = function(){
    var name = null;
    return{
        setName:function(n){
            name = n;
        },
        getName:function(){
            alert(name);
        }
    }
}

与对象字面量很相似,其不同之处在于抛开了this,和可以对方法与属性进行私有.调用方法与对象字面量基本一致.

5.方法链

var Person = function(){
    this.name = null;
}
Person.prototype = {
    setName:function(name){
        this.name = name;
        return this;
    },
    getName:function(){
        alert(this.name);
        return this;
    }
}

jQuery就是一个最经典的方法连库,如果还不懂方法链是什么,看看这个例子:

var p = new Person();
    p.setName('Tom').getName().setName('Ray').getName();

由于每个方法的结尾都是return this;所以产生了方法链式的类.

本人比较熟悉的就是这几种方式了,每个人都有每个人的特色,所以方式也是说不尽的.但是借此,我想探讨以下几个问题:

1.有关于this指针

在建立多种类的时候都用到this,可是this的作用究竟是什么,而其实this在重用和继承上起着很大的作用.我们先看看一个关于继承的例子:
首先建立Person类:

var Person = function(){
    this.name = null;
}
Person.prototype.setName = function(name){
    this.name = name;
}
Person.prototype.getName = function(){
    alert(this.name);
}
Person.prototype.getAge = function(){
    var age = this.age || '';
    alert(age);
}

然后在建立一个Children类,并集成Person的所有方法和属性:

var Children = function(age){
    this.name = null;
    this.age = age;
}
Children.prototype = new Person();    //继承Person的属性和方法
Children.prototype.ageJudge = function(){    //另外为Children添加新方法
    if(this.age > 18){
        alert('成年人~');
    } else {
        alert('未满18岁呢~');
    }
}
Children.prototype.getName = function(){    //重写getName方法
    var about = this.name + ' ' + this.age;
    alert(about);
}
var tom = new Children(12);
var ages = tom.getAge();    //12
var judge = tom.ageJudge();    //未满18岁呢~
var setN = tom.setName('Tom');
var get = tom.getName();    //Tom 12

这就是继承,然后我们看个简单的函数重用:

var SetColor = function(){
    this.style.backgroundColor = '#000';    //this指向window
}
document.body.onclick = SetColor;    //此时this指向body
documnet.getElementById('color').onmouseout = SetColor;        //this指向documnet.getElementById('color')

看了this的作用之后,想必对this有了新的认识了吧.现在就有疑问了,就是this的该用与不该用,下面在看个简单的例子:

var setColor = {
    init:function(obj){
        this.obj = obj;        //this指向setColor
        this.obj.onclick = this.color;
    },
    color:function(){
        this.style.backgroundColor = '#000';    //this指向obj
    }
}

就在一个类里,this却指向2处地方,有时这样总会让人觉得困惑.刚学习的人更会被this弄的晕头转向.而稍稍改变一下写代码的方式:

var setColor = {
    init:function(obj){
        setColor.obj = obj;
        setColor.obj.onclick = setColor.color;
    },
    color:function(){
        this.style.backgroundColor = '#000';    //this可以方便方法的重用
    }
}

这样一下来,代码可以更加的清晰了.所以编写代码的时候应该考虑好究竟今后的用途,还有能否重用.如果明确了不进行继承或是重用,个人觉得应该尽可能的避免使用this,更有个比较常出现的问题.如下:

var Person = function(){
    this.name = null;
}
Person.prototype.setName = function(name){
    this.name = name;
}
Person.setName('tom');    //错误方式此时setName方法中的this将指向Person.prototypel,Person并没有setName方法

前面讲过,若果不写成var p = new Person();p.setName(‘tom’);该类里的this将会直接指向Person.prototypel.这种错误在编译时,还是运行时都不会报错.有时会造成让人很头痛的问题.所以在编写代码时,我总是很慎重的选用this.

2.类的封装

在Java里,对类的方法或是属性,可以设置为私有,这样就可以避免外部的调用,而JavaScript却不存在这样的设置,看看下面的代码:

var person = {
    name:null,
    init:function(name){
        this.setName(name);
    }，
    setName:function(name){
        this.name = name;
        return this.name;
    }
}
person.init('tom');    //tom

在这个类里,一共有2个方法,分别是init和setName,而我们只希望从init中运行setName,或是以后将会为里面添加的各种方法,而不希望出现:

person.setName('tom');    //tom

直接调用setName方法,正确的说,希望setName方法私有,还有name属性私有.避免别的程序员使用你的类时,调用了不想被调用的方法.
那应该怎么对类的封装好呢?试试另一种编程方式吧,看看改版的怎么样:

var person = function(){
    var name = null;
    var setName = function(n){
        name = n;
        return name;
    }
    return{
        init:function(n){
            setName(n);
        }
    }
}

这样子,就可以讲原本要私有化的方法和属性私有化了,外部无法直接调用了.这也是利用了闭包而达成所需要的方式的.可是这种编程方式不易于读,尤其是新手看到这种代码会很吃力,还有在占用内存方面也要比一般的高些.
好了,暂时先介绍到这里,下次有时间在说说闭包与作用域.
转自:http://www.blueidea.com/tech/web/2009/7264.asp

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 判断 iframe 是否加载完成的完美方法
• 讨论闭包传入参数：window & undefined
• 最近写日期操作的几个JS函数
• 即拷即用动画函数：透明度渐变、位置移动、尺寸变化