|
1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现 div{position:absolute;width:200px;height:200px;top:50%;left:50%;margin-left:-100px;height:-100px;z-index:1000;}
2. 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式： <body> <h3>实现三列宽度自适应布局</h3> <div id = 'left'>我是左边</div> <div id = 'right'>我是右边</div> <div id = 'center'>我是中间</div> </body>
html,body{ margin: 0px;width: 100%; } h3{height: 100px;margin:20px 0 0;} #left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;} #left{left:0px;} #right{right: 0px;} #center{margin:2px 210px ;background-color: #eee;height: 200px; }
3. 如何用原生js给一个按钮绑定两个onclick事件？ Var btn=document.getElementById(‘btn’);//事件监听 绑定多个事件var btn4 = document.getElementById('btn4');btn4.addEventListener('click',hello1);btn4.addEventListener('click',hello2);
function hello1(){ alert('hello 1')}
function hello2(){ alert('hello 2');}
4.计算一个数组arr所有元素的和 var arr1=[1,2,3,4,5,6,7,8,9];var sum1=0;for (var i=0;i<=arr1.length;i++) { if (typeof arr1[i]=='number') { sum1+=arr1[i]; }}document.write(sum1);
function sum2(arr){var all=0;for (var i=0;i<arr.length;i++) { if (typeof arr[i]=='number') { all+=arr[i]; } } return all;}document.write(sum2([1,2,3,4]));
5.编写一个方法去掉数组里面 重复的内容 var arr=[1,2,3,4,5,1,2,3] 一个数组去重的简单实现 var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];//定义一个新的数组var s = [];//遍历数组for(var i = 0;i<arr.length;i++){ if(s.indexOf(arr[i]) == -1){ //判断在s数组中是否存在，不存在则push到s数组中 s.push(arr[i]) }}console.log(s);//输出结果：['abc', 'abcd', 'sss', '2', 'd', 't', 'ss', 'f', '22']
6.ajax的步骤 ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。var xhttp;if (window.XMLHttpRequest) {//现代主流浏览器xhttp = new XMLHttpRequest();} else {// 针对浏览器，比如IE5或IE6xhttp = new ActiveXObject('Microsoft.XMLHTTP');}
第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数7. 块级元素水平垂直居中的方法有哪些（三个方法） 让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！ 实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。.mycss{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px }
实现二原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。.mycss{ position: absolute; left: 0px; right: 0; top: 0; bottom: 0; margin: auto; height: 200px; width: 300px;}
原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大 小时，都要执行设置div等块级元素的CSS。$(window).resize(function(){ $('.myblock').css({ position: 'absolute', left: ($(window).width() - $('.myblock').outerWidth())/2, top: ($(window).height() - $('.myblock').outerHeight())/2 }); });
//此外在页面载入时，就需要调用resize()方法$(function(){ $(window).resize();});
8.三个盒子，左右定宽，中间自适应有几种方法 第一种：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。<div style='width:100%; margin:0 auto;'> <div style='width:200px; float:right; background-color:#960'>这是右侧的内容 固定宽度</div> <div style='width:150px; float:left; background:#6FF'>这是左侧的内容 固定宽度</div> <div style='margin-left:150px;margin-right:200px; background-color:#9F3'>中间内容，自适应宽度</div> </div>
第二种：左右两侧采用绝对定位 中间同样采用margin-left margin-right 使用这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，先来看其代码吧：
<div id='main'> <div id='mainContainer'>main content</div></div><div id='left'> <div id='leftContainer' class='inner'>left content</div></div><div id='right'> <div id='rightContainer' class='inner'>right</div></div>
#main { float: left; width: 100%;}#mainContainer { margin: 0 230px; height: 200px; background: green;}#left { float: left; margin-left: -100%; width: 230px}
#right { float: left; margin-left: -230px; width: 230px;}
#left .inner,#right .inner { background: orange; margin: 0 10px; height: 200px;}
9. 如何进行网站性能优化 1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。3. 在使用 DOM 操作库时用上 array-ids11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染12. 用于未来的一个建议：使用 service workers + 流10. react和vue有哪些不同，说说你对这两个框架的看法 相同点: · 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范· 都有支持native的方案,React的React native,Vue的weex· React严格上只针对MVC的view层,Vue则是MVVM模式· virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制· 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;· 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的· state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理11.什么是mvvm mvc是什么区别 原理 一、MVC（Model-View-Controller）MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。MVC使用非常广泛，比如JavaEE中的SSH框架二、MVVM（Model-View-ViewModel）如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。12.px和em的区别 px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。13.优雅降级和渐进增强 渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容14.eval()的作用 把字符串参数解析成JS代码并运行，并返回执行的结果；eval('2+3');//执行加运算，并返回运算值。 eval('varage=10');//声明一个age变量 //eval的作用域function a(){ eval('var x=1'); //等效于 var x=1; console.log(x); //输出1 }
a(); console.log(x);//错误 x没有定
15. JS哪些操作会造成内存泄露 function leak(){ leak='xxx';//leak成为一个全局变量，不会被回收 }
4）被遗忘的定时器或者回调 5）子元素存在引起的内存泄露16.关于JS事件冒泡与JS事件代理（事件委托） 事件作为DOM操作重要的一环，需要大家好好理解和运用，今天特意看了一下事件冒泡和事件代理的相关资料，感触颇深，也深感自己的无知不知道多浪费了多少内存，废话不多说进入正题： 通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。 事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？对，就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托：有可能在开发的时候会遇到这种情况：如导航每一个栏目都要加一个事件，你可能会通过遍历来给每个栏目添加事件： var ul = document.getElementById('parentUl'); ul.οnclick=function (event) { var e = event||window.event, source = e.target || e.srcElement;//target表示在事件冒泡中触发事件的源元素，在IE中是srcElement if(source.nodeName.toLowerCase() == 'li'){ //判断只有li触发的才会输出内容 alert(source.innerHTML); } stopPropagation(e); //阻止继续冒泡 };
function addElement() { var li = document.createElement('li'); li.innerHTML='我是新孩子'; ul.appendChild(li); }
17. CSS样式覆盖规则 规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜规则三：直接指定的样式发生冲突时，样式权值高者获胜。可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。!important可以看做是万不得已的时候，打破上述四个规则的”金手指”。如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。18. 介绍一下box-sizing属性 首先，box-sizing属性在FireFox中存在兼容问题，所以需要使用-moz-box-sizing做一下兼容。· 在CSS中定义的宽度和高度就对应到元素的内容框· 在CSS中定义的宽度和高度之外绘制元素的内边距和边框· 在CSS中微元素设定的宽度和高度就决定了元素的边框盒· 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制· CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度19. 请简要描述margin重合问题，及解决方式 1图片的margin-top与3图片的margin-top发生重叠，2图片的margin-bottom与3图片的margin-bottom发生重叠。这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。（1）在最外层的div中加入overflow:hidden;zoom:1（3）在最外层加入：border:1px solid #cacbcc;1图片的margin-bottom与2图片的margin-top发生重叠，这时候重叠之后的margin值由发生重叠两图片的最大值的决定的。float:left（只能解决IE6浏览器中的异向重叠问题，可以解决IE8以上、chorme、firefox、opera下的同向重叠问题）20.什么是闭包，如何使用它，为什么要使用它？ 包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。· 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。· 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。39.请解释JSONP的工作原理，以及它为什么不是真正的AJAX。 JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！21.请解释一下JavaScript的同源策略。 在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议, 相同的端口，相同的host，那么我们就可以认为它们是相同的域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。22.怎样添加、移除、移动、复制、创建和查找节点？ createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点getElementsByTagName() //通过标签名称getElementsByName() //通过元素的Name属性的值getElementById() //通过元素Id，唯一性23.谈谈垃圾回收机制方式及内存管理 1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。function fn1() { var obj = {name: 'hanzichi', age: 10};}function fn2() { var obj = {name:'hanzichi', age: 10}; return obj;}var a = fn1();var b = fn2();
fn1中定义的obj为局部变量，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。 4、垃圾回收策略：标记清除(较为常用)和引用计数。 定义和用法：当变量进入环境时，将变量标记'进入环境'，当变量离开环境时，标记为：'离开环境'。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。 到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。 定义和用法：引用计数是跟踪记录每个值被引用的次数。 基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。24、px和em的区别 异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。25、浏览器的内核分别是什么? Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome：Blink(基于webkit，Google与Opera Software共同开发)26、什么叫优雅降级和渐进增强？ 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带27、sessionStorage 、localStorage 和 cookie 之间的区别 (1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费； web storage,会将数据保存到本地，不会造成宽带浪费；(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器； sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；28、浏览器是如何渲染页面的？ 自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；3.将CSS与DOM合并，构建渲染树（Render Tree）4.布局和绘制，重绘（repaint）和重排（reflow）29:js的基本数据类型 JavaScript中有五种基本数据类型，它们分别是：undefined，null，boolean，number，string。30：事件委托 事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件，委托给更大范围的dom去处理。好比送信员，如果每次都把信件送给每一户，非常繁琐。但是如果交给一个大范围的管理者，比如小区的传达室，那么事情会变得非常简单。事件委托就类似这种原理，我页面中有很多按钮，如果不使用事件委托，我只能在每个按钮上注册事件。非常麻烦。但如果我把事件注册在一个大范围的div（假设所有的按钮都在这个div中），那么我只要注册一次事件，就可以处理所有按钮（只要按钮包含在上述div中）事件的响应了31：从输入url到显示页面，都经历了什么 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）5、握手成功后，浏览器向服务器发送http请求，请求数据包。32：new操作符到底到了什么 var Func=function(){ }; var func=new Func (); new共经过了4几个阶段#1、创建一个空对象varobj=new Object(); #2、设置原型链obj.__proto__= Func.prototype; #3、让Func中的this指向obj，并执行Func的函数体。var result =Func.call(obj); #4、判断Func的返回值类型：#如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。if (typeof(result) == 'object'){ func=result; } else{ func=obj;; }
33：vue的生命周期 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！ beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板 beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！ beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 34：请写出你对闭包的理解，并列出简单的理解 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。35：display none visibility hidden区别？ 1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。36：JavaScript中如何检测一个变量是一个String类型？请写出函数实现 obj.constructor === String37：如何理解闭包？ 1、定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。2、表现形式：使函数外部能够调用函数内部定义的变量。(1)、根据作用域链的规则，底层作用域没有声明的变量，会向上一级找，找到就返回，没找到就一直找，直到window的变量，没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。var count=10; //全局作用域 标记为flag1function add(){var count=0; //函数全局作用域 标记为flag2return function(){ count+=1; //函数的内部作用域 alert(count); }}var s = add()s();//输出1s();//输出2
要理解闭包，首先必须理解Javascript特殊的变量作用域。1、函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。2、函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！1）滥用闭包，会造成内存泄漏：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。2）会改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。38：谈谈垃圾回收机制方式及内存管理 1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。function fn1() { var obj = {name: 'hanzichi', age: 10};}
function fn2() { var obj = {name:'hanzichi', age: 10}; return obj;}var a = fn1();var b = fn2();
fn1中定义的obj为局部变量，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。 4、垃圾回收策略：标记清除(较为常用)和引用计数。 定义和用法：当变量进入环境时，将变量标记'进入环境'，当变量离开环境时，标记为：'离开环境'。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。 到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。 定义和用法：引用计数是跟踪记录每个值被引用的次数。 基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。39：判断一个字符串中出现次数最多的字符，统计这个次数 var str = 'asdfssaaasasasasaa';var json = {};for (var i = 0; i < str.length; i++) { if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1; }else{ json[str.charAt(i)]++ }};var iMax = 0;var iIndex = '';for(var i in json){ if(json[i]>iMax){ iMax = json[i]; iIndex = i; }} console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
|
