关于前端面试小结

灵魂拷问开始咯，想怎么答就怎么答？

来自一个准备前去面试的前端新人，学习这东西已经2年多了，可是初看看这些面试题，居然有些不知所措，不知道怎么总结语言是其次，我感受主要仍是学的js太浅，不够深，欠缺理论知识，有些东西仍是须要理解的，理解的基础是必须懂得多，蒙头学习，不问世事。是确定不行的，看来还须要努力成长，不断学习。求大神赐教，感激万分，仅供参考，若有问题，请留言告知，临表涕零，不知所言！

1.虚拟DOM是什么东东？

1.虚拟DOM是DOM的抽象，(感受像一种概念吧，虚无缥缈，若即若离) 其本质是JavaScript对象，（本质？？？就是他是JS的儿子吧） 它相较于原生DOM更加轻量级。（也就是性能更好呗，比较优秀哈）

2.原型链又是什么？

2.原型链这三字拆开看 原型：是什么？prototype应该就是了 链：__proto__就是狗链了 这三字合在一块儿就发生化学反应了 原型prototype之上的JS本源一贫如洗就是null，还好原型prototype还有个有出息小弟Object养他 否则早饿死了，穷归穷，可是胸怀鸿浩之志，终于黄天不负有心人，在原型prototype和他的小弟Object 的努力下作出了个大型中转站（大厂），而且均可以经过链子链接，中转站也就管理着下属String、Number、 Boolean、Array、Function、这5个下属小弟挣钱养大哥 小弟终究是小弟，啥都很少，大哥多，这不Object及时大大哥咯

3.new是什么鬼？

3.首先new是哪来的？确定是妈生的！问题来了，孩子他妈是谁？ new一个对象？貌似跟对象有点非同寻常的关系哈！中转站里出来的function就不少 到底有多少？辣莫多？多到不得不分类，没错就是这么多。 function的两大帮派面向对象（构造函数），面向过程（普通函数） 这两大帮派各有各的优点，面向对象帮派的人多属性多点子多，面向过程技多武器多 因此双剑合璧天下无敌，有点样子哈! 这时候江湖人都想借助他们帮派的力量称霸天下，因而点子多的面向对象帮规定了 new出一个分身就能够了，这样咱们损失也不大，因而new诞生了！

// 实现一个new
var Dog = function(name) {
  this.name = name
}
Dog.prototype.bark = function() {
  console.log('wangwang')
}
Dog.prototype.sayName = function() {
  console.log('my name is ' + this.name)
}
let sanmao = new Dog('三毛')
sanmao.sayName()
sanmao.bark() 
// new 的做用
// 建立一个新对象obj
// 把obj的__proto__指向Dog.prototype 实现继承
// 执行构造函数，传递参数，改变this指向 Dog.call(obj, ...args)
// 最后把obj赋值给sanmao

4.promise是什么，怎么理解？

4.JS异步编程解决方案之一

(1)promise 对象初始化状态为 pending

(2) 当调用resolve(成功)，会由pending => fulfilled

(3) 当调用reject(失败)，会由pending => rejected

const request = url => { 
    return new Promise((resolve, reject) => 
{
        $.get(url, data => {
            resolve(data)
        });
    })
};

// 请求data1

request(url).then(data1 => {
    return request(data1.url);   
})
.then(data2 => {
    return request(data2.url);
})
.then(data3 => {
    console.log(data3);
})
.catch(err => throw new Error(err));

5.事件流是什么东西？

5.事件流描述的是从页面中接受事件的顺序。

三大阶段： 捕获阶段（由外向内），

目标阶段（目标阶段中谁先注册谁先执行），

冒泡阶段（由内向外）

（操做试试看就懂了哦！！！）

6.深拷贝，浅拷贝是什么？

6.浅拷贝只复制一层对象的属性

深拷贝是对对象以及对象的全部子对象进行拷贝

（详解的话须要讨论讨论复制路径问题）

7.call、apply,bind是什么？

7.咱们知道 apply() 和 call() 都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部的 this 指向）。

而后，由于这两个方法会当即调用，因此为了弥补它们的缺失，还有个方法 bind()，它不会当即调用（可控）

8.BFC是什么？

8.block formatting context：块级格式上下文

BFC 最大的一个做用就是：在页面上有一个独立隔离容器，

容器内的元素 和 容器 外的元素布局不会相互影响。

9.解构是什么？？

9打破数组结构，将其拆分红成更小部分的过程

异步解决方案之一

let details = {
    firstName:'Code',
    lastName:'Burst',
    age:22
}

const {firstName,age} = details;


console.log(firstName);      //Code 

console.log(age);       // 22



let list = [221,'Baker Street','London'];
let [houseNo,street] = list;
console.log(houseNo,street);// 221 , Baker Street

let list = [221,'Baker Street','London'];
let [houseNo,...street] = list;
console.log(houseNo,street);// 221   Baker Street，London

10.防抖和节流

10.防抖与节流函数是一种最经常使用的 高频触发优化方式，能对性能有较大的帮助。

防抖 (debounce): 将屡次高频操做优化为只在最后一次执行，一般使用的场景是：用户输入， 只需再输入完成后作一次输入校验便可。

节流(throttle): 每隔一段时间后执行一次，也就是下降频率，将高频操做优化成低频操做，

一般使用场景: 滚动条事件 或者 resize 事件，一般每隔 100~500 ms执行一次便可。