javascript面试题集

1、运算符

• 1/0 = infinity（正无穷，number类型），-1/0 = -infinity，0/0 = NaN（Not a Number，number类型），0%0 = NaN
• 比较运算符比较字符串，以ascii（8位二进制数）来比较

2、函数和作用域

• 高内聚，弱耦合，使用函数封装
• 函数定义的三种方式：申明式，显示命令式，匿名命令式（匿名函数表达式，命名函数表达式）->函数表达式
• 函数名.length: 形参长度， arguments.length: 实参长度。
• 实参与形参相等时，两者之间有映射关系，但是他们是不同的变量
• 无返回值函数，默认会添加return语句，终止函数的执行
• js三部曲：语法分析，预编译（函数声明整体提升，变量 —申明提升），解释执行
• 预编译：暗示全局变量（没有申明就赋值，此变量就为全局对象所有；一切声明的全局变量，全是window的属性）
• window就是全局作用域，属于Globle Object
• 四部曲：1、创建AO（Activation Object， 执行期上下文）对象；2、找形参和变量声明，将变量声明和形参名作为AO属性名，值为undefined；3、将实参值和形参统一；4、在函数体里面找函数声明、值赋予函数体
• [[scope]]:每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，但是有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个，指的是我们所说的作用域，其中存储了运行期上下文的集合。
• 作用域链：[[scope]]中所存储的执行器上下文对象的集合，这个集合呈链式链接，我们把这种链式链接就做作用域链
• 立即执行函数：

3、类型转换

• 变量没有声明就使用，js报错，如果是对象的属性没有声明就是使用，则返回undefined
• 基本数据类型：Number，string，boolean，null，undefined，引用类型：Object，Function
• typeof返回6中数据类型：number， string， boolean，undefined，object，function
• '=='发生类型转换，'==='不发生类型转换，true： infinity == infinity, undefined == undefined, undefined == null; false: NaN == NaN
• 逻辑运算符（&&）：先看第一表达式转换成布尔值结果，如果结果为真，那么她会看第二个表达式转换为布尔值的结果，然后如果只有两个表达式，只看到第二个表达式，就可以返回该表达式的值了
• undefined, null, NaN, "", 0, false转换为布尔值都为false
• typeof(null): Object, typeof(NaN): number, typeof(typeof(a)): string
• toString（进制数），将数据转换成目标进制，null和undefined不能使用该方法
• parseInt（参数，进制数），将数据以目标进制为基底，转换成10进制
• Number（undefined）->NaN, true->1,false->0,null->0, '123abc'->NaN, 'true'->NaN, 'null'->NaN
• Number（mix），parseInt（string， radix），parseFloat（string），toString（radix），String（mix），Boolean（）
• isNaN（参数），-->隐式调用Number(参数)进行转换，然后与NaN进行比较
• 当且仅当 typeof 变量未定义时使用不报错，返回undefined

4、闭包：

• 当内部函数被保存在外部时，将会形成闭包。闭包会导致原有作用域链不可释放，造成内存泄漏
• 作用

• • 实现公有变量：函数累加器
  • 可以做缓存（存储结构）
  • 可以实现封装，属性私有化
  • 模块化开发，防止污染全局变量

5、对象的创建方法：

• 对象字面量 plainObject
• 构造函数（系统自带的构造函数） new Object（）、Array（）、Number（），也可以自定义构造函数（函数首字母大写，使用new关键字生成对象）

6、构造函数内部原理：

• 在函数体前面隐式的加上this={}
• 执行this.xxx = xxx;
• 隐式的返回this

7、包装类

• Number， String， Boolean
• 包装类可以直接当对象使用
• 原始值没有属性和方法，当使用属性和方法时，隐式转换成包装类并删除防止系统出错

8、原型

• 原型（prototype）是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。
• 使用场景：可以提取共有属性
• 对象查看原型： 隐式属性__proto__
• 对象查看对象的构造函数： constructor
• 绝大多数对象的最终都会继承自Object.prototype
• Object.create(原型), Object.create(null)没有继承原型
• null，undefined没有toString（）方法，123.toString（）会报错，优先识别成浮点型
• call/apply，改变this指向，两者传参列表不同。call 需要把实参按照形参的个数传进去， apply 需要传一个arguments

9、继承

• 传统形式——>原型链，过多的继承了没用的属性
• 借用构造函数，不能继承借用构造函数的原型，每次构造函数都要多走一个函数
• 共享原型，不能随便改动自己的原型
• 圣杯模式——>原型链与共享模式的结合，使用一个中间层做一个共享原型，然后使用原型链继承中间层，建议使用闭包私有化变量编写圣杯模式

