javascript常见的20个问题与解决方法
<!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请求，为null</p>
<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大小支持能达到5M</p>
<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 />
Object</p>
<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 function</p>
<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 MANIFEST</p>
<p>CACHE:<br />
myapp.html<br />
myapp.css<br />
myapp.js</p>
<p>FALLBACK:<br />
videos/ offline_help.html</p>
<p>NETWORK:<br />
cgi/</p>
<p> </p>
<p><strong>11、客户端存储localStorage和sessionStorage</strong><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 x</p>
<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 data</p>
<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可以删除指定cookie</p>
<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 TypeError</p>
<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>
javascript常见的20个问题与解决方法
javascript常见的20个问题与解决方法的更多相关文章
- PHP开发中常见的安全问题详解和解决方法（如Sql注入、CSRF、Xss、CC等
页面导航: 首页 → 网络编程 → PHP编程 → php技巧 → 正文内容 PHP安全 PHP开发中常见的安全问题详解和解决方法(如Sql注入.CSRF.Xss.CC等) 作者: 字体:[增加 减小 ...
- Oracle常见死锁发生的原因以及解决方法
Oracle常见死锁发生的原因以及解决办法 一,删除和更新之间引起的死锁 造成死锁的原因就是多个线程或进程对同一个资源的争抢或相互依赖.这里列举一个对同一个资源的争抢造成死锁的实例. Oracle 1 ...
- Tomcat常见的内存溢出，以及解决方法
一.常见的三种内存溢出错误: 1.java.lang.OutOfMemoryError:java heap space ====JVM Heap(堆)溢出 JVM再启动的时候回自动设置JVM H ...
- 【javascript】浮点数运算问题分析及解决方法
问题: 在用 js 进行小数四则运算时发现了一个重大问题,比如:0.7 * 0.8 = 0.5599999999999999 分析: 在 js 中只有一种数字类型 Number,而且在 js 中所有的 ...
- 【FAQ】接入HMS Core推送服务，服务端下发消息常见错误码原因分析及解决方法
HMS Core推送服务支持开发者使用HTTPS协议接入Push服务端,可以从服务器发送下行消息给终端设备.这篇文章汇总了服务端下发消息最常见的6个错误码,并提供了原因分析和解决方法,有遇到类似问题的 ...
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 （ 摘自zdwzdwzdw）
笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜 ...
- 1、IIS常见的的问难及解决方法
配置IIS 7.5 出现的问题及解决办法: 1.问题: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Tempor ...
- vue.js常见的报错信息及其解决方法的记录
1.Vue packages version mismatch 翻译:vue包版本匹配错误 报错样例: 报错原因:通常出现于一些依赖库的更新或者安装新的依赖库之后(可以认为npm update已经成为 ...
- 移动端遇到的常见JS与CSS问题及解决方法
由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidde ...
随机推荐
- 杂(三)-The type java.lang.Object cannot be resolved It is indirectly referenced ...
The type java.lang.Object cannot be resolved. It is indirectly referenced from required .class files ...
- PJSIP dialog inv销毁
PJSIP的Diaglog(类型为pjsip_dialog) 可以被外部调用,同时PJSIP有自己的机制销毁用户创建的 Dialog,如PJSIP内部销毁了某个Diaglog,用户在不知情的情况下继续 ...
- SQL数据库从高版本到低版本的迁移，同时解决sql脚本文件太大无法打开的尴尬问题
as we known,sql数据库高版本向低版本还原是不太可能但是又经常会碰到的事,今天实测了一种方法 步骤:任务—>生成脚本—> 下一步->高级,选择数据库版本和编写脚本数据类型 ...
- sql server 集群配置
Windows server2003 + sql server2005 集群配置安装 一:环境 软硬件环境 虚拟3台windows server 2003主机.当中一台做域控DC,另外两台作为节点wi ...
- 分享牛人就是的volatilekeyword
volatile作用 一个定义为volatile的变量是说这变量可能会被意想不到地改变.这样,编译器就不会去如果这个变量的值了. 精确地说就是.优化器在用到这个变量时必须每次都小心地又一次读取这个变量 ...
- Flask--上下文源码流程
- iOS UIView添加阴影
_bottomView.layer.masksToBounds = NO; _bottomView.backgroundColor = [UIColor whiteColor]; _bottomVie ...
- 改进Spring中的分页技术
Spring中有一个PagedListHolder,能够实现分页. 但此类有几个缺点: 1. 使用此类的代码比較繁琐 2. 此类存放的数据源是全部的记录集,即对于记录数为1000条的数据,即使我们仅仅 ...
- 4.关于QT中的QFile文件操作,QBuffer,Label上加入QPixmap,QByteArray和QString之间的差别,QTextStream和QDataStream的差别,QT内存映射（
新建项目13IO 13IO.pro HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += gui widgets network CON ...
- WPF Button TextBox 圆角
<!--圆角button--> <Style TargetType="Button"> <Setter Property="FontSize ...