前端面试题总结（part 3）: javascript 概念部分

1. DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系

• e.getAttribute()，是标准DOM操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性
• e.propName通常是在HTML文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如a标签生成HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用getAttribute进行访问
• e.getAttribute()返回值是源文件中设置的值，类型是字符串或者null（有的实现返回""）
• e.propName返回值可能是字符串、布尔值、对象、undefined等
• 大部分attribute与property是一一对应关系，修改其中一个会影响另一个，如id，title等属性
• 一些布尔属性<input hidden/>的检测设置需要hasAttribute和removeAttribute来完成，或者设置对应property
• 像<a href="../index.html">link</a>中href属性，转换成property的时候需要通过转换得到完整URL
• 一些attribute和property不是一一对应如：form控件中<input value="hello"/>对应的是defaultValue，修改或设置value property修改的是控件当前值，setAttribute修改value属性不会改变value property

2. offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

•  offsetWidth/offsetHeight 返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
• clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，不包含滚动条
• scrollWidth/scrollHeight 返回值包含content + padding +溢出内容的尺寸

 3. XMLHttpRequest通用属性和方法

• readyState:表示请求状态的整数，取值：

        UNSENT(0) : 对象已创建

        OPENED(1):open()成功调用，在这个状态下，可以为xhr设置请求头，或者使用send()发送请求

        HEADERS_RECEIVED(2)所有重定向已经自动完成访问，并且最终响应的HTTP头已经收到

        LOADING(3):响应体正在接收

        DONE（4）：数据传输完成或者数据传输错误

• onreadystatechange:readyState改变时调用的函数
• status：服务器返回的状态码
• statusText:状态码信息
• responseText：作为字符串像是的来自服务器的完整响应
• responseXML：Document对象，表示服务器的响应解析成XML文档
• abort()：取消异步HTTP请求
• getAllResponseHeaders(): 返回一个字符串，包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对，并且使用一个回车/换行来分隔报头行
• getResponseHeader(headerName):返回headName对应的报头值
• open(method,url,asynchronous [, user, password])) : 初始化准备发送到服务器上的请求。method是HTTP方法，不区分大小写；url是请求发送的相对或绝对URL；asynchronous表示请求是否异步；user和password提供身份验证
• setRequestHeader(name, value):设置HTTP报头
• send(body):对服务器请求进行初始化。参数body包含请求的主体部分，对于POST请求为键值对字符串；对于GET请求，为null

4. focus/blur与focusin/focusout的区别与联系

• focus/blur  不冒泡，focusin/focusout 冒泡
• focus/blur 兼容性好，focusin/focusout 在除FireFox外的浏览器下都保持良好的兼容性，如需使用时间托管，可考虑在FF下使用事件捕获elem.addEventListener('focus', handler, true)
• 可获得焦点的元素

         window：当页面窗口从隐藏变成前置可见时，focus 事件就会触发

         表单元素(form controllers)：input/option/textarea/button

         链接元素(links)：a标签、area标签（必须要带 href 属性，包括 href 属性为空）

         设置了 tabindex 属性（tabindex 值非-1）的元素

         设置了contenteditable = "true"属性的元素

• 想一个元素获得焦点，可通过以下三种方式：

       鼠标点击

       tab键

       调用focus（）方法

 

5. mouseover/mouseout与mouseenter/mouseleave的区别与联系

• mouseover/mouseout 是标准事件，所有浏览器都支持；mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳，现代标准浏览器也支持
• mouseover/mouseout是冒泡事件；mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入移出事件时，推荐用mouseover/mouseout托管，提高性能
• 标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素；在老IE中event.srcElement表示发生移入/出的元素，event.toElement表示移出的目标元素，event.fromElement表示移入时的来源元素

6. sessionStorage，localStorage,cookie区别

• 都会在浏览器端保存，有大小限制，同源限制
• cookie会在发起请求时发送到服务器，作为会话标识，服务器可以更改cookie；web storage不会发送给服务器
• cookie有path的概念，子路径可以访问父路径的cookie，父路径不可访问子路径的cookie
• 有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
• 共享：sessionStorage不能共享，localStorage在同源文档中可以共享，cookie在同源且符合path规则的文档之间共享
• localStorage的修改会促发其他文档窗口的update事件
• cookie有secure属性，要求HTTPS传输
• 浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M

7. javascript跨域通信

同源需满足：

• 协议相同
• 域名相同
• 端口相同

跨域通信：js进行DOM操作的时候，通信时如果发现目标与当前窗口不满足同源条件，浏览器处于安全考虑会阻止跨域操作。跨域操作的方法：

