对应的前端知识总结归纳（常被问到的知识四：ES版块）

大家好，我是梅巴哥er。本篇介绍ES版块的知识总结。

---

ES版块

常用学习网站：

• 阮一峰老师的讲解
• B站找相关视频学习

---

知识总结：

• 讲几个很实用的BOM属性对象方法
  • 参考博文：BOM属性
• 说一下闭包
  • 一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

function fn() {
	let num = 1
	return function con() {
		console.log(num)
	}
}
fn1()()

• 说一下类的创建和继承
  • 参考博文：类的创建和继承
• 如何解决异步回调地狱
  • 参考博文：我的博文
  • 参考博文：3种方法的更替
• 改变函数内部this指针的指向函数（bind，apply，call的区别）
  • 参考博文：我的博文
  • 参考博文：很有趣的解释
• 说一下Commonjs、AMD和CMD
  • 参考博文：三者的区别
• 如何实现一个私有变量，用getName方法可以访问，不能直接访问

function Product(){
	var name='张三'
	this.getName=function(){
		return name 	
	}
}
var obj=new Product()
console.log(obj.name)//undefined
console.log(obj.getName())//张三

• 自己实现一个bind函数
  • 参考博文：bind函数

Function.prototype.bind=function(obj,arg){
  var arg=Array.prototype.slice.call(arguments,1);
  var context=this;
  var bound=function(newArg){
    arg=arg.concat(Array.prototype.slice.call(newArg));
    return context.apply(obj,arg);
  }
  var F=function(){}
  //这里需要一个寄生组合继承
  F.prototype=context.prototype;
  bound.prototype=new F();
  return bound;
}

• 代码的执行顺序的考查

// 写出如下代码的输出结果
setTimeout(function(){console.log(1)},0);
new Promise(function(resolve,reject){
console.log(2);
resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});
process.nextTick(function(){console.log(5)});
console.log(6);

• 如何实现sleep的效果（es5或者es6）

// 方法一：while循环
function sleep(ms){
    var start=Date.now(),expire=start+ms;
    while(Date.now()<expire);
    console.log('1111');
    return;
 } 
sleep(2000) // 休眠2000ms后，输出1111

// 方法二：Promise
function sleep(ms){
  var temple=new Promise(
  (resolve)=>{
  console.log(111);
  setTimeout(resolve,ms)
  });
  return temple
}
sleep(500).then(function(){
   //console.log(222)
})
//先输出了111，延迟500ms后输出222

// 方法三：async
function sleep(ms){
  return new Promise((resolve)=>setTimeout(resolve,ms));
}
async function test(){
  var temple=await sleep(1000);
  console.log(1111)
  return temple
}
test();
//延迟1000ms输出了1111

// 方法四：generate
function* sleep(ms){
   yield new Promise(function(resolve,reject){
             console.log(111);
             setTimeout(resolve,ms);
        })  
}
sleep(500).next().value.then(function(){console.log(2222)})

• 简单的实现一个promise

function myPromise(constructor){
    let self=this;
    self.status="pending" //定义状态改变前的初始状态
    self.value=undefined;//定义状态为resolved的时候的状态
    self.reason=undefined;//定义状态为rejected的时候的状态
    function resolve(value){
        //两个==="pending"，保证了状态的改变是不可逆的
       if(self.status==="pending"){
          self.value=value;
          self.status="resolved";
       }
    }
    function reject(reason){
        //两个==="pending"，保证了状态的改变是不可逆的
       if(self.status==="pending"){
          self.reason=reason;
          self.status="rejected";
       }
    }
    //捕获构造异常
    try{
       constructor(resolve,reject);
    }catch(e){
       reject(e);
    }
}
myPromise.prototype.then=function(onFullfilled,onRejected){
   let self=this;
   switch(self.status){
      case "resolved":
        onFullfilled(self.value);
        break;
      case "rejected":
        onRejected(self.reason);
        break;
      default:       
   }
}

• 箭头函数中this指向举例

var a=11;
function test2(){
  this.a=22;
  let b=()=>{console.log(this.a)}
  b();
}
var x=new test2();
//输出22

• 闭包 有什么用
  • 闭包（closure） 指有权访问另一个函数作用域中的局部变量的函数。
  • 简单理解就是，一个函数可以访问另一个函数的局部变量。
  • 参考博文：闭包
• 之前说了ES6 set可以数组去重，是否还有其他的数组去重的方法
  • 参看博文：数组去重
• 迄今为止，用过哪些ES6的知识
• this的指向 哪几种
  • 在普通函数中，this指向window；严格模式下，this指向undefined
  • 在构造函数中，this指向创建的对象
  • 在方法声明中，this指向调用者
  • 在定时器中， this指向window
  • 在事件中，this 指向事件源
• 什么是暂时性死区？或者什么叫暂停死区？
  • 在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”

var num = 1;
if(true) {
	console.log(num);
	let num = 2;
}
// 这也会报错：因为在{ }里面，let要先声明变量，这个变量才能有用。
// 没先声明，这一块区域就是死区。

• JS中继承实现的几种方式
  • 参考博文：继承方法
• 介绍一下promise，及其底层如何实现
  • 参考：promise底层实现
• 什么是js的闭包？有什么作用，用闭包写个单例模式
  • 参考：闭包详解
• let const var的区别 ，什么是块级作用域，如何用ES5的方法实现块级作用域（立即执行函数），ES6 呢
  • 参考博文：三者区别
  • 参考博文：实现块级作用域
• ES6箭头函数的特性

// ES6 增加了箭头函数，基本语法为:
  let func = value => value; 
// 相当于 :
  let func = function (value) { 
    return value; 
    }; 
//  箭头函数与普通函数的区别在于： 
  1、箭头函数没有this，所以需要通过查找作用域链来确定this的值，
  这就意味着如果箭头函数被非箭头函数包含，
  this绑定的就是最近一层非箭头函数的this
  2、箭头函数没有自己的arguments对象，但是可以访问外围函数的arguments对象 
  3、不能通过new关键字调用，同样也没有new.target值和原型 

• setTimeout和Promise的执行顺序考查。请写出如下代码的执行结果。
  • 参考博文：执行顺序
• 写一个newBind函数，完成bind的功能

//   bind（）方法，创建一个新函数，当这个新函数被调用时，
// bind（）的第一个参数将作为它运行时的this，
// 之后的一序列参数将会在传递的实参前传入作为它的参数 
Function.prototype.bind2 = function (context) {
if (typeof this !== "function") {
throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
}
var self = this;
var args = Array.prototype.slice.call(arguments, 1);
var fNOP = function () {};
var fbound = function () {
self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments)));
}
fNOP.prototype = this.prototype;
fbound.prototype = new fNOP();
return fbound;
}

• 简单讲一讲ES6的一些新特性
  • 参考博文：新特性
• call和apply是用来做什么的？
  • 参考博文：博文
• 如何写一个继承？
  • 参考博文：继承
• 给两个构造函数A和B，如何实现A继承B？
  • 参考博文：继承
• 如果已经有三个promise，A、B和C，想串行执行，该怎么写？

// promise
A.then(B).then(C).catch(...)
// async/await
(async ()=>{
await a();
await b();
await c();
})()

• async和await具体该怎么用？
• 知道哪些ES6，ES7的语法
• 面向对象的继承方式
• 讲讲class类
  • ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
• 箭头函数和function有什么区别
  • 箭头函数根本就没有绑定自己的this，在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用
• promise的状态有那些
  • 参考博文：promise状态
• 尾递归
  • 参考博文：尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
  • 可能会出现大数溢出的问题

---