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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript常见的20个问题与解决方法title>
head>
<body>
<h1>javascript常见的20个问题与解决方法h1>
<p><br />
<strong>1、offsetWidth/offsetHeight，clientWidth/clientHeight与scrollWidth/scrollHeight的区别strong><br />
1）offsetWidth/offsetHeight返回值包含content+padding+border，效果与e.getBoundingClientRect()相同<br />
2）clientWidth/clientHeight返回值只包含content+padding，如果有滚动条，也不包含滚动条<br />
3）scrollWidth/scrollHeight返回值包含content+padding+溢出内容的尺寸p>
<p><strong>2、XMLHttpRequest通用属性和方法strong><br />
1）readyState：表示请求状态的整数，取值：<br />
UNSENT(0)：对象已创建<br />
OPENED(1)：open()成功调用，在这个状态下，可以为xhr设置请求头，或者使用send()发送请求<br />
HEADERS_RECEIVED(2)：所有重定向已经自动完成访问，并且最终响应的http头已经收到<br />
LOADING(3)：响应体正在接收<br />
DONE(4)：数据传输完成或者传输产生错误<br />
2）onreadystatechange：readyState改变时调用的函数<br />
3）status：服务器返回的http状态码（如：200,404）<br />
4）statusText：服务器返回的http状态信息（如：ok，no content）<br />
5）responseText：作为字符串形式的来自服务器的完整响应<br />
6）responseXML：Document对象，表示服务器的响应解析成的XML文档<br />
7）abort()：取消异步http请求<br />
8）getAllResponseHeaders()：返回一个字符串，包含响应中服务器发送的全部http报头。每个报头都是一个用冒号分隔开的名/值对，并且使用一个回车/换行来分隔报头行<br />
9）getResponseHeader(headerName)：返回headName对应的报头值<br />
10）open(method,url,asynchronous [,user,password])：初始化准备发送到服务器上的请求<br />
method：http方法，不区分大小写<br />
url：请求发送的相对或绝对url<br />
asynchronous：表示请求是否异步<br />
user和password：提供身份验证<br />
11）setRequestHeader(name,value)：设置http报头<br />
12）send(body)：对服务器请求进行初始化。参数body包含请求的主体部分，对于post请求为键值对字符串；对于get请求，为nullp>
<p><strong>3、focus/blur与focusin/focusout的区别与联系strong><br />
1）focus/blur不冒泡，focusin/focusout冒泡<br />
2）focus/blur兼容性好，focusin/focusout在除FireFox外的浏览器下都保持良好兼容性，如需使用事件托管，可考虑在FireFox下使用事件捕获elem.addEventListener('focus',handler,true)<br />
3）可获得焦点的元素：<br />
i.window<br />
ii.链接被点击或键盘操作<br />
iii.表单空间被点击或键盘操作<br />
iv.设置tabindex属性的元素被点击或键盘操作p>
<p><strong>4、mouseover/mouseout与mouseenter/mouseleave的区别与联系strong><br />
1）mouseover/mouseout是标准事件，所有浏览器都支持；mouseenter/mouseleave是IE5.5引入的特有事件，后来被DOM3标准采纳，现代标准浏览器也支持<br />
2）mouseover/mouseout是冒泡事件；mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时，推荐mouseover/mouseout托管，提高性能<br />
3）标准事件模型中event.target表示发生移入/出的元素，event.relatedTarget对应移出/入元素；在老IE中event.srcElement表示发生移入/出的元素，event.toElement表示移出的目标元素，event.fromElement表示移入时的来源元素<br />
例子：鼠标从div#target元素移出时进行处理，判断逻辑如下：<br />
<div id="target"><span>test</span></div>p>
<p><script type="text/javascript"><br />
var target = document.getElementById('target');<br />
if (target.addEventListener) {<br />
target.addEventListener('mouseout', mouseoutHandler, false);<br />
} else if (target.attachEvent) {<br />
target.attachEvent('onmouseout', mouseoutHandler);<br />
}p>
<p>function mouseoutHandler(e) {<br />
e = e || window.event;<br />
var target = e.target || e.srcElement;p>
<p> // 判断移出鼠标的元素是否为目标元素<br />
if (target.id !== 'target') {<br />
return;<br />
}p>
<p> // 判断鼠标是移出元素还是移到子元素<br />
var relatedTarget = event.relatedTarget || e.toElement;<br />
while (relatedTarget !== target<br />
&& relatedTarget.nodeName.toUpperCase() !== 'BODY') {<br />
relatedTarget = relatedTarget.parentNode;<br />
}p>
<p> // 如果相等，说明鼠标在元素内部移动<br />
if (relatedTarget === target) {<br />
return;<br />
}p>
<p> // 执行需要操作<br />
//alert('鼠标移出');p>
<p>}<br />
</script>p>
<p> p>
<p><strong>5、sessionStorage，localStorage，cookie区别strong><br />
1）都会在浏览器端保存，有大小限制，同源限制<br />
2）cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage不会发送到服务器<br />
3）cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie<br />
4）有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除<br />
5）共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享<br />
6）localStorage的修改会触发其他文档窗口的update事件<br />
7）cookie有secure属性，要求https传输<br />
8）浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5Mp>
<p><strong>6、javascript跨域通信strong><br />
同源：两个文档同源需满足<br />
1）协议相同<br />
2）域名相同<br />
3）端口相同<br />
跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。<br />
跨域通信通常有以下方法：<br />
1）如果是log之类的简单单项通信，新建<img>，<script>，<link>，<iframe>元素，通过src，href属性设置为目标url，实现跨域请求<br />
2）如果请求json数据，使用<script>进行jsonp请求<br />
3）现代浏览器中多窗口通信使用html5规范的targetWindow.postMessage(data,origin);其中data是需要发送的对象，origin是目标窗口的origin。window.addEventListener('message',handler,false);handler的event.data是postMessage发送来的数据，event.orgin是发送窗口的origin，event.source是发送消息的窗口引用<br />
4）内部服务器代理请求跨域url，然后返回数据<br />
5）跨域请求数据，现代浏览器可使用html5规范的cors功能，只要目标服务器返回http头部Access-Control-Allow-Origin:*即可像普通ajax一样访问跨域资源p>
<p><strong>7、javascript有哪几种数据类型？strong><br />
六种基本数据类型：<br />
undefined<br />
null<br />
string<br />
boolean<br />
number<br />
symbol<br />
一种引用类型<br />
Objectp>
<p><strong>8、什么是闭包？闭包有什么用？strong><br />
闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。<br />
闭包作用域链通常包括三个部分：<br />
1）函数本身作用域<br />
2）闭包定义时的作用域<br />
3）全局作用域<br />
闭包常见用途：<br />
1）创建特权方法用于访问控制<br />
2）事件处理程序及回调p>
<p>9、javascript有哪几种方法定义函数？<br />
1）函数声明表达式<br />
2）function操作符<br />
3）Function构造函数<br />
4）ES6：arrow functionp>
<p><strong>10、应用程序存储和离线web应用strong><br />
html5新增应用程序缓存，允许web应用将应用程序自身保存到用户浏览器中，用户离线状态也能访问。<br />
1）为html元素设置manifest属性：<html manifest="myapp.appcache">，其中后缀名只是一个约定，真正识别方式是通过text/cache-manifest作为MIME类型。所以需要配置服务器保证设置正确<br />
2）manifest文件首行为CACHE MANIFEST，其余就是要缓存的URL列表，每个一行，相对路径都相对于manifest文件的url。注释以#开头<br />
3）url分为三种类型：CACHE为默认类型，NETWORK表示资源从不缓存，FALLBACK每行包含两个url，第二个url是指需要加载和存储在缓存中的资源，第一个url是一个前缀。任何匹配该前缀的url都不会缓存，如果从网络中载入这样的url失败的话，就会用第二个url指定的缓存资源来替代。以下是一个文件例子：<br />
CACHE MANIFESTp>
<p>CACHE:<br />
myapp.html<br />
myapp.css<br />
myapp.jsp>
<p>FALLBACK:<br />
videos/ offline_help.htmlp>
<p>NETWORK:<br />
cgi/p>
<p> p>
<p><strong>11、客户端存储localStorage和sessionStoragestrong><br />
1）localStorage有效期为永久，sessionStorage有效期为顶层窗口关闭前<br />
2）同源文档可以读取并修改localStorage数据，sessionStorage只允许同一个窗口下的文档访问，如通过iframe引入的同源文档<br />
3）Storage对象通常被当做普通js对象使用：通过设置属性来存取字符串值，也可以通过setItem(key,value)设置，getItem(key)读取，removeItem(key)删除，clear()删除所有数据，length表示已存储的数据项数目，key(index)返回对应索引的key<br />
localStorage.setItem('x', 1); // storge x->1<br />
localStorage.getItem('x); // return value of xp>
<p>// 枚举所有存储的键值对<br />
for (var i = 0, len = localStorage.length; i < len; ++i ) {<br />
var name = localStorage.key(i);<br />
var value = localStorage.getItem(name);<br />
}p>
<p>localStorage.removeItem('x'); // remove x<br />
localStorage.clear(); // remove all datap>
<p> p>
<p><strong>12、cookie及其操作strong><br />
1）cookie是web浏览器存储的少量数据，最早设计为服务器端使用，作为HTTP协议的扩展实现。cookie数据会自动在浏览器和服务器之间传输。<br />
2）通过读写cookie检测是否支持<br />
3）cookie属性有名，值，max-age，path, domain，secure；<br />
4）cookie默认有效期为浏览器会话，一旦用户关闭浏览器，数据就丢失，通过设置max-age=seconds属性告诉浏览器cookie有效期<br />
5）cookie作用域通过文档源和文档路径来确定，通过path和domain进行配置，web页面同目录或子目录文档都可访问<br />
6）通过cookie保存数据的方法为：为document.cookie设置一个符合目标的字符串如下<br />
7）读取document.cookie获得'; '分隔的字符串，key=value,解析得到结果<br />
document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';p>
<p>document.cookie = 'name=aaa; path=/; domain=domain; secure';<br />
// 要改变cookie的值，需要使用相同的名字、路径和域，新的值<br />
// 来设置cookie，同样的方法可以用来改变有效期p>
<p>// 设置max-age为0可以删除指定cookiep>
<p>//读取cookie，访问document.cookie返回键值对组成的字符串，<br />
//不同键值对之间用'; '分隔。通过解析获得需要的值p>
<p> p>
<p><strong>13、javascript有哪些方法定义对象？strong><br />
1）对象字面量：var obj = {};<br />
2）构造函数：var obj = new Object();<br />
3）Object.create()：var obj = Object.create(Object.prototype);p>
<p><strong>14、===运算符判断相等的流程是怎样的？strong><br />
1）如果两个值不是相同类型，它们不相等<br />
2）如果两个值都是null或者都是undefined，它们相等<br />
3）如果两个值都是布尔类型true或者都是false，它们相等<br />
4）如果其中有一个是NaN，它们不相等<br />
5）如果都是数值型并且数值相等，它们相等，-0等于0<br />
6）如果它们都是字符串并且在相同位置包含相同的16位值，它们相等；如果在长度或者内容上不等，它们不相等；两个字符串显示结果相同但是编码不同，==和===都认为它们不相等<br />
7）如果它们指向相同对象、数组、函数，它们相等；如果指向不同对象，它们不相等p>
<p><strong>15、==运算符判断相等的流程是怎样的？strong><br />
1）如果两个值类型相同，按照===比较方法进行比较<br />
2）如果类型不同，使用如下规则进行比较<br />
i.如果其中一个值是null，另一个是undefined，它们相等<br />
ii.如果一个值是数字另一个是字符串，将字符串转换为数字进行比较<br />
iii.如果有布尔类型，将true转换为1，false转换为0，然后用==规则继续比较<br />
iv.如果一个值是对象，另一个是数字或字符串，将对象转换为原始值然后用==规则继续比较<br />
v.其他所有情况都认为不相等p>
<p><strong>16、对象到字符串的转换步骤strong><br />
1）如果对象有toString()方法，js调用它。如果返回一个原始值（primitive value如：string,number,boolean），将这个值转换为字符串作为结果<br />
2）如果对象没有toString()方法或者返回值不是原始值，js寻找对象的valueOf()方法，如果存在就调用它，返回结果是原始值则转为字符串作为结果<br />
3）否则，js不能从toString()或者valueOf()获得一个原始值，此时throws a TypeError<br />
<br />
<strong>17、对象到数字的转换步骤strong><br />
1）如果对象有valueOf()方法并且返回元素值，js将返回值转换为数字作为结果<br />
2）否则，如果对象有toString()并且返回原始值，js将返回结果转换为数字作为结果<br />
3）否则，throws a TypeErrorp>
<p><strong>18、+运算符工作流程strong><br />
1）如果有操作数是对象，转换为原始值<br />
2）此时如果有一个操作数是字符串，其他的操作数都转换为字符串并执行连接<br />
3）否则，所有操作数都转换为数字并执行家法p>
<p><strong>19、函数内部arguments变量有哪些特性,有哪些属性,如何将它转换为数组？strong><br />
1）arguments所有函数中都包含的一个局部变量，是一个类数组对象，对应函数调用时的实参。如果函数定义同名参数会在调用时覆盖默认对象<br />
2）arguments[index]分别对应函数调用时的实参，并且通过arguments修改实参时会同时修改实参<br />
3）arguments.length为实参的个数（Function.length表示形参长度）<br />
4）arguments.callee为当前正在执行的函数本身，使用这个属性进行递归调用时需注意this的变化<br />
5）arguments.caller为调用当前函数的函数（已被遗弃）<br />
6）转换为数组：var args = Array.prototype.slice.call(arguments, 0);p>
<p><strong>20、评价一下三种方法实现继承的优缺点，并改进strong><br />
function Shape() {}p>
<p>function Rect() {}p>
<p>// 方法1<br />
Rect.prototype = new Shape();p>
<p>// 方法2<br />
Rect.prototype = Shape.prototype;p>
<p>// 方法3<br />
Rect.prototype = Object.create(Shape.prototype);p>
<p>Rect.prototype.area = function () {<br />
// do something<br />
};<br />
p>
<p>方法1：<br />
1）优点：正确设置原型链实现继承<br />
2）优点：父类实例属性得到继承，原型链查找效率提高，也能为一些属性提供合理的默认值<br />
3）缺点：父类实例属性为引用类型时，不恰当地修改会导致所有子类被修改<br />
4）缺点：创建父类实例作为子类原型时，可能无法确定构造函数需要的合理参数，这样提供的参数继承给子类没有实际意义，当子类需要这些参数时应该在构造函数中进行初始化和设置<br />
5）总结：继承应该是继承方法而不是属性，为子类设置父类实例属性应该是通过在子类构造函数中调用父类构造函数进行初始化<br />
方法2：<br />
1）优点：正确设置原型链实现继承<br />
2）缺点：父类构造函数原型与子类相同。修改子类原型添加方法会修改父类<br />
方法3：<br />
1）优点：正确设置原型链且避免方法1.2中的缺点<br />
2）缺点：ES5方法需要注意兼容性<br />
改进：<br />
1）所有三种方法应该在子类构造函数中调用父类构造函数实现实例属性初始化<br />
function Rect() {<br />
Shape.call(this);<br />
}<br />
p>
<p>2）用新创建的对象替代子类默认原型，设置Rect.prototype.constructor = Rect;保证一致性<br />
3）第三种方法的polyfill：<br />
function create(obj) {<br />
if (Object.create) {<br />
return Object.create(obj);<br />
}p>
<p> function f() {};<br />
f.prototype = obj;<br />
return new f();<br />
}<br />
p>
body>
html>
