小题整理

深藏阁楼爱情的钟 2022-07-16 06:38 184阅读 0赞

1、完成一个正则表达式，用来验证身份证号码

var string='385602199209120';  
var stringExp=new RegExp(/^(\\d\{15\}$|^\\d\{18\}$|^\\d\{17\}(\\d|X|x))$/);  
alert(stringExp.test(string));

//15位或者18位，如果15位，则全部是数字；如果是18位，最后一位可以输数字或者字母X x，其余必须全是数字

2、对string对象进行扩展，使其具有删除前后空格的方法

String.prototype.trim=function()\{

return this.replace(/(^\\s\*)|(\\s\*$)/g,"");

3、哪些元素可继承（网站找的，供参考；大致常用的都有了）

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse

4、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中

如何居中div

给div设置一个宽度，然后添加margin:0 auto属性

div{
        width:200px;
        margin:0 auto;
     }

居中浮动元素：

父类div浮动 距离左边50%,子类div浮动，right:50%;

.father \{

position:relative;

left:50%;

float:left;

.son \{

position:relative;

width:200px;

height:200px;

right:50%;

float:right;

background: \#000

html:

<body>

</body>

让绝对定位的div居中

5.一个满屏的品字

css:

.top \{

position:absolute;

top:0;

bottom:50%;

backgound:red;

width:100%;

.father \{

position:absolute;

top:50%;

bottom:0;

width:100%;

.left \{

position:absolute;

top:0;

left:0;

width:50%;

background: \#000

.right \{

position:absolute;

top:0;

right:0;

width:50%;

background: yellow

或者：

.top \{

position:absolute;

top:0;

bottom:50%;

backgound:red;

width:100%;

.father \{

position:absolute;

top:50%;

bottom:0;

width:100%;

.left\{float:left;height: 100%;width: 50%;background: \#000\}  
.right\{float:right;height: 100%;width: 50%;background: yellow\}

</div>

#### absolute  的 containing block 计算方式跟正常流有什么不同 ####

#### position 跟 display、margin collapse、overflow、float 这些特征相互叠加后会怎么样 ####

#### 对 BFC 规范的理解？ ####

7） 关于严格模式、混杂（怪异）模式、

以前总是把这些模式混淆，现在特别做一个整理

怪异模式和标准模式是针对html表头中有没有声明(

<table style="border-style:solid; border-color:silver; width:880px; border-collapse:collapse; word-break:break-word; color:rgb(51,51,51); margin:0px!important; padding:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:12px!important; min-height:auto!important; background:none!important"> 
 <tbody style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
  <tr style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
   <td style="border-style:solid; border-color:silver; padding:3px; border-collapse:collapse; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; margin:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
    <div style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:relative!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; min-height:auto!important; color:rgb(0,0,0)!important; background:none!important">&lt;!</code> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; min-height:auto!important; color:rgb(0,0,255)!important; background:none!important">DOCTYPE</code>&nbsp; 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; min-height:auto!important; color:rgb(0,0,0)!important; background:none!important">html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

)

如果你的网页代码不含有任何声明，那么浏览器就会采用怪异模式解析，便是如果你的网页代码含有DTD声明，浏览器就会按你所声明的标准解析。

IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明，这只是区别的一种，还有很多其它区别。所以，要想写出跨浏览器的CSS，你必须采用标准模式。好像太绝对了，呵呵。好吧，要想写出跨浏览器CSS，你最好采用标准模式

7)利用原生js实现ajax

window.οnlοad=function(){
        document.getElementsByTagName('a')[0].οnclick=function(){
            if (window.XMLHttpRequest){
                var xmlhttp=new XMLHttpRequest();
            }else{
                var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            var method='GET';
            var url=this.href;
            xmlhttp.open(method,url);
            xmlhttp.send();
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4){
                    if(xmlhttp.status==200||xmlhttp.status==304){
                        var txt=xmlhttp.responseText;
                        var json=eval('('+txt+')');
                        document.getElementById('name').innerHTML='姓名'+json.ruei.name;
                        document.getElementById('age').innerHTML='年龄'+json.ruei.age;
                        document.getElementById('job').innerHTML='工作'+json.ruei.job;
                    }
                }
            }
            return false;
        }
    }

8)http协议的状态消息都有哪些

http状态码指的是web服务器告诉客户端发生了什么事情

状态码分类：

1\*\*：信息提示。请求收到，继续处理

2\*\*：成功。操作成功收到，分析、接受

3\*\*：重定向。完成此请求必须进一步处理

4\*  \*：客户端错误，请求包括一个错误语法或者不能完成

5\*\*：服务端错误。服务器执行一个完全有效请求失败

200——服务器已成功处理了请求

301——请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

404——服务器找不到请求的网页。

500——服务器遇到错误，无法完成请求。

503——服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。

504——服务器作为网关或代理，但是没有及时从上游服务器收到请求

9)AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

AJAX的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器相应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给AJAX引擎自己来做，只有确定需要从服务器读取新数据时再由AJAX引擎代为向服务器提交请求。

![Image 1][]

跨域问题的解决：

1、jsonp

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）

这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

举例说明：

程序A中sample的部分代码(http://localhost:20001)

程序B中test.js的代码

1 //调用callback函数，并以json数据形式作为阐述传递，完成回调
    2 callback({message:"success"});

上面的例子是最简单的JSONP的实现模型，不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的，比如Google的ajax搜索接口：[http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?][http_ajax.googleapis.com_ajax_services_search_web_v_1.0_q_callback]

q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：<script type="text/javascript">

//添加<script>标签的方法  
    function addScriptTag(src)\{  
        var script = document.createElement('script');  
        script.setAttribute("type","text/javascript");  
        script.src = src;  
        document.body.appendChild(script);  
    \}  
    window.onload = function()\{  
        //搜索apple，将自定义的回调函数名result传入callback参数中  
        addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");      
    \}  
    //自定义的回调函数result  
    function result(data) \{  
        //我们就简单的获取apple搜索结果的第一条记录中url数据  
        alert(data.responseData.results\[0\].unescapedUrl);  
    \}  
</script>

接下来我们自己来创建一个简单的远程服务，实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示，这次我们在程序B上创建一个MyService.ashx文件。

程序B的MyService.ashx代码：

public class MyService : IHttpHandler  
    \{  
        public void ProcessRequest(HttpContext context)  
        \{  
            //获取回调函数名  
            string callback = context.Request.QueryString\["callback"\];  
            //json数据  
            string json = "\{\\"name\\":\\"chopper\\",\\"sex\\":\\"man\\"\}";  
  context.Response.ContentType = "application/json";  
            //输出：回调函数名(json数据)  
            context.Response.Write(callback + "(" + json + ")");  
        \}  
 public bool IsReusable  
        \{  
            get  \{  
                return false; \}  
        \}  
    \}

程序A的sample代码中的调用

2.window.name

如a.com网站想通过JS获取b.com网站的数据。

1 在a.com网站添加一个空HTML页。名称为：http://a.com/null.html

2 在a.com网站需要获取数据页面(如：http://a.com/getDomainData.html)内容如下：

`<!` `DOCTYPE`  `html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`

`<` `html`  `xmlns="http://www.w3.org/1999/xhtml" >`

`<` `head` `>`

`    ` `<` `title` `>跨域获取数据</` `title` `>`

`    ` `<` `script`  `type="text/javascript">`

`    ` `function domainData(url, fn)`

`    ` `{`

`        ` `var isFirst = true;`

`        ` `var iframe = document.createElement('iframe');`

`        ` `iframe.style.display = 'none';`

`        ` `var loadfn = function(){`

`            ` `if(isFirst){`

`                ` `iframe.contentWindow.location = 'http://a.com/null.html';`

`                ` `isFirst = false;`

`            ` `} else {`

`                ` `fn(iframe.contentWindow.name);`

`                ` `iframe.contentWindow.document.write('');`

`                ` `iframe.contentWindow.close();`

`                ` `document.body.removeChild(iframe);`

`                ` `iframe.src = '';`

`                ` `iframe = null;`

`            ` `}`

`        ` `};`

`        ` `iframe.src = url;`

`        ` `if(iframe.attachEvent){`

`            ` `iframe.attachEvent('onload', loadfn);`

`        ` `} else {`

`            ` `iframe.onload = loadfn;`

`        ` `}`

`        `

`        ` `document.body.appendChild(iframe);`

`    ` `}`

`    ` `</` `script` `>`

`</` `head` `>`

`<` `body` `>`

`</` `body` `>`

`    ` `<` `script`  `type="text/javascript">`

`    ` `domainData('http://b.com/data.html', function(data){`

`        ` `alert(data);`

`    ` `});`

`    ` `</` `script` `>`

`</` `html` `>`

3 在b.com中添加获取数据页面 如：http://b.com/data.html 内容需包含

`<` `script` `>`

`　　window.name = '需要跨域传递的数据';`

`</` `script` `>`

4 访问 http://a.com/getDomainData.html 就可返回 http://b.com/data.html 中的window.name中的数据了。

使用HTML5中新引进的window.postMessage方法来跨域传送数据

平时遇到问题：

1.页面和其打开的新窗口的数据传递

2.多窗口之间消息传递

3.页面与嵌套的iframe消息传递

4.上面三个问题的跨域数据传递

html5中最炫酷的API之一：就是  跨文档消息传输Cross Document Messaging。高级浏览器Internet Explorer 8+, chrome，Firefox , Opera  和 Safari 都将支持这个功能。

这个功能实现也非常简单主要包括接受信息的”message”事件和发送消息的”postMessage”方法。

举例：

postMessage(data,origin)方法接受两个参数

1.**data**:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.**origin**：字符串参数，指明目标窗口的源，协议+主机+端口号\[+URL\]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"\*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

http://test.com/index.html

![复制代码][copycode.gif]

<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
            <div id="color">Frame Color</div>
        </div>
        <div>
            <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
        </div>

![复制代码][copycode.gif]

我们可以在http://test.com/index.html通过postMessage()方法向跨域的iframe页面http://lsLib.com/lsLib.html传递消息

window.οnlοad=function(){
                window.frames[0].postMessage('getcolor','http://lslib.com');
            }

### 接收消息 ###

test.com上面的页面向lslib.com发送了消息，那么在lslib.com页面上如何接收消息呢，监听window的message事件就可以

http://lslib.com/lslib.html

window.addEventListener('message',function(e){
                    if(e.source!=window.parent) return;
                    var color=container.style.backgroundColor;
                    window.parent.postMessage(color,'*');
                },false);

这样我们就可以接收任何窗口传递来的消息了，为了安全起见，我们利用这时候的MessageEvent对象判断了一下消息源,MessageEvent是一个这样的东东

![08175214-813c8812527d45a9a74a26492584ebea.png][]

有几个重要属性

1.  **data**：顾名思义，是传递来的message
2.  **source**：发送消息的窗口对象
3.  **origin**：发送消息窗口的源（协议+主机+端口号）

这样就可以接收跨域的消息了，我们还可以发送消息回去，方法类似

### 简单的demo ###

在这个例子中，左边的div会根据右边iframe内div颜色变化而变化

![08175933-d467e28d3b4e40e08280df47189798f5.png][]   ![08175957-047bb18e0d9e43a6ad010668e44b13cc.png][]

![ExpandedBlockStart.gif][]

![复制代码][copycode.gif]

1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title>Post Message</title>
     5 </head>
     6 <body>
     7     <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
     8         <div id="color">Frame Color</div>
     9     </div>
    10     <div>
    11         <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
    12     </div>
    13 
    14     <script type="text/javascript">
    15 
    16         window.onload=function(){
    17             window.frames[0].postMessage('getcolor','http://lslib.com');
    18         }
    19 
    20         window.addEventListener('message',function(e){
    21             var color=e.data;
    22             document.getElementById('color').style.backgroundColor=color;
    23         },false);
    24     </script>
    25 </body>
    26 </html>

![复制代码][copycode.gif]

![ExpandedBlockStart.gif][]

![复制代码][copycode.gif]

1 <!doctype html>
     2 <html>
     3     <head>
     4         <style type="text/css">
     5             html,body{
          
     6                 height:100%;
     7                 margin:0px;
     8             }
     9         </style>
    10     </head>
    11     <body style="height:100%;">
    12         <div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
    13             click to change color
    14         </div>
    15         <script type="text/javascript">
    16             var container=document.getElementById('container');
    17 
    18             window.addEventListener('message',function(e){
    19                 if(e.source!=window.parent) return;
    20                 var color=container.style.backgroundColor;
    21                 window.parent.postMessage(color,'*');
    22             },false);
    23 
    24             function changeColor () {            
    25                 var color=container.style.backgroundColor;
    26                 if(color=='rgb(204, 102, 0)'){
    27                     color='rgb(204, 204, 0)';
    28                 }else{
    29                     color='rgb(204,102,0)';
    30                 }
    31                 container.style.backgroundColor=color;
    32                 window.parent.postMessage(color,'*');
    33             }
    34         </script>
    35     </body>
    36 </html>

![复制代码][copycode.gif]

在例子中页面加载的时候主页面向iframe发送’getColor‘ 请求（参数没实际用处）

window.οnlοad=function(){
                window.frames[0].postMessage('getcolor','http://lslib.com');
            }

iframe接收消息，并把当前颜色发送给主页面呢

主页面接收消息，更改自己div颜色

window.addEventListener('message',function(e){
                var color=e.data;
                document.getElementById('color').style.backgroundColor=color;
            },false);

当点击iframe事触发其变色方法，把最新颜色发送给主页面

![复制代码][copycode.gif]

![复制代码][copycode.gif]

主页面还是利用刚才监听message事件的程序处理自身变色

window.addEventListener('message',function(e){
                var color=e.data;
                document.getElementById('color').style.backgroundColor=color;
            },false);

### 最后 ###

很简单的用法却解决了大问题，据说Facebook已经在使用了，而且这也是html5另一个API——web workers传递消息的方法，那么它的浏览器兼容性怎么样呢？所谓浏览器兼容性几乎变成了IE几开始支持的问题了。。。不过好消息是跟localStorage一样，IE8+都支持了，只不过有些浏览器的低版本（比如FireFox4.0）并不支持window.onmessage=function()\{\}这种写法，所以我么最好使用事件绑定的写法，为了兼容IE，也要判断是否支持addEventListener。

当然postmessage也有一些不足的地方：

*  ie8，ie9下传递的数据类型值支持字符串类型，不过可以使用用 [JSON对象和字符串之间的相互转换][JSON] 来解决这个问题；
 *  ie6，ie7需要写兼容方案，个人认为window.name比较靠谱；

4）

### 利用iframe和location.hash ###

这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url： http://a.com\#helloword中的‘\#helloworld’就是location.hash，改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递，当然数据容量是有限的。假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息，cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面，这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据（由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe；Firefox可以修改）。同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一点有变化则获取获取hash值。代码如下：

先是a.com下的文件cs1.html文件：

cnblogs.com域名下的cs2.html:

//模拟一个简单的参数处理操作
    switch(location.hash){
        case '#paramdo':
            callBack();
            break;
        case '#paramset':
            //do something……
            break;
    }
    
    function callBack(){
        try {
            parent.location.hash = 'somedata';
        } catch (e) {
            // ie、chrome的安全机制无法修改parent.location.hash，
            // 所以要利用一个中间的cnblogs域下的代理iframe
            var ifrproxy = document.createElement('iframe');
            ifrproxy.style.display = 'none';
            ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下
            document.body.appendChild(ifrproxy);
        }
    }

a.com下的域名cs3.html

//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值
    parent.parent.location.hash = self.location.hash.substring(1);

当然这样做也存在很多缺点，诸如数据直接暴露在了url中，数据容量和类型都有限等……

5） 利用flash

这是从YUI3的IO组件中看到的办法，具体可见[http://developer.yahoo.com/yui/3/io/][http_developer.yahoo.com_yui_3_io]。  
可以看在Adobe Developer Connection看到更多的跨域代理文件规范：[ross-Domain Policy File Specifications][]、[HTTP Headers Blacklist][ross-Domain Policy File Specifications]。

10)闭包：

官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：

1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。

2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

简单的说，javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

简言之，闭包是由函数引用其周边状态（词法环境）绑在一起形成的（封装）组合结构。在 JavaScript 中，闭包在每个函数被创建时形成。

这是基本原理，但为什么我们关心这些？实际上，由于闭包与它的词法环境绑在一起，因此闭包让我们能够从一个函数内部访问其外部函数的作用域。

要使用闭包，只需要简单地将一个函数定义在另一个函数内部，并将它暴露出来。要暴露一个函数，可以将它返回或者传给其他函数。

内部函数将能够访问到外部函数作用域中的变量，即使外部函数已经执行完毕。

以下两端代码都能依次点击弹出0，1，2，3...

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js闭包</title>
        <style>
            *{margin: 0;padding: 0;}
            li{line-height: 30px;background: red;border-bottom: 1px solid #000}
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
    </html>
    <script>
        window.οnlοad=function(){
            var olis=document.getElementsByTagName('li');
            for(var i=0;i<olis.length;i++){
                eventClick(olis,i);
            }
        }
        function eventClick(obj,i){
             obj[i].οnclick=function(){
                alert(i);
            }
        }
    </script>

方法二：

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js闭包</title>
        <style>
            *{margin: 0;padding: 0;}
            li{line-height: 30px;background: red;border-bottom: 1px solid #000}
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
    </html>
    <script>
        window.οnlοad=function(){
            var olis=document.getElementsByTagName('li');
            for(var i=0;i<olis.length;i++){
                (function(i){
                    olis[i].οnclick=function(){
                        alert(i);
                    };
                })(i);
            }
        }
    </script>

缺点  
：内存泄漏

11）注意下面两段代码（代码A和代码B输出结果是不同的）

window.οnlοad=function(){
    var scope="global";  
    function t(){  
        console.log(scope);  
        var scope="local"  
        console.log(scope);  
    }  
    t();
    }

代码B：

window.οnlοad=function(){
    var color="blue";
    function changeColor(){
    console.log(color);
    if(color==="blue"){
    color="red";
    }else{
    color:"blue";
    }
    }
    changeColor();
    alert(color);
    }
    </script>

12）

[Image 1]: 
[http_ajax.googleapis.com_ajax_services_search_web_v_1.0_q_callback]: http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?
[copycode.gif]: /images/20220716/60da2356d99046d7ada81070de9374aa.png
[08175214-813c8812527d45a9a74a26492584ebea.png]: /images/20220716/8f2cc2dc20164bfa993a1d7e5cc6904f.png
[08175933-d467e28d3b4e40e08280df47189798f5.png]: http://images.cnitblog.com/blog/349217/201312/08175933-d467e28d3b4e40e08280df47189798f5.png
[08175957-047bb18e0d9e43a6ad010668e44b13cc.png]: /images/20220716/885b7a62e45048939f958b3ff7283aaf.png
[ExpandedBlockStart.gif]: /images/20220716/aeba05df27ed43269cce696d2c5df1c2.png
[JSON]: http://www.css88.com/archives/3919
[http_developer.yahoo.com_yui_3_io]: http://developer.yahoo.com/yui/3/io/
[ross-Domain Policy File Specifications]: http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html