JavaScript Makeup

Interview Front-End JavaScript

基础

表达式和语句

运算符的优先级

MDN文档。

JavaScript是一门什么样的语言，它有哪些特点

• 解释型语言；
• 弱类型；
• 基于原型继承；

JavaScript的数据类型都有什么

基本数据类型：String, Boolean, Number, Undefined, Null;
引用数据类型：Object(Array, Date, RegExp, Function);

如何判断这些数据类型？

基本类型：typeof
引用类型：Object.prototype.toString.call( ) = "[object NativeConstructorName]"

严格模式的作用

"use strict";

• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为；
• 消除代码运行的一些不安全之处，保证代码运行的安全；
• 提高编译器效率，增加运行速度；
• 为未来新版本的Javascript做好铺垫。

闭包的原理及应用

闭包是什么

闭包是指有权访问另一个函数作用域中的变量的函数。

闭包的原理，什么情况下会发生闭包

作用域链。

函数的返回值保持着对外部环境变量的引用时。

闭包的应用场景

• 定义私有变量，不可直接修改；
• 函数外或在其他函数中访问某一函数内部的参数；
• 为节点循环绑定click事件，在事件函数中使用当次循环的值或节点，而不是最后一次循环的值或节点

闭包的优缺点

优点：

• 不增加额外的全局变量
• 执行过程中所有变量都是在匿名函数内部

缺点：

• 闭包会占用内存，滥用会造成内存消耗过大

什么是Ajax和JSON，它们的优缺点

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

优点：

• 可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量；
• 避免用户不断刷新或者跳转页面，提高用户体验；

缺点：

• 对搜索引擎不友好；
• 要实现ajax下的前后退功能成本较大；
• 可能造成请求数的增加；
• 跨域问题限制；

JSON是一种轻量级的数据交换格式，ECMA的一个子集。

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）。

XML(Extentsible Markup Language)，可扩展标记语言。XML可以视作对HTML的补充，XML的设计目标是描述数据并集中于数据的内容，HTML的设计目标是显示数据并集中于数据的外观。

XMLHttpRequest对象

Ajax技术的核心，简称XHR。

属性：responseText responseXML status statusText readyState

方法：open setRequestHeader send getRequestHeader

Ajax实现

1. 创建XMLHttpRequest对象；xhr = new XMLHttpRequest()
2. 为新建的XMLHttpRequest对象添加回调函数（事件处理程序）；xhr.onreadystatechange = function () {...}
3. 开启异步请求；xhr.open("get/post", "URL", true)
4. 设置HTTP头部：xhr.setRequestHeader("MyHeader", "MyValue")
5. 发送请求。xhr.send(null)

Ajax的原理

在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由 Ajax引擎代为向服务器提交请求。

参考资料

如何检测浏览器对一些js函数的支持情况

定义一个方法，先判断是否存在同名方法：Object.XXXX = Object.XXXX || function(){ ... }。

运用能力检测，不用使用window.XXXX或document.XXXX。例如：

if(obj.XXXX) {
  ...
} else {
  ...
}

直接在对象的原型上添加方法是否安全？尤其是在Object对象上

不安全。要尽量避免修改原生对象的原型。当在另一支持该方法的实现中运行代码时，可能会导致命名冲突，也可能会意外的重写原生方法。

函数声明和函数表达式的区别

函数声明：js解析时会首先读取函数声明，使其在执行任何代码之前可用（可以访问）；

函数表达式：在js解析到其所在行的时候，该函数才真正被解析执行，在后续代码中才可以被调用。

IIFE的有哪些写法

+function () {...}();：性能最差；

!function () {...}();

(function () {...})();
(function () {...}());

void function () {...}()

具名函数表达式（Named Function Expression）
匿名函数（Anonymous Function）

with关键字的弊端

性能问题：使用了with关键字后，js引擎无法对这段代码进行优化。
语义不明，调试困难。

在web页面做动画有哪几种方法

• CSS3的animation+keyframes或transition；
• Canvas标签；
• JavaScript，setTimeout()或window.requestAnimationFrame()；
• WebGL；

原生对象(native object)和宿主对象(host object)的区别

原生对象：由ECMAScript定义且不依赖执行环境定义的对象

宿主对象：JavaScript的宿主环境定义的对象，例如浏览器端的window、history等

特征检测(feature detection)、特征推断(feature inference)、UA(user agent)字符串的区别

特征检测：直接检测某对象或方法是否被定义；

特征推断：根据一对象或方法是否被定义，推测另一对象或方法的是否被定义；

UA字符串：用户端浏览器的详细信息；

JavaScript的错误类型有哪些

