Promise
首先来说一下应该明白Promise是做什么的，JS是一门典型的异步单线程的编程语言，单线程就不说了，异步如何理解呢？异步编程可以理解成在执行指令之后不能马上得到结果，而是继续执行后面的指令，等到特定的事件触发之后才得到想要的结果。
也可以和同步对比理解，同步就是一步步执行指令，而异步在遇到特殊任务（异步任务）时，并不会等待该任务执行完成之后再去执行下一步，而是跳过等待，先去执行下一步任务，等到某个时机该特殊任务（异步任务）执行完成之后再返回来对其进行处理。
比如：
console.log(1);
setTimeout(()=>{
console.log(2)
},1000)
console.log(3);
该段代码不会按照顺序输出1，2，3而是先输出1，3之后再输出2。你可能会说，最后输出2是因为它是延时1s之后才输出的。那么请看以下代码：
console.log(1);
setTimeout(()=>{
console.log(2)
},0)
console.log(3);
以上代码输出顺序依旧是1，3，2。实际上并不是因为延时导致的2最后输出而是因为这就是一个典型的异步任务，它是在同步任务之后才去执行的。
说起异步肯定首先会想到ajax,因为ajax天生就是异步操作，先看ajax伪代码
var xhr = new XMLHttpRequest();
xhr.open(method,url);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById('app').innerHTML = xhr.responseText
}
}
由于ajax是异步操作，所以我们只能将从服务器获取数据之后再渲染页面的整个过程放在ajax请求成功之后监听函数onreadystatechange里,这样做有些糟糕，会导致代码比较乱。
因此有一种操作对于异步编程来说比较优雅就是回调函数。
还拿ajax举例：
//简易封装ajax
function getAppJson(cb){
var xhr = new XMLHttpRequest();
xhr.open(method,url);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
cb(responseText)
}
}
}
//回调函数
function initHtml(val){
document.getElementById('app').innerHTML = val
}
// 将initHtml函数作为参数传入getAppJson中并在xhr.onreadystatechange 方法中执行并把后台所得数据作为参数传递给initHtml；
getAppJson(initHtml);
上述代码使用回调函数优雅的解决了ajax异步操作。
上述代码简化之后就是下面这个样子的：
function app(cb){
cb(1)
}
function init(val){
console.log(val) //1
}
app(init)
回调函数是一种很好地异步编程思想。但是有一种被人们称为回调地狱的情况让人们不得不使用Promise去替代回调函数。
回调地狱就是回调函数里嵌套回调函数，比如：
var sayhello = function (name, callback) {
console.log(name);
callback();
}
sayhello("first", function () {
sayhello("second", function () {
sayhello("third", function () {
console.log("end");
});
});
});
// first second third end
比如当第一个ajax获取到的id需要作为第二个ajax的请求参数使用这样也会形成回调地狱。
为了解决回调地狱的恐怖，因此呢，Promise便横空出世。
Promise 是异步编程的一种解决方案，比传统的回调函数更合理，更强大。在ES6中被标准化。
Promise的好处就是链式调用（chaining）
Promise的使用
- Promise的状态
Promise的状态表示此时异步执行的状态。Promise一共有三种状态：
- pending:初始状态
- fulfilled:操作成功状态
- rejected:操作失败状态
特点：
Promise三个状态不受外界影响，一旦状态改变，就不会再发生变化，Promise对象的状态改变只有两种可能，从pening变为fulfilled和从pending变为rejected.
- 基本用法
ES6规定，Promise对象是一个构造函数，用来生成Promise实例。
let promise = new Promise((resolve,reject)=>{
//...异步代码
if(/* 异步成功 */){
resolve(value)
}else{
reject(error)
}
})
Promise构造函数接收一个函数作为参数，该函数有两个参数分别为resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。
其中 resolve的作用是将Promise对象的状态从“未完成”变为“成功”（即从pending变为resolved）,在异步操作成功时调用，并将异步操作的结果作为参数传递出去。
reject函数的作用是将Promise对象的状态从“未完成”变为“失败”（即从pending变为rejected），在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。
var flag = false;
var p = new Promise((resolve,reject)=>{
if(flag){
resolve(1)
}else{
reject(2)
}
})
p.then((val)=>{
console.log(val,'then')
}).catch((val)=>{
console.log(val,'catch') //2 "catch"
})
上述代码以flag模拟异步结果成功或失败，当成功时（flag为true），调用resolve并将结果1作为参数传递出去，Promise的实例化p调用Promise原型上的方法then。
then方法包含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当Promise状态为rejected时，调用 then 的 onrejected 方法，默认一般都只写一个参数。
当执行resolve时可以在then的函数参数中接收从resolve中传递过来的参数
当执行reject时可以在catch的函数参数中接收从reject中传递的参数。
由于Promise.prototype.then(onFulfilled, onRejected)和Promise.prototype.catch(onRejected)都会返回一个新的Promise对象，所以可以实现链式调用。
比如：用Promise实现两个数相加，再拿两个相加的数的结果减去一个数
function Add(a,b){
return new Promise((resolve,reject)=>{
resolve(a+b)
})
}
function Min(c){
return new Promise((resolve,reject)=>{
resolve(c-1)
})
}
Add(1,2).then((val)=>{
return Min(val)
})
.then((val)=>{
console.log(val)
})
以上可以很直观的看出Promise的链式调用。
Promise原型上还有一个常用方法叫finally.
var flag = false;
var p = new Promise((resolve,reject)=>{
if(flag){
resolve(1)
}else{
reject(2)
}
})
p.then((val)=>{
console.log(val,'then')
}).catch((val)=>{
console.log(val,'catch')
}).finally(()=>{
console.log(12345)
})
finally方法接收一个参数是一个函数，该函数无参数，该方法表示无论最终Promise对象执行resolve还是reject. finally都会执行，它表示Promise对象执行结束了。
- Promise 方法
Promise.all(iterable)
const p = Promise.all([p1,p2,p3])
let p1 = new Promise((resolve,reject)=>{
resolve(1)
})
let p2 = new Promise((resolve,reject)=>{
resolve(2)
})
let p3 = new Promise((resolve,reject)=>{
resolve(3)
})
Promise.all([p1,p2,p3]).then((val)=>{
console.log(val) //[1,2,3]
})
Promise.all()方法接收一个数组作为参数，参数也可以不是数组，但必须具有迭代器接口，且返回的每个成员都是Promise实例。
p的状态有p1,p2,p3决定，分成两种情况，
（1）当p1,p2,p3的状态都为fulfilled，p的状态才会变成fulfilled，此时p1,p2,p3的返回值组成一个数组，传递给p的then方法第一个函数参数的参数。
（2）当p1,p2,p3中有一个被rejected,p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的catch方法函数参数的参数。
如下：
let p1 = new Promise((resolve,reject)=>{
resolve(1)
})
let p2 = new Promise((resolve,reject)=>{
reject(2)
})
let p3 = new Promise((resolve,reject)=>{
resolve(3)
})
Promise.all([p1,p2,p3]).then((val)=>{
console.log(val)
}).catch((err)=>{
console.log(err) //2
})
总结：只有Promise.all()中所有的参数状态都是fulfilled，p的状态即为成功，当其中有一个rejected，p的状态即为失败。
Promise.race()
Promise.race(iterable)
Promise.race()方法同样将多个Promise实例包装成一个新的Promise实例，当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。
let p1 = new Promise((resolve,reject)=>{
resolve(1)
})
let p2 = new Promise((resolve,reject)=>{
resolve(2)
})
let p3 = new Promise((resolve,reject)=>{
resolve(3)
})
Promise.race([p1,p2,p3]).then((val)=>{
console.log(val) //1
}).catch((err)=>{
console.log(err)
})
由于p1排在第一个因此率先执行，所以当p1执行完成之后就直接停止执行p2,p3。
总结：race顾名思义比赛，执行最快的那个首先执行被返回，此时Promise状态已被确定。
Promise.allSettled()
Promise.allSettled(iterable);
类似于Promise.all()方法接受一个可迭代对象。不同的是它将所有的执行结果都会返回回来，不会像Promise.all()一样造成短路，成功时，它会返回成功的状态和返回值，失败时，会返回失败状态和失败原因。也就是说，当每个Promise执行完成之后不管成功与否都会拿到最终的所有结果。
let flag = true;
let p = new Promise((resolve, reject)=>{
if(!flag){resolve('p')}else{reject('err')}
})
let p1 = new Promise((resolve, reject)=>{
if(flag){resolve('p1')}else{reject('err')}
})
let p2 = new Promise((resolve, reject)=>{
if(flag){resolve('p2')}else{reject('err')}
})
Promise.allSettled([p,p1,p2]).then((data)=>{
console.log(data)
})
结果：
0: {status: "rejected", reason: "err"}
1: {status: "fulfilled", value: "p1"}
2: {status: "fulfilled", value: "p2"}
可参考： Promise 中的三兄弟 .all(), .race(), .allSettled()
Promise.resolve(value)
将一个普通的value转换成Promise对象。
返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。
Promise.resolve("foo")
//等价于
new Promise(resolve=>resolve('foo'))
最后再来看一个Promise封装的Ajax：
function getJson(){
return new Promise((resolve,reject)=>{
var xhr = new XMLHttpRequest();
xhr.open(method,url);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
resolve(xhr.responseText)
}
}
})
}
getJson.then((data)=>{
document.getElementById("app").innerHTML = data;
})
面试题：
Promise.all()中有一个异步抛出异常，最先抛出的异常会被.then的第二个参数或者.catch补捕获。并终止程序。并且获取不到Promise.all()其他正常的结果。那么如何获取成功的请求结果呢？
（1）. 在异步请求中定义自己的catch方法，一旦它被rejected,并不会触发Promise.all()的catch方法。
var flag = true;
var p1 = new Promise((resolve,reject)=>{ //p1resolved
if(flag){
resolve("p1")
}else{
reject("p1 err")
}
})
var p2 = new Promise((resolve,reject)=>{ //p2rejected
if(!flag){
resolve("p2")
}else{
reject("p2 err")
}
}).then((data)=>{
console.log(data,'p2 then')
}).catch((data)=>{
console.log(data,'p2 catch') //p2 err p2 catch
})
var p3 = new Promise((resolve,reject)=>{ //p3resolved
if(flag){
resolve("p3")
}else{
reject("p3 err")
}
})
Promise.all([p1,p2,p3]).
then((data)=>{
console.log(data); // ["p1", undefined, "p3"]
})
.catch((data)=>{
console.log(data)
})
上面代码中，p2会rejected,但是p2有自己的catch方法，该方法返回的是一个新的Promise实例，p2实际指向的是这个实例。该实例执行完catch方法后，也会resolved,导致Promise.all()方法参数里面的三个实例都会resolved,因此会调用then方法指定的回调函数，而不会调用catch方法指定的回到函数。
上面代码Promise.all()的then中输出["p1", undefined, "p3"]从中可以获取到执行成功的p1结果，p3结果。
如果p2没有自己的catch方法，那么就会调用Promise.all()的catch方法。
（2）. 在Promise.all()的所有参数中无论resolved还是rejected都执行resolve.
var flag = true;
var p1 = new Promise((resolve,reject)=>{
if(flag){
resolve("p1")
}else{
reject("p1 err")
}
})
var p2 = new Promise((resolve,reject)=>{
if(!flag){
resolve("p2")
}else{
resolve("error")
}
})
var p3 = new Promise((resolve,reject)=>{
if(flag){
resolve("p3")
}else{
reject("p3 err")
}
})
Promise.all([p1,p2,p3]).
then((data)=>{
console.log(data); // ["p1", "error", "p3"]
})
.catch((data)=>{
console.log(data)
})
这个很好理解，在p2中无论成功失败都走resolve，这样就顺理成章的走到了Promise.all()的then中，此时可以获取到所有的结果，从中获取返回正常的结果。
上面代码结果是["p1", "error", "p3"],从中过滤掉失败的就好了。
面试题：利用Promise实现一个Promise.all()方法
思路：将传入数组在Promise实例中遍历执行，将then的结果存入数组，设一个变量来记录调用了几次then，当调用then的次数等于传入数组的length时，那么就在Promise实例的then方法中调用resolve方法，否则就直接将捕获到的错误reject出去。
Promise.myAll = function(arr){
let result = [];
let len = 0;
return new Promise((resolve, reject) => {
arr.forEach((promise) => {
promise.then((res) => {
result.push(res);
len ++;
if(len === arr.length) {
resolve(result);
}
}, (e) => {
reject(e);
})
})
})
}
let a = new Promise((resolve, reject) => {
resolve(1);
});
let b = Promise.resolve(2);
Promise.myAll([a, b]).then((res) => {
console.log(res, 'ok');
}, (err) => {
console.log(err, 'err')
})
参考文章：
MDN Promise
深入理解 ES6 Promise
async/await
async/await和Promise一样目的都是为了异步调用的“扁平化”。async/await是非常好用的语法糖。可以认为是基于Promise的针对异步更优雅的解决方案。
用法：
- async用于申明一个函数是异步的，它的返回值是一个Promise对象。如果在函数中return 一个直接量，async会把这个直接；量通过Promise.resolve()封装成Promise对象。
//在函数前加上async关键字，表明该函数是异步函数
async function testAsync(){
return "async"
}
const result = testAsync();
console.log(result);//Promise {: "async"}
result.then((data)=>{
console.log(data) //async
})
- 配合await
await只能出现在async函数中。
await表示等待。等待异步方法执行结束。
async函数返回一个Promise对象，所以await等待async函数的返回值。也可以等待任意表达式的结果。
例如：
function func(){ //普通函数
return "hello world"
}
async function testAsync(){ //async函数
return Promise.resolve("hello async")
}
async function test(){
const result1 = await func();
const result2 = await testAsync();
console.log(result1,result2)
}
test(); // hello world hello async
await等待的值为一个Promise对象，或者其它值
await 是个运算符，用于组成表达式，await表达式的运算结果取决于它等的东西。
如果它等到的不是一个Promise对象，那await表达式的运算结果就是它等到的东西。
如果它等到的是一个Promise对象，那么await就会阻塞后面代码，等着Promise对象状态改变，比如resolve，然后得到resolve的值，作为await表达式的运算结果。
- async/await 写法与Promise比较
//Promise
function setTime(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("setTime")
},1000)
})
}
setTime().then((data)=>{
console.log(data); // setTime 1s之后会输出
})
//async/await
function setTime(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("setTime")
},1000)
})
}
async function test(){
const result = await setTime(); // 该段代码执行结束之前后面的代码是不会执行的。
console.log(1); // 1 1s之后输出
console.log(result) // setTime 1s之后输出
}
test();
怎么说呢，async/await就是一个语法糖，看起来貌似很难，很高深，其实用起来了也就慢慢熟悉了。感觉async看起来更直观一些吧。
思考题：
async function foo() {
console.log('foo')
}
async function bar() {
console.log('bar start')
await foo()
console.log('bar end')
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
}, 0)
bar();
new Promise(function (resolve) {
console.log('promise executor')
resolve();
}).then(function () {
console.log('promise then')
})
console.log('script end')
参考：
阮一峰 async 函数的含义和用法
理解 JavaScript 的 async/await
展开（spread）运算符和剩余（Rest）运算符
展开运算符用三个点(...)表示，可以将数组转为逗号分隔的参数序列。化少为多。
var arr = [1,2,3]
console.log(...arr); // 1 2 3
可用于数组合并
var arr1 = [1,2,3]
var arr2 = [4,5,6]
var arr3 = [...arr1, ...arr2];
console.log(arr3); //[1,2,3,4,5,6]
可用于对象合并
var obj1 = {a:1,b:2}
var obj2 = {c:3,d:4}
var obj3 = {...obj1,...obj2}
console.log(obj3)//{a:1,b:2,c:3,d:4}
剩余运算符也是用三个点表示（...），剩余运算符会将多余元素收集压缩成一个单一的元素。
可以用来表示形参。
function func(a,...args){
console.log(a); //1
console.log(args); //[2,3,4]
}
func(1,2,3,4);
解构赋值：
const [num,...other] = [1,2,3,4,5];
console.log(num);// 1
console.log(other); [2,3,4,5]
纯函数
定义：一个函数的返回结果只依赖他的参数，并且在执行过程中没有副作用，我们就把这个函数叫做纯函数。
由定义可知纯函数有两个重要点：
- 函数的返回结果只依赖它的参数
- 函数执行过程中没有副作用
var a = 1;
function foo (b){
return a+b
}
foo(2) // 3
foo函数不是一个纯函数，因为它返回的结果依赖外部变量a，我们在不知道a的值得情况下，并不能保证foo(2)的返回值是3。虽然foo函数的代码实现并没有变化，传入的参数并没有变化，但他的返回值却是不可预料的，因为函数依赖的外部值a是不可预料的，它是1，也可能在函数foo执行之前在其他逻辑中被修改。
修改一下函数foo的逻辑：
var a = 1;
function foo (x,b){
return x+b
}
foo(1,2) // 3
现在foo的返回结果只依赖于它的参数x和b，foo(1,2)的返回结果永远是3，不管外部代码怎么变化，foo(1,2)永远是3。只要foo代码不改变，只要foo代码不改变，你传入的参数是确定的，那么foo(1,2)的值永远是可预料的。
这就是纯函数的第一个条件，一个函数的返回结果只依赖于它的参数。
再来看看第二个特点，函数执行过程没有副作用。
一个函数执行过程中对函数外部产生了可观察的变化，那么就说这个函数是有副作用的。
var a = 1;
var obj = {x:2}
function foo (obj,b){
obj.x = b
return obj.x+b
}
foo(obj ,3) // 6
obj // {x:3}
对象obj的属性x默认为2，foo执行后obj.x成为了foo函数的第二个参数，因此obj最终由{x:2}变为了{x:3},因此foo函数的执行对外部的obj产生了影响，它产生了副作用，因为它修改了外部传进来的对象，因此现在它不是一个纯函数。
function foo(b){
const obj = {x:1}
obj.x = 2;
return obj.x + b
}
以上函数foo虽然内部修改了变量obj，但obj是内部变量，外部程序观察不到，修改obj并不会产生外部可观察变化，这个函数没有副作用，因此它是一个纯函数。
除了修改外部的变量，一个函数在执行过程中还有很多方式产生外部可观察的变化，比如说调用DOM API修改页面，或者发送Ajax请求，调用BOM API等，甚至使用console.log()往控制台打印数据也是副作用。
纯函数很严格，除了计算数据以外什么都不能干，计算的时候还不能依赖除了函数参数以外的数据。
总结：一个函数的返回结果只依赖于他的参数，并且在执行过程中没有副作用，那么我们就称这个函数为纯函数。
纯函数的好处就是它非常靠谱，执行一个纯函数，它的执行结果一般都是在你的预料之中，不必担心一个纯函数会干什么坏事，他不会产生不可预料的行为，也不会对外部产生影响，不管何时何地，你给它什么，它就吐出什么。
纯函数也是函数式编程的一个很重要的概念，很多类库，框架也都有使用到，比如redux，react高阶组件因此需要了解其概念。
严格模式
使用："use strict",可以在整个代码块前加“use strict”使用，也可以只在函数中局部添加“use strict”去使用。
特点：
- 变量必须声明才可使用。
- 创设eval作用域，除了全局作用域，函数作用域外，新增eval作用域。
- with()被禁用,with语句用于设置代码在特定对象中的作用域。
- caller/callee被禁用。
- delete使用在var 声明的变量活挂在window的变量上会报错。
- delete不可删除属性的对象时会报错。
- 对一个对象的只读属性进行赋值会报错。
- 对象有重名属性将报错。
- 函数有重名的参数会报错。
- arguments严格定义为参数，不再与形参绑定。
- 函数中的this不再指向window。
参考：
阮一峰 - Javascript 严格模式详解
高阶函数
什么是高阶函数：
- 如果一个函数的参数是一个函数（回调函数）
- 如果一个函数的返回值是一个函数，当前这个函数也是一个高阶函数
应用场景：扩展业务代码
function Eat(a,b){ //核心业务代码
console.log(a,b)
}
Function.prototype.before = function(callback){ //高阶函数
return (...args)=>{ //使用rest运算符接收
callback();
this(...args); //使用展开运算符传入
}
}
let beforeEat = Eat.before(function(){ //自己扩展业务代码
console.log("before eat")
})
beforeEat("666","999") //传参
函数柯里化
例子：判断数据类型
- typeof 不能判断对象类型
- constructor 判断该数据是由谁构造出来
- instanceof 判断谁是谁的实例proto
- Object.prototype.toString.call() 缺陷不能细分谁是谁的实例
function isType(value,type){
return Object.prototype.toString.call(value) === `[object ${type}]`
}
//调用
isType([],"Array") // 判断数据 [] 的类型是否似乎数组
isType("","Array") // 判断数据 "" 的类型是否是数组
上述实现有缺陷，就是每次判断数据时都需要重复去指定type类型。
接下来就是一个函数柯里化的简单应用
function isType(type){
return function(value){
return Object.prototype.toString.call(value) === `[object ${type}]`
}
}
const isArray = isType("Array");
const isString = isType("String");
console.log(isArray([])); //true
console.log(isArray("")); //false
console.log(isString("")); //true
//相当于就是这么写
isType("Array")([])
这样是不是比较高大上呢 !!!
那现在来自己封装一个可以实现柯里化函数的方法
首先分析一下，举个例子，看下面代码
function add(a,b,c,d){
return a+b+c+d
}
假如我们定义了一个函数Curry这个函数可以将普通函数转变成柯里化函数。
正常调用add(1,2,3,4)，用柯里化的方式应该是这样的Curry(add)(1)(2)(3)(4)
通过我们自己封装的柯里化函数的方法，将原函数传进去之后就可以化多参为单参，然后依次去调用
那么Curry的返回值肯定是个函数，就像这样
function Curry(){
return function(){
//逻辑
}
}
我们需要将我们的目标函数传入Curry中
function Curry(fn){ // fn表示就是add函数
return function(...args){ // args 表示调用之后传入的参数 就像1,2,3,4
}
}
这样整体逻辑了解了，函数的参数是依次传进来的，我们需要在所有参数传递进来之后再去执行函数并返回结果，那么就需要对参数个数进行判断。这里有一个方法需要了解一下，那就是函数的length属性，比如
function fn(){}
console.log(fn.length) // 0
function fn1(a,b){}
console.log(fn1.length) //2
函数的length属性表示“第一个具有默认值之前的参数个数” 具体可以参考文章 《JS 中函数的 length 属性》
回到分析中，我们需要知道当函数接收的参数个数等于函数的形参个数时，才可以进行执行并返回结果，否则，继续递归进行函数柯里化。
function Curry(fn,arr = []){ // fn表示就是add函数
let len = fn.length // 获取函数fn的形参个数
let argsArr = [] // 用一个数组将fn的参数存起来
return function(...args){ // args 表示调用之后传入的参数 就像1,2,3,4
argsArr = [...arr,...args]
if(argsArr.length < len){ // 当传入参数length小于len时递归柯里化函数
return Curry(fn,argsArr)
}else{ // 当传入参数length等于len时直接执行函数
return fn(...argsArr)
}
}
}
注意点：每次进行递归时，需要将参数携带着，在Curry中接收，然后每次进行拼接。这里大量使用了ES6展开运算符和REST剩余运算符，如果阅读困难，可以查看前文关于展开运算符和剩余运算符。
关于ES6 Class
ES6和ES5继承区别：
ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
ES6的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
关于super关键字
class Parent{
constructor(x,y){
this.x = x;
this.y = y;
}
parentY(){
return 12
}
}
class Child extends Parent {
constructor(x,y){
super(x,y)
}
sayParams(){
console.log(this.x, super.parentY()) // 1，12
}
}
new Child(1,2).sayParams()
super关键字即可以当函数使用，也可以当对象使用。如上代码
super当函数调用时代表父类的构造函数，ES6要求，子类的构造函数必须执行一次super函数。
super作为对象使用时指向父类的原型对象。（由于super指向的时父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的，比如在上面方法sayParams中访问super.y那么就访问不到）
Class的静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为"静态方法"。
class Foo{
static sayName(){
console.log("name")
}
}
Foo.sayName() // name
new Foo().sayName() // 报错 syaName is not a function
父类的静态方法可以被子类继承
class Foo{
static sayName(){
console.log("name")
}
}
class Child extends Foo{
}
Child.sayName() // name
Class的静态属性和实例属性
静态属性指的是Class本身的属性，即Class.propname，而不是定义在实例对象（this）上的属性。
class Foo{}
Foo.prop = 1
以上代码中prop是类Foo的静态属性。采用直接赋值的形式。还可以这样写：
class Foo{
static prop = 2
}
Foo.prop // 2
new Foo().prop // undefined
直接在类中进行赋值，并在前加上static关键字。
实例属性就是可以通过new操作符对类实例之后访问的属性,可以用等式直接写入类的定义中
class Foo{
prop = 12
}
new Foo().prop // 12
Foo.prop // undefined
以前定义实例属性只能写在类的constructor方法里面，有了新的写法之后，就可以不写在constructor中了。
参考：http://caibaojian.com/es6/class.html
手写一个函数实现new的功能
首先我们需要明白new干了什么事情，new一个函数之后，返回了一个对象，该对象能够访问函数的原型。
function myNew(func, ...args){
if(typeof func !== 'function'){
return;
}
let obj = {};
func.call(obj, ...args); // 核心，改变this指向
obj.__proto__ = func.prototype; // 改变原型，让obj可以访问func的原型
return obj;
}
手写一个instanceof.
instanceof主要是判断一个对象是否是某个类的实例。
换句话说就是判断某个对象的原型链上有没有某个某个类的prototype
function isInstance(ins, target){
if(!ins || !target || !ins.__proto__ || !target.prototype){
return false;
}
let current = ins.__proto__;
while(current){
if(current === target.prototype){
return true;
}
current = current.__proto__;
}
return false;
}
使用setTimeout模拟setInteval
let timer = null;
function simulation(func, wait) {
let intval = function () {
func();
timer = setTimeout(intval, wait);
}
timer = setTimeout(intval, wait);
}
simulation(function() {
console.log(1);
}, 1000);
clearTimeout(timer);
参考：https://mp.weixin.qq.com/s/vYHSqv_6ttWLK4qdSS6V1w
待续......
写在最后：文中内容大多为自己平时从各种途径学习总结，文中参考文章大多收录在我的个人博客里，欢迎阅览http://www.tianleilei.cn