function inherit(Target, Origin) {

•  function F() {};
•  F.prototype = Origin.prototype;
•  Target.prototype = new F();
•  Target.prototype.constructior = Target;
• }

10、小知识：

• for in：遍历对象，使用obj[property]访问属性值
• hasOwnProperty ，判断对象是否拥有自己的属性，不包括原型属性
• in： 判断对象是否可以访问到某个属性，包括继承的原型属性
• instanceof：A instanceof B 看A对象的原型链上有没有B的原型
• 区别对象和数组的三种方法：instanceof，constructor， obj.prototype.tostring.call([])

11、数组

• 改变原数组：push，pop， shift， unshift，sort， reverse， splice
• 不改变原数组：concat， join， slice，split

12、类数组

• 函数里面的arguments属于类数组，只有length方法可以使用
• 类数组定义：属性要为索引（数字）属性，必须要有length属性，最好加上push方法（'push': Array.prototype.push），如果加上splice方法('splice': Array.prototype.splice)，就长得跟数组一样了,其实本质上还是object对象
• 具备数组和对象的双重属性
• DOM生成的数组就是使用了类数组

13、try catch

• error.name的六种值对应的信息

• • EvalError：eval（）的使用与定义不一致
  • RangeError：数组越界
  • ReferenceError：非法或不能识别的引用值
  • SyntaxError: 发生语法解析错误
  • TypeError: 操作数类型错误
  • URIError: URI处理函数使用不当

14、es5严格模式

• “user strict”

• • 不兼容es3的一些不规则语法，使用全新的es5规范
  • 两种用法：全局严格模式， 局部函数内严格模式

• 就是一行字符串，不会对不兼容严格模式的浏览器产生影响
• 不支持with（）{}——>改变作用域链，arguments.callee，func.caller; 变量赋值前必须申明，局部this必须被赋值（Person.call(null/undefined)）赋值什么就是什么，拒绝重复属性和参数

15、DOM

• document代表整个文档，html标签代表顶级标签
• getElementById('id')-->单个节点, getElementsByTagName('div')-->类数组对象，getElementsByName('name'), getElementsByClassName('class')
• querySelector('')-->css选择器， querySelectorAll, 开发中基本不使用，不具有实时性，获取到的是DOM节点的副本，是静态的
• 节点类型：元素节点（1）， 属性节点（2）， 文本节点（3）， 注释节点（8）， document（9）， DocumentFragment（11）
• 节点方法：parentNode(父节点)， childNodes(孩子节点)，nextSibling(下一个节点)，previous(上一个节点) ，lastChild，firstChild
• 元素方法：parentElement(父元素， IE不兼容)，Children(子元素)， firstElementChild（第一个元素节点，IE不兼容），lastElementChild（最后一个元素节点，IE不兼容）， nextElementSibling/previousElementSibling（IE不兼容）
• 节点属性：

• • nodeName，元素的标签名，以大写形式表示，只读
  • nodeValue， Text节点或者Comment节点的文本内容，可读可写
  • nodeType， 该节点的类型，只读
  • attributes，Element节点的属性集合

16、DOM结构树

• document -->HTMLDocument.prototype --> Document.prototype
• 增

• • document.createElement();
  • document.createTextNode();
  • document.createComment();
  • document.createDocumentFragment();

• 插

• • parentNode.appendChild();
  • parentNode.insertBefore(a,b);

• 删

• • parent.removeChild();
  • child.remove();

• 替换

• • parent.replaceChild(new, origin);

• DOM中Element节点属性

• • innerHTML 指代标签内容
  • innerText 只获取文本内容（火狐浏览器不支持）/textContent(IE不兼容)
  • setAttribute（'key', 'value'）
  • getAttribute('key')

17、定时器

• setTimeout（），setInterval（），clearTimeout（），clearInterval（），全局作用域window上的方法，内部函数this指向window

18、DOM基本操作

• 查看滚动条的滚动距离

• • window.pageXOffset/pageYOffset: IE8及IE8以下不兼容
  • document.body/documentElement.scrollLeft/scrollTop: 兼容性比较混乱，用时取两个值相加，因为不可能存在同时有值

• 查看视口的尺寸

• • window.innerWidth/innerHeight: IE8及IE8以下不兼容
  • document.documentElement.clientWidth/clientHeight: 标准模式下，任何浏览器都兼容
  • document.body.clientWidth/clientHeight: 适用于怪异模式下的浏览器

• 查看元素的几何尺寸

• • domEle.getBoundingClientRect();
  • 兼容性很好，该方法返回一个对象，对象里面有left、top、right、bottom等属性。left和top代表该元素左上角的x和y坐标，right和bottom代表元素右下角的x和y坐标
  • 老版本IE并未实现height和width属性
  • 返回的结果并不是“实时的”

• 查看元素尺寸的另一个方法