• SyntaxError：解析代码时的语法错误；
• ReferenceError：引用变量不存在；将值分配给无法分配的对象；
• RangeError：超出有效范围（数组长度为负数，Number对象的方法参数超出范围，函数堆栈超过最大值）；
• TypeError：变量或参数不是预期类型，例如"new 123"；
• URIError：URI相关函数参数不正确；
• EvalError：eval函数没有被正确执行；

JavaScript是怎样定义私有成员的

• 在构造函数中定义实例的私有属性，new出来之后实例拥有私有属性；
• 运用函数闭包保存私有变量。

JavaScript隐式类型转换

参考文章

• NaN的检测方法：NaN与自身不相等；
• undefined的检测方法：typeof undefined === undefined；
• 对象转换成字符串：toString，对象转化成数字：valueOf；
• 两者均存在，优先调用valueOf。

JavaScript Source Map

参考博客

Source map就是一个信息文件，里面储存着位置信息。

代码发生错误之后，JavaScript的解释器只会告诉我们第几行第几列出错。但压缩后的js只有几行，报错信息无意义。Source map就是用于解决此类问题，方便压缩后代码的调试。

什么是JST

JavaScript前端模板，用于客户端渲染，例如异步加载页面。

（模拟）类式继承和原型继承

属性继承：

Child = function (arg1,...,argN) {
  Parent.call(this, arg1,...,argN)
}

接口（方法）继承：

Object.create(Parent.prototype)

DOM的attribute和property的区别

参考博客

attribute：

• 节点的 attributes 属性存储了所有 attribute，通过 getAttribute 方法可以获得相应属性值；
• 特性节点，一种节点类型，不仅限用于元素节点，可自定义非“标准特性”；
• 使用：自定义 HTML attributes；访问内置的 HTML attributes，例如input的value值；

property：

• 对象的属性，可访问HTML元素的“标准特性”；
• 使用情况：大多数 DOM 操作；

怎么解决IE 6、7、8不支持placeholder的问题

为输入框添加焦点事件

函数参数的可修改性

参考博客

JavaScript的遍历（枚举）操作有哪些

对象属性名：

for (var item in obj) {
  // todo...
}
// 会遍历原型链上的键

对象属性值：

// ES6
for (var item of obj) {
  // todo...
}

所有可枚举自身属性的属性名组成的数组：Object.keys(obj)

所有自身属性的属性名组成的数组：Object.getOwnPropertyNames(obj)

数组：

// Array.prototype.forEach
[].forEach(function(item, index, array){
  // todo...
})

类数组对象

arguments

NodeList

HTMLCollection

进阶

JavaScript模板引擎

根据模板文件，结合数据，运用JavaScript引擎输出HTML界面。

JavaScript事件委托（代理）如何实现

基于事件冒泡原理和事件对象event实现。

优点：

• 可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒
• 可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适

IE下：
添加事件：attachEvent，其中回调函数的this指向window；
触发事件：按事件处理程序添加顺序的相反顺序执行；
event对象：srcElement，cancelBubble（取消冒泡，可读/写），returnValue（默认行为，可读/写）；

函数柯里化（Currying）是什么？如何实现

函数柯里化：是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。即固定函数的可预期参数，并返回一个接收余下参数的函数。

var curry = function (func, parameter) {
  var slice = Array.prototype.slice,
      args = slice.call(arguments, 1);
  return function () {
    return func.apply(null, args.concat(slice.apply(arguments)));
  }
}

CORS

Cross-Origin Resource Sharing，跨域资源共享
Ajax的限制：跨域安全策略，XHR 对象只能访问与包含它的页面位于同一域的资源；

JSONP：利用<script>标签的 src 属性；
Web Sockets：首先发起一个 HTTP 请求，之后从 HTTP 协议升级为 Web Sockets。故 Web Sockets 需要服务器支持

实现一个拖曳功能（思路）

1. 给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
2. mousedown事件触发后，开始拖拽
3. mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
4. mouseup时，拖拽结束
5. 需要注意浏览器边界的情况

JavaScript的继承实现

基于原型链实现继承。

继承一个类并添加新的属性（方法）

Object.create()

Promises/Promise

使用Promises而非回调(callbacks)优缺点是什么

代码更少，更优雅，更容易维护。

Promises：提供了一种管理异步操作回调的规范；
Promises/A+规范，译文

Promise机制，参考博客.

如何遍历一个对象和数组

对象：for ... in ...，用hasOwnProperty过滤非自身属性；

数组：for 循环，Array.length；

可变(mutable)和不变(immutable)对象的区别

可变对象可以修改属性、删除属性和添加属性，而不可对象均不能。

