前端面试干货:四月份前端面试题总指南(下篇)

接着昨天的前端面试题总结写的哈，有在找工作的伙伴，建议仔细阅读！

10.什么是原型链

原型：每个javascript创建的时候都会关联另一个对象，这个对象就是原型，对象会从原型继承属性构造函数可以通过prototype去寻找他关联的原型，A.prototype就是它关联的原型对象，原型对象可以通过构造器constructor来寻找与自身关联的构造函数

function A () {
}
A.prototype.constructor === A //true

原型链：原型链是由原型对象组成，每个对象都有proto属性，指向该构造函数的原型，proto将对象连接起来组成了原型链原型链查找机制：当查找对象的属性时，如果实例对象不存在该属性，沿着原型链向上一级查找，直到找到object.prototype（也就是对象原型object.prototype为null）,停止查找到返回undefined

function A () {
}
new A().__proto__ === A.prototype //true

原型上的属性和方法被实例共享

function A () {
}
A.prototype.name = 'a'
var a = new A()
var b = new A()
a.name === b.name // true
a.__proto__.name === b.__proto__.name // true

instanceOf原理：instamceOf可以判断实例对象的proto属性与构造函数的prototype是不是同一地址(如果网页中有多个全局环境就会不准确)

function _instanceOf(obj, type) {
    var obj = obj.__proto__
    var type = type.prototype
    while(true) {
        if (obj == null) {
            return false
        }
        if (obj == type) {
            return true
        }
        obj = obj.__proto__
    }
}
var a = [1, 2, 3]
_instanceOf(a, Array)

11.深拷贝和浅拷贝

浅拷贝只是复制引用，新旧对象共享一块内存，一般把第一层拷贝到一个对象上，改变其中一个另一个也会改变

var obj = {
    name: 'a',
    age: 18,
    arr: [1, 2]
}
function shallowCopy(obj) {
  var newObj = {};
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) { // 过滤掉原型上的属性
      newObj[prop] = obj[prop];
    }
  }
  return newObj;
}
var obj1 = shallowCopy(obj)
var obj2 = obj
obj1.name = 'b'
obj2.age = 20
obj2.arr[0] = 3
obj1.arr[0] = 4
console.log(obj) // {name: "a", age: 20, arr: [4, 2]}
console.log(obj1) // {name: "b", age: 18, arr: [4, 2]}
console.log(obj2) // {name: "a", age: 20, arr: [4, 2]}

我们通过浅拷贝得到obj1，改变obj1的name，obj不会发生改变，通过赋值得到obj2，obj2改变age值obj的值也会被改变。说明赋值得到的对象只是改变了指针，浅拷贝是创建了新对象。

我们通过obj2和obj1都改变的值，发现obj，ob1，obj2都发生了改变，所以无论是浅拷贝还是赋值都会改变原始数据（浅拷贝只拷贝了一层对象的属性）

深拷贝：复制并创建一个一摸一样的对象（递归复制了所有层级），不共享内存，改变其中一个另一个不会改变

var obj = {
    name: 'a',
    age: 18,
    arr: [1, 2]
}
function copy (obj) {
    var newobj = Array.isArray(obj) ? [] : {};
    if(typeof obj !== 'object'){
        return;
    }
    for(var i in obj){
       if (obj.hasOwnProperty(i)) {
          newobj[i] = typeof obj[i] === 'object' ? copy(obj[i]) : obj[i];
       }
    }
    return newobj
}
var copyObj = copy(obj)
copyObj.arr[0] = 3
console.log(copyObj) //{name: "a", age: 20, arr: [3, 2]}
console.log(obj) //{name: "a", age: 20, arr: [1, 2]}

12.实现继承

原型链继承（在实例化一个类时，新创建的对象复制了父类构造函数的属性和方法，并将proto指向父类的原型对象，当在子类上找不到对应的属性和方法时，将会在父类实例上去找。）

function Big () {
    this.age = [1, 2, 3]
}
Big.prototype.getAge = function () {
    return this.age
}
function Small() {}
Small.prototype = new Big()
var small = new Small()
console.log(small.age) // [1, 2, 3]
console.log(small.getAge()) // [1, 2, 3]