• 如果是log之类的简单单项通信，新建<img>,<script>,<link>,<iframe>元素，通过src ,href属性设置为目标url.实现跨域请求
• 如果请求json数据，使用<script>进行jsonp请求
• 现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象，origin是目标窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送消息的窗口引用
• 内部服务器代理请求跨域URL，然后返回数据
• 跨域请求数据，现代浏览器可使用html5规范的CORS功能，只要目标服务器返回http头部**Access-Control-Allow-Origin: ***即可像普通ajax一样访问跨域资源

8. javascript有哪几种数据类型

六种基本数据类型

• undefined
• null
• string
• boolean
• number
• symbol(ES6)

一种引用类型

• Object

9. 什么闭包,闭包有什么用

闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分;

• 函数本身作用域
• 闭包定义时的作用域
• 全局作用域

闭包的常见用途

• 可以读取函数内部的变量
• 让这些变量的值始终保持在内存中

自己的理解：闭包就是能够读取其他函数内部变量的函数。由于在js中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以本质上，闭包就是将函数内部和函数外部连接起来的桥梁。以下代码中，f2函数就是闭包。

function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n); 
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999

使用闭包需注意：

• 由于闭包会使函数中的变量会被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄漏。解决方法是在退出函数之前，将不使用的局部变量全部删除
• 闭包会在父函数外部改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

10. javascript有哪几种方法定义函数

1. 函数声明表达式
2. function操作符
3. Function 构造函数
4. ES6:arrow function

重要参考资料：MDN:Functions_and_function_scope

11. 应用程序存储和离线web应用

HTML5新增应用程序缓存，允许web应用将应用程序自身保存在用户浏览器中，用户离线状态也可以访问。

• 为html元素设置manifest属性：<html manifest="myapp.appcache">,后缀名只是一个约定，真正的识别方式是通过text/cache-manifest 作为MIME类型。所以需要配置服务器保证配置正确
• manifest文件首行为CACHE MANIFEST，其余就是要缓存的URL列表，每个一行，相对路径都相对于manifest文件的URL。注释以#开头
• URL分三种类型：CACHE：默认类型    METWORK：表示资源从不缓存   FALLBACK：每行包含两个URL，第二个URL是指需要加载和存储在缓存中的资源，第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存，如果网络中载入这样的URL出错的话，会使用第二个URL指定的缓存资源来替代。例子：

CACHE MANIFEST

CACHE:
myapp.html
myapp.css
myapp.js

FALLBACK:
videos/ offline_help.html

NETWORK:
cgi/

 12. 客户端存储localStorage和sessionStorage

• localStorage有效期为永久，sessionStorage有效期为顶层窗口关闭前
• 同源文档可以读取并修改localStorage的数据，sessionStorage只允许同一个窗口下的文档访问，如通过iframe引入的同源文档
• Storage对象通常被当做普通的js对象使用：通过设置属性来存取字符串值，也可以通过setItem（key,value）设置，getItem（key）读取，removeItem（key）删除，clear（）删除所有数据，length表示所存储的额数据项数目，key(value)返回对应索引的key