防篡改对象。

什么是事件循环(event loop)

参考博客

主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

调用栈(call stack)和任务队列(task queue)的区别

调用栈：同步任务在主线程上执行，形成一个调用栈

任务队列：主线程之外，存在一个任务队列，异步任务有了运行结果，就在任务队里中放置一个事件。主线程从任务队列中读取事件。

调用栈中的代码（同步任务），总是在读取任务队列（异步任务）之前执行。

前端安全

1. CSRF(Cross-Site Request Forgery，跨站请求伪造)：未被授权系统伪装自己，让处理请求的服务器认为它是合法的；

   起因：源于WEB的隐式身份验证机制！WEB的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的！

   常见类型：

   • 使用get请求资源，危险站点通过使用img标签造成攻击；
   • 修改成post请求后，危险站点通过inframe等手段实现攻击；

   防御：

   • 验证码：用户每次提交都需要在表单中填写图片上一个随机的字符串；
   • 添加一个隐藏的输入框：包含token，服务端验证是否匹配；
   • 使用HTTP Referer头部进行判断：如果不是业务域名发起的HTTP请求，直接过滤：

2. XSS(Cross Site Scripting，跨站脚本攻击)：

   恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的特殊目的。

Javascript异步编程实现方法

参考博客

• 回调函数
  setTimeout(callback, time)；

• 事件监听
  采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生；
  利用jQuery的on方法注册事件，trigger方法触发事件。

• 发布/订阅
  存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。
  jQuery.subscribe为函数订阅事件信号，jQuery.publish发布事件信号

• Promises对象
  Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。
  应用jQuery的延迟对象统一管理异步回调函数。

Javascript设计模式

参考博客

• 单例模式

• 简单工厂模式

• 观察者模式
  一个对象维持一系列依赖于它（观察者）的对象，将有关状态的任何变更自动通知给它们。

• 发布-订阅者模式
  发布者向订阅的对象发布信号。

DOM的增删查改

添加：

删除：

查询：

修改：

DOM遍历

DOM 遍历是基于给定节点为根节点执行深度优先的 DOM 结构遍历。

树的遍历：深度优先，广度优先

函数节流的实现

参考博客

jQuery

jQuery设计思想

jQuery最佳实践

原生JS的window.onload与jQuery的$(document).ready(function(){})有什么不同

window.onload()：是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()：是DOM结构绘制完毕后就执行，不必等到加载完毕。

load事件与DOMContentLoaded事件
对于不兼容DOMContentLoaded事件，可以设置0ms的超时调用兼容实现：
setTimeout(function () { /*事件处理程序*/ }, 0);

从jQuery中学到了什么

参考博客

• 短路表达式
  && ||，真值/假值的区分，使用!!更为严谨；

• 预定义常用方法入口
  在代码开头提前声明变量，保存一些常用对象方法的引用；

• 钩子机制（Hook）
  定义一个字典对象（表），根据字典对象中是否有某个属性执行相应操作；

• 连贯结构
  链式调用，函数调用后返回该jQuery对象，return this;；
  参数映射及处理，兼容多种传入参数类型，键值对、JSON对象等；

• 无new构造
  新建jQuery对象实例时，本质即new jQuery.fn.init(selector, context, rootjQuery);
jQuery.fn.init.prototype = jQuery.fn;

• 方法的重载
  一个方法实现多种功能，即能get又能set；

• jQuery.fn.extend与jQuery.extend
jQuery.fn.extend：把对象挂载到 jQuery 的 prototype 属性，来扩展一个新的 jQuery 实例方法，通过jQuery实例进行调用；
  jQuery.extend：扩展静态工具方法，可直接使用 $.XXX 进行调用；

• 正则表达式
  jQuery中使用了大量正则表达式

• 变量冲突处理
  执行var query = jQuery.noConflict(true);，query即指向jQuery；

jQuery扩展

jQuery.extend：扩展jQuery类本身，为类添加新的方法。作用于每一个实例化的jQuery对象；

jQuery.fn.extend：给jQuery这个对象添加方法；

jQuery如何遍历DOM

遍历方法中最大的种类是树遍历（tree-traversal）。

• jQuery遍历-祖先：向上遍历DOM树；
• jQuery遍历-后代：向下遍历DOM树；
• jQuery遍历-同胞：水平遍历DOM树；
• jQuery遍历-过滤。

原生对象

Array.prototype

Object

MDN

Object.assign(target, ...sources)：将 sources 自身的可枚举属性拷贝给 target，并返回 target；

Object.create(proto)：以 proto 为原型创建对象；

Object.keys(obj)：由 obj 所有可枚举自身属性的属性名组成的数组；