前端面试之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

3.说几条JavaScript的基本规范

• 变量和函数在使用前声明
• 语句结束后添加分号
• 代码段使用{}包裹
• 以大写字母开头定义构造函数，以全大写定义常量
• 用{} 和 []声明对象和数组
• 使用===和!==来比较true和false或者数字值

4.eval是做什么的

• 他的功能是把对应的字符串解析成JS代码并运行；
• 他不安全，而且非常耗能（执行两次，一次解析成JS代码，一次执行）

5.对闭包的理解

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

闭包的特性：函数内嵌套函数；内部函数可以引用外部的参数和变量；参数和变量不会被垃圾回收机制回收

6.http状态码有哪些

简单版

  100  Continue   继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
  200  OK         正常返回信息
  201  Created    请求成功并且服务器创建了新的资源
  202  Accepted   服务器已接受请求，但尚未处理
  301  Moved Permanently  请求的网页已永久移动到新位置。
  302 Found       临时性重定向。
  303 See Other   临时性重定向，且总是使用 GET 请求新的 URI。
  304  Not Modified 自从上次请求后，请求的网页未修改过。

  400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
  401 Unauthorized 请求未授权。
  403 Forbidden   禁止访问。
  404 Not Found   找不到如何与 URI 相匹配的资源。

  500 Internal Server Error  最常见的服务器端错误。
  503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

完整版

  1**(信息类)：表示接收到请求并且继续处理
    100——客户必须继续发出请求
    101——客户要求服务器根据请求转换HTTP协议版本

  2**(响应成功)：表示动作被成功接收、理解和接受
    200——表明该请求被成功地完成，所请求的资源发送回客户端
    201——提示知道新文件的URL
    202——接受和处理、但处理未完成
    203——返回信息不确定或不完整
    204——请求收到，但返回信息为空
    205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
    206——服务器已经完成了部分用户的GET请求

  3**(重定向类)：为了完成指定的动作，必须接受进一步处理
    300——请求的资源可在多处得到
    301——本网页被永久性转移到另一个URL
    302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的Request。
    303——建议客户访问其他URL或访问方式
    304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
    305——请求的资源必须从服务器指定的地址得到
    306——前一版本HTTP中使用的代码，现行版本中不再使用
    307——申明请求的资源临时性删除

  4**(客户端错误类)：请求包含错误语法或不能正确执行
    400——客户端请求有语法错误，不能被服务器所理解
    401——请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
    402——保留有效ChargeTo头响应
    403——禁止访问，服务器收到请求，但是拒绝提供服务
    404——一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的URL
    405——用户在Request-Line字段定义的方法不允许
    406——根据用户发送的Accept拖，请求资源不可访问
    407——类似401，用户必须首先在代理服务器上得到授权
    408——客户端没有在用户指定的饿时间内完成请求
    409——对当前资源状态，请求不能完成
    410——服务器上不再有此资源且无进一步的参考地址
    411——服务器拒绝用户定义的Content-Length属性请求
    412——一个或多个请求头字段在当前请求中错误
    413——请求的资源大于服务器允许的大小
    414——请求的资源URL长于服务器允许的长度
    415——请求资源不支持请求项目格式
    416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
    417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。

  5**(服务端错误类)：服务器不能正确执行一个正确的请求
    500 - 服务器遇到错误，无法完成请求
    502 - 网关错误
    503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常

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 方法，将父对象的构造函数绑定在子对象上

function Apple(size, num) {
    Fruit.apply(this, arguments);
    this.size = size;
    this.num = num;
}

ES6使用extends继承

class Apple extends Fruit{
    constructor() {
        super()
    }
}

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

Apple.prototype = new Fruit()
Apple.prototype.constructor = Apple

原型继承

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

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

function extend(Child, Parent) {
  　　var p = Parent.prototype;
  　　var c = Child.prototype;
  　　for (var i in p) {
  　　　   c[i] = p[i];
  　　}
}

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

• Window 对象表示当前浏览器的窗口，是JavaScript的顶级对象。
• 我们创建的所有对象、函数、变量都是 Window 对象的成员。
• Window 对象的方法和属性是在全局范围内有效的。
• Document 对象是 HTML 文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）
• Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问
• Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

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

• 该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数）
• 如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获
• 如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡

13. 事件的代理/委托

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

优点：

• 可以减少事件注册，节省大量内存占用
• 可以将事件应用于动态添加的子元素上

缺点：

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

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

function GetBytes(str){
    var len = str.length;
    var bytes = len;
    for(var i=0; i<len; i++){
        if (str.charCodeAt(i) > 255) bytes++;
    }
    return bytes;
}
alert(GetBytes("你好,as"));

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

数组：

arr.concat(arr1, arr2, arrn);
arr.join(",");
arr.sort(func);
arr.pop();
arr.push(e1, e2, en);
arr.shift();
arr.unshift(e1, e2, en);
arr.reverse();
arr.slice(start, end);
arr.splice(index, count, e1, e2, en);
arr.indexOf(el);
arr.includes(el); // ES6

对象：

object.hasOwnProperty(prop);
object.propertyIsEnumerable(prop);
object.valueOf();
object.toString();
object.toLocaleString();
Class.prototype.isPropertyOf(object);