localStorage.setItem('x', 1); // storge x->1
localStorage.getItem('x); // return value of x

// 枚举所有存储的键值对
for (var i = 0, len = localStorage.length; i < len; ++i ) {
    var name = localStorage.key(i);
    var value = localStorage.getItem(name);
}

localStorage.removeItem('x'); // remove x
localStorage.clear();  // remove all data

 13. cookie及其操作

• cookie是web浏览器存储的少量数据，作为http协议的扩展实现。cookie数据会自动在浏览器和服务器之间传递
• 通过读写cookie检查是否支持
• cookie属性有名，值，max-age，path，domain，secure
• cookie默认有效期为浏览器会话，一旦关闭浏览器，数据就会丢失，通过设置max-age=seconds属性告诉浏览器cookie的有效期
• cookie作用域通过文档源和文档路径来确定，通过path 和domain进行配置，web页面同目录或其子目录都可访问
• 通过cookie保存数据的方法：为document.cookie设置一个复合目标的字符串如下
• 读取document.cookie获得‘；’分隔的字符串，key=value，解析得到结果

document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';

document.cookie = 'name=aaa; path=/; domain=domain; secure';
// 要改变cookie的值，需要使用相同的名字、路径和域，新的值
// 来设置cookie，同样的方法可以用来改变有效期

// 设置max-age为0可以删除指定cookie

//读取cookie，访问document.cookie返回键值对组成的字符串，
//不同键值对之间用'; '分隔。通过解析获得需要的值

14. javascript有哪些方法定义对象

• 对象字面量： var obj = {}
• 构造函数：var obj = new Object();
• Object.create():  var obj = Object.create(Object.prototype);

15. ===运算符判断相等的流程是怎样的

• 如果两个值不是相同类型，它们不相等
• 如果两个值都是null或者都是undefined，它们相等
• 如果两个值都是布尔类型true或者都是false，它们相等
• 如果其中有一个是NaN，它们不相等
• 如果都是数值型并且数值相等，他们相等， -0等于0
• 如果他们都是字符串并且在相同位置包含相同的16位值，他它们相等；如果在长度或者内容上不等，它们不相等；两个字符串显示结果相同但是编码不同==和===都认为他们不相等
• 如果他们指向相同对象、数组、函数，它们相等；如果指向不同对象，他们不相等

16. ==运算符判断相等的流程是怎样的

• 如果两个值类型相同，按照===比较方法进行比较
• 如果类型不同，使用如下规则进行比较
• 如果其中一个值是null，另一个是undefined，它们相等
• 如果一个值是数字另一个是字符串，将字符串转换为数字进行比较
• 如果有布尔类型，将true转换为1，false转换为0，然后用==规则继续比较
• 如果一个值是对象，另一个是数字或字符串，将对象转换为原始值然后用==规则继续比较
• 其他所有情况都认为不相等

17. 对象到字符串的转换步骤

• 如果对象有toString()方法，javascript调用它。如果返回一个原始值（primitive value如：string number boolean）,将这个值转换为字符串作为结果
• 如果对象没有toString()方法或者返回值不是原始值，javascript寻找对象的valueOf()方法，如果存在就调用它，返回结果是原始值则转为字符串作为结果
• 否则，javascript不能从toString()或者valueOf()获得一个原始值，此时throws a TypeError

18. 对象到数字的转换步骤

• 如果对象有valueOf()方法并且返回元素值，javascript将返回值转换为数字作为结果
• 否则，如果对象有toString()并且返回原始值，javascript将返回结果转换为数字作为结果
• 否则，throws a TypeError

19. <,>,<=,>=的比较规则

所有比较运算符都支持任意类型，但是比较只支持数字和字符串，所以需要执行必要的转换然后进行比较，转换规则如下:

• 如果操作数是对象，转换为原始值：如果valueOf方法返回原始值，则使用这个值，否则使用toString方法的结果，如果转换失败则报错
• 经过必要的对象到原始值的转换后，如果两个操作数都是字符串，按照字母顺序进行比较（他们的16位unicode值的大小）
• 否则，如果有一个操作数不是字符串，将两个操作数转换为数字进行比较

20. +运算符工作流程

• 如果有操作数是对象，转换为原始值
• 此时如果有一个操作数是字符串，其他的操作数都转换为字符串并执行连接
• 否则：所有操作数都转换为数字并执行加法

21. 函数内部arguments变量有哪些特性,有哪些属性,如何将它转换为数组

• arguments所有函数中都包含的一个局部变量，是一个类数组对象，对应函数调用时的实参。如果函数定义同名参数会在调用时覆盖默认对象
• arguments[index]分别对应函数调用时的实参，并且通过arguments修改实参时会同时修改实参
• arguments.length为实参的个数（Function.length表示形参长度）
• arguments.callee为当前正在执行的函数本身，使用这个属性进行递归调用时需注意this的变化
• arguments.caller为调用当前函数的函数（已被遗弃）
• 转换为数组：var args = Array.prototype.slice.call(arguments, 0);

22. DOM事件模型是如何的

• DOM事件包括捕获（capture）和冒泡（bubble）两个阶段：捕获事件从window开始触发事件然后通过祖先节点依次传递到触发事件的DOM元素上；冒泡阶段事件是从初始元素依次向祖先节点传递到window
• 标准事件监听elem.addEventListener(type, handler, capture)/elem.removeEventListener(type, handler, capture)：handler接收保存事件信息的event对象作为参数，event.target为触发事件的对象，handler调用上下文this为绑定监听器的对象，event.preventDefault()取消事件默认行为，event.stopPropagation()/event.stopImmediatePropagation()取消事件传递
• 通常利用事件冒泡机制托管事件处理程序提高程序性能。

23.介绍Javascript有哪些内置对象？

• Object 是所有对象的父对象
• 数据封装类对象：Object、Array、Boolean、Number、String
• 其他对象：Function、Argument、Math、Date、RegExp、Error
• 参考 http://www.ibm.com/developerworks/cn/web/wa-objectsinjs-v1b/index.html

24.说几条写js的基本规范

• 不要在同一行声明多个变量
• 使用=== 和！==来比较 true 、false或者数值
• 适用对象字面量替代new Array 这种形式
• 不要使用全局函数
• switch语句必须带有default分支
• 函数不应该有时候有返回值，有时候没有
• for循环必须使用大括号
• if语句要使用大括号
• for-in循环中 的变量应该使用var关键字明确限定作用域，避免作用域污染

25.js原型，原型链？有什么特点？

• 每个对象都会在内部初始化一个属性，就是prototype（原型），当我们访问一个对象的属性时，如果这个对象没有这个属性，那么它就会去prototype的属性里找，这个prototype还有自己的prototype，一直找下去，就是原型链的概念。原型链实现了继承。

关系：

instance.constructor.prototype  = instance._proto_

特点：

js对象是通过引用来传递的，我们创建的每个新对象是体重没有属于自己的原型副本。当我们修改prototype的时候，与之相关的对象也会继承这一改变

  当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，
  就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。
     function Func(){}
     Func.prototype.name = "Sean";
     Func.prototype.getInfo = function() {
       return this.name;
     }
     var person = new Func();//现在可以参考var person = Object.create(oldObject);
     console.log(person.getInfo());//它拥有了Func的属性和方法
     //"Sean"
     console.log(Func.prototype);
     // Func { name="Sean", getInfo=function()}

 JavaScript有几种类型的值？，你能画一下他们的内存图吗？

• 栈：原始数据类型：null、undefined、Number、Boolean、String
• 堆：引用数据类型：对象（Object）、数组（Array）、函数（Function）

两张类型的区别在于：存储位置不同

• 原始数据类型直接存储在在栈（stack）中的简单数据段，占据空间小，大小固定，属于被频繁使用的数据。
• 引用数据类型在堆（heap）中存储，占据空间大，大小不固定。如果存储在栈中，会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器找引用值时，首先检索到在栈中的地址，从而取得该实体在堆中的地址

 JS如何实现继承？

• 构造继承
• 原型继承
• 实例继承
• 拷贝继承

那些操作会造成内存泄漏？

• 内存泄漏指任何对象在您不再拥有或需要他的时候仍然存在。
• 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量是0，或者该对象的唯一引用是循环的，那么该对象的内存即可回收
• setTimeout 的第一个参数使用字符串而不是函数的时候，会造成内存泄漏
• 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，会产生一个循环）

null,undefined的区别

• null 表示该对象的值为空，null的类型（typeof）是object
• undefined 表示一个变量声明后没有初始化也就是没有赋值，undefined的类型（typeof）是undefined
• null==undefined  true； null===undefined  false；

javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

• use strict 是一种ECMAscript 5添加的（严格）运行模式，这种模式使得JS在更严格的条件下运行，使得JS代码更加的规范化，消除语法上的一些不合理和不严谨之处。默认支持的糟糕特性会被禁用，比如不能使用with,也不能在意外的情况下给全局变量赋值，全局变量的显示声明，函数必须声明在顶层，不允许在非函数代码块中声明函数，argument.callee不允许使用，保证代码安全。
• 提高编译器效率，增加运行速度，为未来的新版本js标准化做铺垫。

Ajax 是什么? 如何创建一个Ajax？

• Ajax 的全称：Asynchronous javascript and xml（异步传输+js+xml）
• 异步，简单来说就是向服务器请求的时候不必等待结果，可以同时做其他事情，等服务器返回结果后根据既定进行后续操作，局部页面刷新

创建：

• 创建XMLHttpRequest对象，也就是创建一个异步调用对象
• 创建一个新的http请求，并指定改http请求的方法、URL及验证信息
• 设置响应http请求状态变化的函数
• 发送http请求
• 获取异步调用返回的数据
• 使用js和dom实现页面局部刷新

 Ajax如何解决浏览器缓存问题

• 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
• 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
• 在URL后面加上一个随机数： "fresh=" + Math.random();
• 在URL后面加上时间戳："nowtime=" + new Date().getTime(）
• 如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录

typeof 和instanceof的区别

• typeof判断所有变量的类型，返回值有number，boolean，string，function，object，undefined。
• typeof对于丰富的对象实例，只能返回"Object"字符串。
• instanceof用来判断对象，代码形式为obj1 instanceof obj2（obj1是否是obj2的实例），obj2必须为对象，否则会报错！其返回值为布尔值。
• instanceof可以对不同的对象实例进行判断，判断方法是根据对象的原型链依次向下查询，如果obj2的原型属性存在obj1的原型链上，（obj1 instanceof obj2）值为true。

 

参考：https://github.com/qiu-deqing/FE-interview