缺点1：引用缺陷（修改其中一个Small实例的父类变量会影响所有继承Big的实例）

small.age[0] = 12
var small1 = new Small()
console.log(small1.age) // [12, 2, 3]
console.log(small.age) // [12, 2, 3]

缺点2：无法为不同的实例初始化继承来的属性

function Big (name) {
    this.age = [1, 2, 3]
    this.name = name
}
Big.prototype.getAge = function () {
    return this.age
}
function Small() {}
Small.prototype = new Big('small')
var small = new Small()
var small1 = new Small()
console.log(small1.name) // small
console.log(small.name) // small

构造函数继承（在子类的构造函数中执行父类的构造函数，并为其绑定子类的this，让父类的构造函数把成员属性和方法都挂到子类的this上）

function Big (name) {
    this.age = [1, 2, 3]
    this.name = name
}
Big.prototype.getAge = function () {
    return this.age
}
function Small(name) {
    Big.apply(this, arguments)
}
var small = new Small('small')
var small1 = new Small('small1')
console.log(small.name) // small
console.log(small1.name) // small1
small.age[0] = 12
console.log(small.age) // [12, 2, 3]
console.log(small1.age) // [1, 2, 3]

缺点：无法访问原型上的方法

small.getAge() //small.getAge is not a function组合式继承(将原型链继承和构造函数继承组合到一起, 综合了原型链继承和构造函数继承的优点)

function Big (name) {
    this.age = [1, 2, 3]
    this.name = name
}
Big.prototype.getAge = function () {
    return this.age
}
function Small(name) {
    Big.apply(this, arguments)
}
Small.prototype = new Big()
var small = new Small('small')
var small1 = new Small('small1')
console.log(small.name) // small
console.log(small1.name) // small1
small.age[0] = 12
console.log(small.age) // [12, 2, 3]
console.log(small1.age) // [1, 2, 3]
console.log(small.getAge()) // [12, 2, 3]
console.log(small1.getAge()) // [1, 2, 3]

小缺点：调用了两次父类构造函数

寄生组合式继承（在组合继承的基础上减少一次多余的调用父类构造函数）

function Big (name) {
    this.age = [1, 2, 3]
    this.name = name
}
Big.prototype.getAge = function () {
    return this.age
}
function Small(name) {
    Big.apply(this, arguments)
}
// 对父类原型进行拷贝，否则子类原型和父类原型指向同一个对象，修改子类原型会影响父类
Small.prototype = Object.create(Big.prototype) 
var small = new Small('small')
var small1 = new Small('small1')
console.log(small.name) // small
console.log(small1.name) // small1
small.age[0] = 12
console.log(small.age) // [12, 2, 3]
console.log(small1.age) // [1, 2, 3]
console.log(small.getAge()) // [12, 2, 3]
console.log(small1.getAge()) // [1, 2, 3]

注意：对父类原型进行拷贝后赋值给子类原型，因此Small上的constructor属性被重写，需要修复Small.prototype.constructor = Dog;

extends继承(class和extends是es6新增的，class创建一个类，extends实现继承)

class Big {
  constructor(age) {   
    this.age = age;
  }
  getAge () {
    return this.age
  }
}
class Small extends Big {
  constructor(age) {   
   super(age)
  }
}
var small = new Small([1, 2, 3])
var small1 = new Small([12, 2, 3])
small.age[0] = 13
console.log(small.age) // [13, 2, 3]
console.log(small.getAge()) // [13, 2, 3]
console.log(small1.age) // [12, 2, 3]
console.log(small1.getAge()) // [12, 2, 3]

浏览器网络

1.常用http状态码

200 成功状态码301 永久重定向，302 临时重定向400 请求语法错误， 401 请求需要http认证，403 不允许访问资源，404 资源未找到500 服务器内部错误，502 访问时出错，503 服务器忙，无法响应

2.https原理

