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