前端面试题总结（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 +溢出内容的尺寸前端面试题总结（part 3）: javascript 概念部分

 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

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

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()取消事件传递
  • 通常利用事件冒泡机制托管事件处理程序提高程序性能。

转自：https://github.com/qiu-deqing/FE-interview

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode