前端面试题（二）

1. .active-class是那个组件的属性？

active-class 属于vue-router的样式方法，当router-link标签被点击时将会应用这个样式

2.网页从输入网址到渲染完成经历了哪些过程？

1输入网址
2 发送到DNS服务器 获取IP地址
3 与服务器建立连接
4 浏览器向服务器发送HTTP请求
5 web服务器响应请求
6 浏览器收到返回的数据，并解析
7 生成DOM树 解析标签，渲染页面

3.js的继承方式？

1、原型链继承（核心： 将父类的实例作为子类的原型）
特点：
非常纯粹的继承关系，实例是子类的实例，也是父类的实例
父类新增原型方法/原型属性，子类都能访问到
简单，易于实现
缺点：
要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中
无法实现多继承
来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是所有实例共享的）（详细请看附录代码： 示例1）
创建子类实例时，无法向父类构造函数传参

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

2、构造继承（核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型））
特点：
解决了1中，子类实例共享父类引用属性的问题
创建子类实例时，可以向父类传递参数
可以实现多继承（call多个父类对象）
缺点：
实例并不是父类的实例，只是子类的实例
只能继承父类的实例属性和方法，不能继承原型属性/方法
无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
推荐指数：★★（缺点3）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

3、实例继承（核心：为父类实例添加新特性，作为子类实例返回）
特点：
不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果
缺点：
实例是父类的实例，不是子类的实例
不支持多继承

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

4、拷贝继承
特点：
支持多继承
缺点：
效率较低，内存占用高（因为要拷贝父类的属性）
无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  // 2020年10月10日21点36分：感谢 @baclt 的指出，如下实现修改了原型对象，会导致单个实例修改name，会影响所有实例的name值
  // Cat.prototype.name = name || 'Tom'; 错误的语句，下一句为正确的实现
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

5、组合继承（核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用）
特点：
弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
既是子类的实例，也是父类的实例
不存在引用属性共享问题
可传参
函数可复用
缺点：
调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）
推荐指数：★★★★（仅仅多消耗了一点内存）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

// 感谢 @学无止境c 的提醒，组合继承也是需要修复构造函数指向的。

Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

6、寄生组合继承（核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点）
特点：
堪称完美
缺点：
实现较为复杂
推荐指数：★★★★（实现复杂，扣掉一颗星）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

感谢 @bluedrink 提醒，该实现没有修复constructor。

Cat.prototype.constructor = Cat; // 需要修复下构造函数

详细解释：https://www.cnblogs.com/humin/p/4556820.html

4.React和Vue的区别？

相同点：
1.都支持服务器端渲染
2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
3.数据驱动视图
4.都有支持native的方案,React的React native,Vue的weex
5.都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）
不同点：
1.React严格上只针对MVC的view层,Vue则是MVVM模式
2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.
而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’;
Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
5.state对象在react应用中不可变的,需要使用setState方法更新状态;
在vue中,state对象不是必须的,数据由data属性在vue对象中管理；

5.React的生命周期有哪些？

1.componentWillmount 组件挂载前
可以获取this数据，不能获取dom
修改数据 可以知己而引起页面改变
修改数据 不会触发运行中的生命周期
这个生命周期没什么用 跟不要做网络请求

2.componentDidMount 挂在结束
有dom 有数据 可以做网络请求 做初始化操做
数据修改不能直接引起页面改变 需要通过setState
数据修改会触发生命周期

3.shouidcomponentUpdate 数据变了
该生命周期控制数据修改是否需要更新界面通过该生命周期减少无关页面更新
返回true 更新 返回 false 不更新
参数props和state将要更新数据
this里的props和state 是还没更新的数据

4.componentWillUpdate 更新之前
页面更新之前触发
数据dom元素都是跟新之前 也是在render前

5.componentDidUpdate 更新结束
在更新操做结束后触发
数据和dom都是修改之后的
小心在这里做数据更新操作

6.conponentWillReceiveProps
监听props发生改变
参数里是跟新之后偶的数据
this里是更新之前的数据

7.componentWillummount
销毁时触发

6.谈一下对盒子模型的理解？

上面是一个盒子模型图，一个盒子包括了content（实际内容）、border（边框）、padding（内边距）和margin（外边距）。
content（实际内容）
盒子的内容，显示文本和图像。我们给元素设置的width和height其实是content的宽高，

如果指定高度大于显示内容所需高度，多余的高度会产生类似内边距一样的效果；如果指定高度小于显示内容所需高度，会出现滚动条。如果元素内容的高度大于元素框的高度，浏览器的具体行为取决于overflow属性。

border（边框）
元素的边框是围绕元素内容的内边距的一条或多条线。边框由粗细、样式和颜色三部分组成。

padding（内边距）
清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的Background属性影响，padding是有背景的。

margin（外边距）
在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景（padding所带的是本身的背景而非父元素）。margin经常取负值实现定位的作用。

外边距有一个合并问题，经常使人们混淆，简单来说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
详细解释：https://www.jianshu.com/p/2353c364318b

7.前端常见的封装数据格式有哪些？

1、放大镜
2、JSONP
3、获取指定区间范围随机数，包括lowerValue和upperValue
4、数组排序
5、数组去重
6、深度拷贝
详细解释：https://segmentfault.com/a/1190000016677097