写在前面
CSDN话题挑战赛第1期
-
活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
-
参赛话题：前端面试宝典
-
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！ -
创作模板：
携手共筑前端面试宝典
说一说 JS 中的常用的继承方式有哪些？以及各个继承方式的优缺点。
考点
javascript实现继承的方式
答案
JS 中的常用的继承方式有原型继承、组合继承、寄生组合继承、ES6的extend。
方法一：原型继承
重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。
特点：类似于复制一个对象，用函数来包装。
缺点：1、所有实例都会继承原型上的属性。2、无法实现复用。（新实例属性都是后面添加的）
方法二：组合继承
重点：结合了两种模式的优点，传参和复用
特点：1、可以继承父类原型上的属性，可以传参，可复用。
2、每个新实例引入的构造函数属性是私有的。
缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。
方法三：寄生组合式继承, 即通过借用构造函数来继承属性, 在原型上添加共用的方法, 通过寄生式实现继承.
寄生：在函数内返回对象然后调用
组合：1、函数的原型等于另一个实例。2、在函数中用apply或者call引入另一个构造函数，可传参
重点：修复了组合继承的问题
方法四：ES6的extend
子类只要继承父类，可以不写 constructor ，一旦写了，则在 constructor 中的第一句话必须是 super 。
扩展
寄生组合式继承, 即通过借用构造函数来继承属性, 在原型上添加共用的方法, 通过寄生式实现继承.
//寄生式继承的基本模式
function inheritPrototype(subType, superType) {
var prototype = Object.create(superType.prototype); // 创建对象，创建父类原型的一个副本
prototype.constructor = subType; // 增强对象，弥补因重写原型而失去的默认的constructor 属性
subType.prototype = prototype; // 指定对象，将新创建的对象赋值给子类的原型
}
// 父类初始化实例属性和原型的属性和方法
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
// 借用构造函数继承构造函数的实例的属性(解决引用类型共享的问题)
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
// 将子类型的原型重写替换成父类的原型
inheritPrototype(SubType, SuperType);
// 对子类添加自己的方法
SubType.prototype.sayAge = function() {
console.log(this.age);
};
var instance1 = new SubType("heyushuo");
var instance2 = new SubType("kebi");
instance1.sayName(); //heyushuo
instance2.sayName(); //kebi
instance1.colors.push("yellow"); // ["red", "blue", "green", "yellow"]
instance1.colors.push("black"); // ["red", "blue", "green", "black"]
宏任务和微任务都是怎样执行的？
考点
宏任务和微任务的执行
答案
1.执行宏任务script，
2.进入script后，所有的同步任务主线程执行
3.所有宏任务放入宏任务执行队列
4.所有微任务放入微任务执行队列
5.先清空微任务队列，
6.再取一个宏任务，执行，再清空微任务队列
7.依次循环
扩展
例题一：
setTimeout(function(){
console.log(‘1’)
});
new Promise(function(resolve){
console.log(‘2’);
resolve();
}).then(function(){
console.log(‘3’)
});
console.log(‘4’);
new Promise(function(resolve){
console.log(‘5’);
resolve();
}).then(function(){
console.log(‘6’)
});
setTimeout(function(){
console.log(‘7’)
});
function bar(){
console.log(‘8’)
foo()
}
function foo(){
console.log(‘9’)
}
console.log(‘10’)
bar()
最终结果：2，4，5，10，8，9，3，6，1，7
var let const 有什么区别？
考点
变量提升
暂时性死区
块级作用域
重复声明
修改声明的变量
答案
var
var声明的变量可进行变量提升，let和const不会
var可以重复声明
var在非函数作用域中定义是挂在到window上的
let
let声明的变量只在局部起作用
let防止变量污染
不可在声明
const
具有let的所有特征
不可被改变
不可改变只适用于直接地址。如果使用const声明的是对象的话，是可以修改对象内部的值的。
写在最后
CSDN话题挑战赛第1期