前端面试之JavaScript(总结)

1. JS基本的数据类型和引用类型


  • 基本数据类型:number、string、null、undefined、boolean、symbol -- 栈


  • 引用数据类型:object、array、function -- 堆


  • 两种数据类型存储位置不同


  • 原始数据类型是直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据;


  • 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;


  • 引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。


  • 当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。


2.介绍JS的内置对象


  • 数据封装类对象:Object、String、Number、Boolean、Array


  • 其他对象:Function、Data、Math、Arguments、RegExp、Error


  • ES6新增对象:Promise、Proxy、Map、Set、Symbol、Reflect


  • 前端面试之JavaScript(总结)


3.说几条JavaScript的基本规范


  • 变量和函数在使用前声明

  • 语句结束后添加分号

  • 代码段使用{}包裹

  • 以大写字母开头定义构造函数,以全大写定义常量

  • 用{} 和 []声明对象和数组

  • 使用===和!==来比较true和false或者数字值


4.eval是做什么的


  • 他的功能是把对应的字符串解析成JS代码并运行;


  • 他不安全,而且非常耗能(执行两次,一次解析成JS代码,一次执行)


5.对闭包的理解


闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数里创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用域链,将函数内部的变量和方法传递到外部


前端面试之JavaScript(总结)


6.http状态码有哪些


简单版

前端面试之JavaScript(总结)


完整版

前端面试之JavaScript(总结)


7.描述浏览器渲染的过程,DOM书和渲染树的区别


浏览器渲染过程:


  • 解析HTML构建DOM,并行请求css、image、js

  • css文件下载完成,开始构建CSSOM(CSS树)

  • CSSOM构建结束后,和DOM一起生成Render Tree(渲染树)

  • 布局(layout):计算出每个节点在屏幕中的位置

  • 显示:通过显卡把页面画到屏幕上


DOM树和渲染树的区别:


  • DOM树与HTML标签一一对应,包括head和隐藏元素


  • 渲染树不包括head和隐藏元素,大段文本的每一个行都是独立节点,每一个独立节点都有对应的css属性


8.如何最小化重绘(repaint)和回流(reflow)


  • 需要创建多个DOM节点时,使用DocumentFragment创建完成后一次性的加入document


  • 缓存layout属性值,减少回流次数,如const offsetLeft=element.offsetLeft


  • 尽量避免使用table布局(table元素一旦触发回流就会导致table里所有的其他元素回流)


  • 避免使用css表达式,因为每次调用都会重新计算值(也会重新加载页面)


  • 尽量使用css属性简写


  • 将多次修改元素样式合并成一次操作


9.介绍JavaScript的原型、原型链?有啥特点


原型:


  • JavaScript的所有对象中都包含了一个 (__proto__ ) 内部属性,这个属性所对应的就是该对象的原型


  • JavaScript的函数对象,除了原型 (__proto__) 之外,还预置了 prototype 属性


  • 当函数对象作为构造函数创建实例时,该 prototype 属性值将被作为实例对象的原型( __proto__)。


原型链:


  • 当一个对象调用的属性/方法自身不存在时,就会去自己(__proto__ )关联的前辈 prototype 对象上去找


  • 如果没找到,就会去该 prototype 原型 ( __proto__) 关联的前辈 prototype 去找。依次类推,直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”


原型特点:


  • JavaScript对象是通过引用来传递的,当修改原型时,与之相关的对象也会继承这一改变


10.JavaScript如何实现继承


构造函数绑定:使用 call 或 apply 方法,将父对象的构造函数绑定在子对象上


前端面试之JavaScript(总结)


ES6使用extends继承


前端面试之JavaScript(总结)


实例继承:将子对象的prototype指向父对象的一个实例


前端面试之JavaScript(总结)


原型继承


前端面试之JavaScript(总结)


拷贝继承:如果把父对象的所有属性和方法,拷贝进子对象


前端面试之JavaScript(总结)


11.什么是window对象,什么是Document对象


  • Window 对象表示当前浏览器的窗口,是JavaScript的*对象。


  • 我们创建的所有对象、函数、变量都是 Window 对象的成员。


  • Window 对象的方法和属性是在全局范围内有效的。


  • Document 对象是 HTML 文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点)


  • Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问


  • Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问


12. 在一个DOM上同时绑定两个点击事件:一个用捕获,一个用冒泡。事件会执行几次,先执行冒泡还是捕获?


  • 该DOM上的事件如果被触发,会执行两次(执行次数等于绑定次数)


  • 如果该DOM是目标元素,则按事件绑定顺序执行,不区分冒泡/捕获


  • 如果该DOM是处于事件流中的非目标元素,则先执行捕获,后执行冒泡


13. 事件的代理/委托


  • 事件委托是指将事件绑定目标元素的到父元素上,利用冒泡机制触发该事件


优点:


可以减少事件注册,节省大量内存占用

可以将事件应用于动态添加的子元素上


缺点:


使用不当会造成事件在不应该触发时触发


14. 编写一个方法 求一个字符串的字节长度


前端面试之JavaScript(总结)


15. 列举一下JavaScript数组和对象有哪些原生方法?


数组:


前端面试之JavaScript(总结)


对象:


前端面试之JavaScript(总结)


前端面试之JavaScript(总结)扩展阅读

37个JavaScript基本面试问题和解答

精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解


来源:https://segmentfault.com/a/1190000015294769

版权声明:文章来源网络,版权归作者本人所有,如侵犯到原作者权益,请与我们联系删除或授权事宜