【前端面试题——JS篇】

1.javascript都有哪些数据类型，如何存储的？

Javascript的数据类型分为基本数据类型和复合数据类型；
基本数据类型有：数组，布尔，字符串，symbole，undefined，null
复合数据类型：object，function
基本数据类型存储在栈中
引用数据类型存储在堆中

2.判断数据类型的方法有哪些？有什么区别？

1.typeof：
    typeof'';// string 有效
    typeof 1;// number 有效
    typeof Symbol();// symbol 有效
    typeof true;//boolean 有效
    typeof undefined;//undefined 有效
    typeof null;//object 无效
    typeof [] ;//object 无效
    typeof new Function();// function 有效
    typeof new Date();//object 无效
    typeof new RegExp();//object 无效
2.instanceof
    instanceof 是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。        在这里需要特别注意的是：instanceof 检测的是原型
3.constructor
当一个函数 F被定义时，JS引擎会为F添加 prototype 原型，然后再在 prototype上添加一个 constructor 属性
4.toString
toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。

对于 Object 对象，直接调用 toString()  就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。
    Object.prototype.toString.call('') ;  // [object String]
    Object.prototype.toString.call(1) ;   // [object Number]
    Object.prototype.toString.call(true) ;// [object Boolean]
    Object.prototype.toString.call(Symbol());//[object Symbol]
    Object.prototype.toString.call(undefined) ;// [object Undefined]
    Object.prototype.toString.call(null) ;// [object Null]
    Object.prototype.toString.call(newFunction()) ;// [object Function]
    Object.prototype.toString.call(newDate()) ;// [object Date]
    Object.prototype.toString.call([]) ;// [object Array]
    Object.prototype.toString.call(newRegExp()) ;// [object RegExp]
    Object.prototype.toString.call(newError()) ;// [object Error]
    Object.prototype.toString.call(document) ;// [object HTMLDocument]
    Object.prototype.toString.call(window) ;//[object global] window 是全局对象 global 的引用

3.说说你对事件循环的理解？

Javascript 是一门单线程的语言，意味着同一时间内只能做一件事，但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环
在Javascript中，所有的任务都可以分为

• 同步任务:立即执行的任务，同步任务一般会直接进入到主线程中执行
• 异步任务:异步执行的任务，比如ajax网络请求，setTimeout定时函数等

异步任务还可以细分为微任务与宏任务

• 微任务一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前
• 宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合

4.说说你对BOM的理解，BOM的核心都有哪些？作用是什么