• • domEle.offsetWidth, domELe.offsetHeight

• 查看元素的位置:相对于父级元素的位置

• • dom.offsetLeft, dom.offsetTop
  • 对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的反诉返回相对于最近的有定位的父级的坐标
  • dom.offsetParent返回最近的有定位的父级元素

• 让滚动条滚动

• • window.scroll(), window.scrollTo()滚动到某个位置，传入x， y两个参数
  • window.scrollBy()传入两个参数x， y、定位到某个位置
  • scrollBy()会在之前的数据基础之上做累加

19、CSS脚本化

• 查询计算样式: window.getComputedStyle(ele, null)返回一个CSSStyleDeclaration对象

• • window.getComputedStyle(ele, null)[prop]
  • 计算样式只读，返回的计算样式的值都是绝对值，没有相对单位
  • IE8及IE8以下不兼容
  • div.currentStyle[prop](IE专用方法)

20、事件

• div.onclick = function () {}

• • 同一个元素的同一个事件的处理函数只能绑定一个
  • 基本等同于写在html行间上
  • 程序this指向是dom元素本身

• obj.addEventListener(type, fn, false) =>div.addEventListener('click', function(){}, false)

• • IE9以下不兼容, 可以为一个事件绑定多个处理函数
  • 事件监听机制
  • 程序this指向是dom元素本身

• obj.attachEvent('on'+type, fn) => div.attachEvent('onClick', function(){ })

• • IE独有，一个事件同样可以绑定多个处理程序
  • 程序this指向window

• 解除事件绑定

• • ele.onclick = false/''/null
  • ele.removeEventListener(type, fn, false);
  • ele.detachEvent('on'+type, fn);
  • 若绑定匿名函数，则无法解除

21、事件处理模型——事件冒泡、捕获

• 事件冒泡

• • 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

• 事件捕获

• • div.addEventListener(type, fn, true)执行事件捕获
  • 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
  • 与事件冒泡不能同时存在
  • IE不支持

• 触发顺序，先捕获，后冒泡
• focus，blur，change，submit，reset，select等事件不冒泡
• 取消冒泡

• • W3C标准event.stopPropagation();但不支持IE9以下版本
  • IE独有event.cancelBubble = true;现在都能支持

• 阻止默认事件

• • 默认事件——表单提交，a标签跳转， 右键菜单等
  • 1、return false；以对象属性的方式注册的事件生效
  • 2、event.preventDefault();W3C标准，IE9以下不兼容
  • 3、event.returnValue = false; 兼容IE

22、事件对象

• event || window.event 用于获取事件对象
• 事件源对象

• • event.target 火狐只有这个
  • event.srcElement IE只有这个
  • 兼容方式 event.target || event.srcElement

• 事件委托

• • 利用事件冒泡，和事件源对象进行处理
  • 优点：

• • • 1、性能：不需要循环所有的元素一个个绑定事件
    • 2、灵活，当有新的子元素时不需要重新绑定事件

23、事件分类

• 鼠标事件

• • click, mousedown, mousemove, mouseup, contextmenu,mouseover,mouseout,mouseenter,mouseleave
  • 用事件的button属性来区分鼠标的按键，0（左键）/1（中间滚动轮）/2（右键），mousedown, mouseup事件才有，click事件只能监听左键不能监听右键

• 键盘事件

• • keydown, keyup, keypress
  • keydown > keypress > keyup
  • keydown 和 keypress的区别

• • • keydown可以响应任意键盘按键事件， keypress只能响应字符类键盘按键
    • keypress返回ASCII码，可以转换成相应字符

• 文本事件

• • oninput 文字有变化就触发
  • onchange 输入框获取焦点和失去焦点时，前后状态不一样触发
  • onfoucs 获取到焦点时触发
  • onblur 失去焦点时触发
  • onscroll 滚动条滚动式触发

24、异步加载JS

• derfer异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部
• async异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里面，执行时也不阻塞页面
• 创建script，插入到DOM中，加载完毕后callback，动态创建script标签，赋予src属性异步下载文件，通过onload

25、JS加载时间线

• 1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。 这个阶段document.readyState = 'loading'。
• 2、遇到link外部css，创建线程加载，并继续解析文档。
• 3、遇到script外部js， 并且没有设置async，defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析
• 4、遇到外部js，并且设置有async或defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）
• 5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
• 6、当文档解析完成，document.readyState = 'interactive'。
• 7、文档解析完后，所有设置有defer的脚本会按照顺序执行。
• 8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化成事件驱动阶段。
• 9、当所有async的脚本加载完成并执行之后，img等加载完成后，document.readyState = 'complete' , window对象触发onload事件
• 10、从此，以异步响应方式处理用户输入、网络事件。