http协议：客户端浏览器与web服务器之间的应用层通讯协议https协议：HTTP+SSL/TLS,http下加入SSL层，https安全基础时SSL，用于安全的HTTP数据传输https优势：内容经过对称加密，每个连接会生成唯一的加密密钥，内容经过完整性校验，第三方无法伪造身份使用对称加密（加密和解密使用的是同一个密钥）被中间人拦截，中间人可以获取密钥，就可以对传输的信息进行窥视和篡改使用非对称密钥（双方必须协商一对密钥，一个私钥和一个公钥）用私钥加密的数据，只有对应的公钥才能解密，用公钥加密的数据，只有对应的私钥才能解密，弊端：RSA算法很慢非对称密钥+对称密钥（结合两者优点）客户端获取公钥确认服务器身份通过SSL证书，客户端接受到服务端发来的SSL证书给客户端。

3.前端安全

XSS攻击：注入恶意代码来攻击。攻击者在目标网站上注入恶意代码，被攻击者登陆网站执行这些恶意代码，这些脚本可以读取 cookie，session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈（打开新标签跳转，新标签存在恶意代码，跳转到伪造的页面）,网页植入广告等。XSS攻击防御手段：禁止JavaScript读取某些敏感cookie，限制输入内容和长度控制，检测是否有恶意代码注入CSRF攻击：诱导用户进入第三方，获取到登录凭证，冒充用户对被攻击的站点执行操作，导致账号被劫持防御CSRF攻击：验证token(请求服务器时，返回token，每个请求需要加上token)，

5.浏览器缓存

浏览器每次发起请求，都会在浏览器缓存中查找请求结果和缓存标识，浏览器每次拿到的数据会将结果和标识存入浏览器中强制缓存：当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。协商缓存：强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。（协商缓存生效，服务器返回304，资源未更新，协商缓存失效，服务器返回200，资源更新重新缓存）详情可以看这篇文章彻底理解浏览器的缓存机制

框架

1.什么是vue生命周期

每个vue实例在被创建之前都要经过一系列初始化过程，这个过程就是vue生命周期。（开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程）beforeCreate: 完成实例初始化，this指向被创建的实例，data,computed,watch,mothods方法和数据都不可以访问created: 实例创建完成，data,computed,watch,methods可被访问，未挂载dom，可对data进行操作，操作dom需放到nextTick中beforeMount: 有了el，找到对应的template编译成render函数mounted: 完成挂载dom和渲染，可以对dom进行操作，并获取到dom节点，可以发起后端请求拿到数据beforeUpdate: 数据更新之前访问现有dom，可以手动移除已添加事件的监听updated: 组件dom已完成更新，可执行依赖的dom 操作，不要操作数据会陷入死循环activated: keep-alive缓存组件激活时调用deactivated keep-alive移除时调用beforeDestroy: 实例销毁之前调用，可以销毁定时器destroyed: 组件已经被销毁

2.第一次页面加载会触发哪几个钩子

会触发beforeCreate, created, beforeMount, mounted

3.created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

4.hash模式和history模式

在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。history利用了HTML5中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。history模式需要后台配置支持

5.computed和watch区别

computed: 依赖的属性值发生改变才会重新计算，得出最后的值watch: 当依赖的data的数据变化，执行回调（可以观察数据的某些变化，来做一些事情）

6.vue中key的作用

key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。

7.vue的两个核心点

数据驱动：ViewModel，保证视图的一致性组件系统：组件化，封装可复用的组件，页面上每个独立的区域都可以看成一个组件，组件可以自由组合成页面

8.SPA首屏加载慢如何解决

使用路由懒加载使用SSR渲染优化webpack打包体积图片使用CDN加速

9.vue禁止弹窗后的屏幕滚动

主要是是写一个点击出现弹窗禁止屏幕滚动的方法，关闭弹窗屏幕可以正常滚动

methods : {
    //禁止滚动
    stop(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
    },
    /取消滑动限制/
    move(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);
    }
}

10.Vuex中actions和mutations的区别

action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步，也可以处理异步的操作action改变状态，最后是通过提交mutation

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。