BOM (Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象

其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率

浏览器的全部内容可以看成DOM，整个浏览器可以看成BOM

Bom的核心对象是window，它表示浏览器的一个实例
在浏览器中，window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象
因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

navigator 对象主要用来获取浏览器的属性，区分浏览器类型。属性较多，且兼容性比较复杂

screen保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度

history对象主要用来操作浏览器URL的历史记录，可以通过参数向前，向后，或者向指定URL跳转

5.Bind,call,apply有什么区别？如何实现一个bind方法？

call，apply， bind方法都可以改变函数的this指向

• call方法apply调用后函数会立即执行，bind方法不会立即执行函数
• call方法和bind方法后面跟的是参数列表，apply的参数据是一个数组

6.如何理解闭包？闭包的应用场景是？

可以访问外部函数中的变量的内部函数，
在js中只有函数内部的子函数才能读取局部变量，
闭包就是将函数内部和函数外部连接起来的桥梁,让外部访问函数内部变量，
局部变量常驻在内存中，可以避免使用全局变量，防止全局变量污染，
会造成内存泄漏，每次执行外部函数的时候，
外部函数的引用地址不同，都会创建一个新的地址
应用场景：

• 函数嵌套
• 内部函数中引用了外部函数的变量
• 将内部函数作为返回值返回

7.说说你对同步和异步的区别的理解？

同步：
同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

异步：
将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

8.什么是事件代理?

事件代理又叫事件委托，是在网页设计中的一种设计思想，即把一个或者一组元素（目标元素）的事件绑定到父级或者祖先级元素上。真正绑定事件的是外层元素，⽽不是⽬标元素。

当事件响应到⽬标元素上时，会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上，然后在外层元素上去执⾏函数。

9.什么是防抖和节流，有什么区别？如何实现？

防抖函数（debounce）

功能：当事件被触发N秒之后再执行回调，如果在N秒内被触发，则重新计时。
比如一个输入框，当应用实现防抖函数之后，用户不断输入内容时，函数会一直被触发，则不会发送请求。只有当用户在一段规定时间N内未进行输入操作，才会发送一次请求。如果在N秒内间断的输入内容，且间断的时间小于规定时间N时，则会重新计时且不会发送请求。
这样降低了发送请求的次数，提高性能的同时也提升了用户体验。

// func是用户传入需要防抖的函数
// wait是等待时间，若不传参，默认50ms
// 因为闭包，timer将一直在内存中
const debounce = (func, wait = 50) => {
    // 缓存一个定时器
    let timer = null;
    // 返回的函数是每次用户实际调用的防抖函数
    return (...args) => {
        // 如果已经设定过定时器了就清空上一次的定时器
        if (timer) clearTimeout(timer);
        // 开始一个新的定时器，延迟执行用户传入的方法
        timer = setTimeout(() => {
            func.apply(this, args);
        }, wait);
    };
};

节流函数（throttle）

功能：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

// func是用户传入需要防抖的函数
// wait是等待时间，若不传参，默认50ms
// 因为闭包，falg将一直在内存中
const throttle = (func, wait = 50) => {
    // 定义falg，初试为true
    let flag = true;
    // 返回的函数是每次用户实际调用的节流函数
    return (...args) => {
        if (flag) {
            // 如果flag为true，则执行定时器
            setTimeout(() => {
                func.apply(this, args);
                // 函数执行完毕后，将flag改回true
                // 以便下次再执行
                flag = true;
            }, wait);
        }
        // 因为定时器是异步任务，定时器执行后，立刻将flag关闭
        // 在等待延时时间时，阀门始终关闭，不会一直执行函数
        flag = false;
    };
};

10.对作用域链的理解？

作用域分为 全局作用域 和 函数作用域 （ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6 的到来，为我们提供了 块级作用域 ,可通过新增命令 let 和 const 来体现。）

• 全局作用域：在任何位置都能方位，window的内置属性就是全局作用域

• 函数作用域：只能在函数体内才能访问到，就是私有作用域，它们都是栈内存

作用域就是代码执行开辟栈内存，作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突

11.对原型和原型链的理解？

原型:每一个构造函数都有一个prototype属性，这个属性称之为函数的显示原型，
构造函数实例化后或者对象都有一个__proto__属性，称之为对象的隐式原型，后续原型链就是通过proto查找属性的。
原型链:当我们访问对象的某个属性时，会先从当前对象中查找，如果没有找到的则继续去对象的proto隐士原型中去查找，，如果还没找到则继续向上级对象的原型中查找，直到找到顶层Object对象，如果没有找到返回undefined，这种通过对象的__proto__隐式原型查找属性的链条关系就称之为原型链。

12.Javascript本地存储有哪些？区别和使用场景？

• cookie
  cookie是指某些网站为了辨别用户身份而储存在用户本地终端上的数据。
  是为了解决 HTTP无状态导致的问题。
  cookie是小型文本数据，不超过4k，cookie是有有效期，安全性的。
  cookie在每次请求中都会被发送，如果不使用 HTTPS并对其加密，其保存的信息很容易被窃取，导致安全风险

• localStorage
  特点：

  • 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
  • 存储的信息在同一域中是共享的
  • 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
  • 大小：5M
  • localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
  • 受同源策略的限制

• sessionStorage
  sessionStorage和localStorage的用法基本一致，sessionStorage是一旦页面关闭，sessionStorage将会删除数据。

区别

• 1.生命周期（有效时间）：
  Cookie：可以设置失效时间，没有设置的话，默认是关闭浏览器后失效。 localStorage：除非被手动清除，否则将会永久保存。
  sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

• 2.存储大小
  cookie：4KB左右 localStorage和sessionStorage：可以保存5MB的信息。

• 3.http请求
  cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。
  localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信。

• 4.易用性
  cookie：需要程序员自己封装，源生的Cookie接口不友好
  localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

• 5.数据与服务器之间的交互方式
  Cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端。
  SessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

应用场景

• 从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比storage更好用的。其他情况下，可以使用storage，就用storage。

• storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了。

• localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。