Web前端

发布日期: 2022-07-19

更新日期: 2022-08-25

文章字数: 6.2k

阅读时长: 24 分

面向对象

在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象

创建类

语法:

//步骤1 使用class关键字
class name {
  // class body
}     
//步骤2使用定义的类创建实例  注意new关键字
var xx = new name();

类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象

constructor 函数只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数

多个函数方法之间不需要添加逗号分隔

生成实例 new 不能省略

语法规范, 创建类类名后面不要加小括号,生成实例类名后面加小括号, 构造函数不需要加function

类创建添加属性和方法

代码样例

<script>
    class Student{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        score(score){
            console.log(this.name+'考'+score);
        }
    }
    var xiaoming = new Student('小明',18);
    console.log(xiaoming);
    xiaoming.score(100);
</script>

类的继承

语法

// 父类
class Father{   
} 

// 子类继承父类
class  Son  extends Father {  
}

时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用

constructor中的this指向的是new出来的实例对象

自定义的方法,一般也指向的new出来的实例对象

绑定事件之后this指向的就是触发事件的事件源

子类使用super关键字访问父类的方法

代码示例

<script>
    class Father{
        constructor(x,y){ 
            this.x = x;
            this.y = y; 
        }
        sum(){
            console.log(this.x + this.y);
        }
    }
    class Child extends Father{
        constructor(x,y){
            super(x,y);
            this.x = x;
            this.y = y; 
        }
        substract(){
            console.log(this.x - this.y);
        }
    }
    var test = new Child(10,30);
    test.substract();
    test.sum(); 
</script>

继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的

继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)

如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用父类的构造函数,super 必须在子类this之前调用

构造函数和原型

实例成员

实例成员就是构造函数内部通过this添加的成员，实例成员只能通过实例化的对象来访问

静态成员

静态成员在构造函数本身上添加的成员，静态成员只能通过构造函数来访问

构造函数原型prototype

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

代码实例

<script>
    function Student(name, score) { 
        this.name = name;
        this.score = score; 
    }
    Student.prototype.print = function(){
        console.log("打印成绩中。。。。");
    }
    var xiaoming = new Student("小明", 100);
    xiaoming.print();
</script>

对象原型

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。
__proto__对象原型和原型对象 prototype 是等价的
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

constructor构造函数

对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性，constructor 我们称为构造函数，因为它指回构造函数本身。
constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。
一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的利用constructor指回原来的构造函数如

 function Star(uname, age) {
     this.uname = uname;
     this.age = age;
 }
 // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
 Star.prototype = {
 // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
   constructor: Star, // 手动设置指回原来的构造函数
   sing: function() {
     console.log('唱歌');
   },
   movie: function() {
     console.log('演电影');
   }
}
var xiaoming = new Star('小明', 19);
console.log(xiaoming)

在控制台即可看到constructor的属性，而相反constructor就没有此属性

原型链

每一个实例对象又有一个__proto__属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有__proto__属性，这样一层一层往上找就形成了原型链。

构造函数实例和原型对象三角关系

1.构造函数的prototype属性指向了构造函数原型对象
2.实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象
3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数

原型链和成员的查找机制

任何对象都有原型对象,也就是prototype属性,任何原型对象也是一个对象,该对象就有__proto__属性,这样一层一层往上找,就形成了一条链,我们称此为原型链;

当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。
如果还没有就查找原型对象的原型（Object的原型对象）。
依此类推一直找到 Object 为止（null）。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

原型对象中this指向

构造函数中的this和原型对象的this,都指向我们new出来的实例对象

通过原型为数组扩展内置方法

演示代码

Array.prototype.sum = function() {
  var sum = 0;
  for (var i = 0; i < this.length; i++) {
  sum += this[i];
  }
  return sum;
};
//此时数组对象中已经存在sum()方法了  可以始终 数组.sum()进行数据的求

继承

call()

call()可以调用函数
call()可以修改this的指向,使用call()的时候参数一是修改后的this指向,参数2,参数3..使用逗号隔开连接

子构造函数继承父构造函数中的属性

先定义一个父构造函数
再定义一个子构造函数
子构造函数继承父构造函数的属性(使用call方法)

代码实例

<script>
    function Father(uname, age){
        this.uname = uname; 
        this.age = age; 
    }
    function Son(uname, age, score){
        Father.call(this, uname, age, score);
        this.score = score;   
    }
    var son = new Son("小明", 18, 100);
    console.log(son);   
</script>

借用原型对象继承方法

先定义一个父构造函数
再定义一个子构造函数
子构造函数继承父构造函数的属性(使用call方法)

代码实例

<script>
    function Father(uname, age){
        this.uname = uname; 
        this.age = age; 
    }
    Father.prototype.money = function(){
        console.log("10000万现金");
    }
    function Son(uname, age, score){
        Father.call(this, uname, age, score);
        this.score = score;   
    }
    Son.prototype = new Father();
    Son.prototype.constructor = Son;
    Son.prototype.exam = function(){
        console.log("孩子要考试");
    }
    var son = new Son("小明", 18, 100);
    console.log(son);   
</script>

结果如下图

ES5新增方法

数组方法forEach遍历数组

arr.forEach(function(value, index, array) {
      //参数一是:数组元素
      //参数二是:数组元素的索引
      //参数三是:当前的数组
})
 //相当于数组遍历的 for循环 没有返回值

数组方法filter过滤数组

var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index,array) {
	 //参数一是:数组元素
   //参数二是:数组元素的索引
   //参数三是:当前的数组
   return value >= 20;
});
console.log(newArr);//[66,88] //返回值是一个新数组

数组方法some

some 查找数组中是否有满足条件的元素 
 var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
    //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value < 3;
  });
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

这两种方法商品页面，可以用for each遍历数据渲染到页面中，根据商品的价格属性筛选商品

代码实例

data.forEach(function(value) {
  var tr = document.createElement('tr');
  tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
  tbody.appendChild(tr);
 });

search_price.addEventListener('click', function() {
     var newDate = data.filter(function(value) {
     return value.price >= start.value && value.price <= end.value;
     });

some和forEach区别

如果查询数组中唯一的元素, 用some方法更合适,在some 里面遇到 return true 就是终止遍历迭代效率更高
在forEach 里面 return 不会终止迭代

trim方法去除字符串两端的空格

var str = '   hello   '
console.log(str.trim()）  //hello 去除两端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除两端空格

获取对象的属性名

Object.keys(对象) 获取到当前对象中的属性名，返回值是一个数组

 var obj = {
     id: 1,
     pname: '小米',
     price: 1999,
     num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id，pname,price,num]

Object.defineProperty

Object.defineProperty设置或修改对象中的属性

Object.defineProperty(对象，修改或新增的属性名，{
		value:修改或新增的属性的值,
		writable:true/false,//如果值为false 不允许修改这个属性值
		enumerable: false,//enumerable 如果值为false 则不允许遍历
        configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})

函数的定义和调用

函数的定义方式

方式1 函数声明方式 function 关键字 (命名函数)

function fn(){}

方式2 函数表达式(匿名函数)

var fn = function(){}

方式3 new Function()

var f = new Function('a', 'b', 'console.log(a + b)');
f(1, 2);

var fn = new Function('参数1','参数2'..., '函数体')
注意
/*Function 里面参数都必须是字符串格式
第三种方式执行效率低，也不方便书写，因此较少使用
所有函数都是 Function 的实例(对象)  
函数也属于对象
*/

this

函数内部的this指向

这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同，一般指向调用者

改变函数内部 this 指向

call方法

call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向

代码实例

var o = {
	name: 'andy'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn(1,2)// 此时的this指向的是window 运行结果为3
fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3

apply方法

apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

代码示例

var o = {
	name: 'andy'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn()// 此时的this指向的是window 运行结果为3
fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3

bind方法

bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数

如果只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind

 var o = {
 name: 'andy'
 };

function fn(a, b) {
	console.log(this);
	console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
f();//调用新函数  this指向的是对象o 参数使用逗号隔开

call、apply、bind三者的异同

共同点 : 都可以改变this指向
不同点:
- call 和 apply 会调用函数, 并且改变函数内部this指向.
- call 和 apply传递的参数不一样，call传递参数使用逗号隔开，apply使用数组传递
- bind 不会调用函数, 可以改变函数内部this指向.
应用场景
1. call 经常做继承.
2. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

严格模式

JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。

严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。

严格模式对正常的 JavaScript 语义做了一些更改：

消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
消除代码运行的一些不安全之处，保证代码运行的安全。
提高编译器效率，增加运行速度。
禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class,enum,export, extends, import, super 不能做变量名

开启严格模式

严格模式可以应用到整个脚本或个别函数中。因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。

情况一 :为脚本开启严格模式

有的 script 脚本是严格模式，有的 script 脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他
script 脚本文件。

(function (){
  //在当前的这个自调用函数中有开启严格模式，当前函数之外还是普通模式
　　　　"use strict";
       var num = 10;
　　　　function fn() {}
})();
//或者 
<script>
  　"use strict"; //当前script标签开启了严格模式
</script>
<script>
  			//当前script标签未开启严格模式
</script>

情况二: 为函数开启严格模式
- 要给某个函数开启严格模式，需要把“use strict”; (或 ‘use strict’; ) 声明放在函数体所有语句之前。
```
function fn(){
　　"use strict";
　　return "123";
} 
//当前fn函数开启了严格模式
```

高阶函数

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。

闭包

闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。

代码示例

 function fn() {
   var num = 10;
   function fun() {
       console.log(num);
 	}
    return fun;
 }
var f = fn();
f();

案例：计算打车价格

/*需求分析
打车起步价16(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
如果有拥堵情况,总价格多收取10块钱拥堵费*/

 var car = (function() {
     var start = 16; // 起步价  局部变量
     var total = 0; // 总价  局部变量
     return {
       // 正常的总价
       price: function(n) {
         if (n <= 3) {
           total = start;
         } else {
           total = start + (n - 3) * 5
         }
         return total;
       },
       // 拥堵之后的费用
       yd: function(flag) {
         return flag ? total + 10 : total;
       }
	}
 })();
console.log(car.price(5)); 
console.log(car.yd(true));

Promise对象

Promise 是一个对象，它代表了一个异步操作的最终完成或者失败。本质上 Promise 是一个函数返回的对象，我们可以在它上面绑定回调函数，这样我们就不需要在一开始把回调函数作为参数传入这个函数了。

例如：有一个名为 createAudioFileAsync() 的函数，它接收一些配置和两个回调函数，然后异步地生成音频文件。一个回调函数在文件成功创建时被调用，另一个则在出现异常时被调用。

// 成功的回调函数
function successCallback(result) {
  console.log("音频文件创建成功: " + result);
}

// 失败的回调函数
function failureCallback(error) {
  console.log("音频文件创建失败: " + error);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback)

等同于

const promise = createAudioFileAsync(audioSettings);
promise.then(successCallback, failureCallback);

优雅的写法

链式调用

连续执行两个或者多个异步操作是一个常见的需求，在上一个操作执行成功之后，开始下一个的操作，并带着上一步操作所返回的结果。我们可以通过创造一个 Promise 链来实现这种需求。

但是，then() 函数会返回一个和原来不同的新的 Promise：

const promise2 = doSomething().then(successCallback, failureCallback);

promise2 不仅表示 doSomething() 函数的完成，也代表了你传入的 successCallback 或者 failureCallback 的完成，这两个函数也可以返回一个 Promise 对象，从而形成另一个异步操作，这样的话，在 promise2 上新增的回调函数会排在这个 Promise 对象的后面。这也可以完美避免了回调地狱

错误传递

一遇到异常抛出，浏览器就会顺着 Promise 链寻找下一个 onRejected 失败回调函数或者由 .catch() 指定的回调函数。

doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => console.log(`Got the final result: ${finalResult}`))
.catch(failureCallback);

与以下代码很相似

try {
  let result = syncDoSomething();
  let newResult = syncDoSomethingElse(result);
  let finalResult = syncDoThirdThing(newResult);
  console.log(`Got the final result: ${finalResult}`);
} catch(error) {
  failureCallback(error);
}

JavaScript中的同步与异步

由于js是单线程的,换句话说,就是,在同一段时间内,只能处理一个任务,干一件事情,然后再去处理下一个任务,浏览器解析网页中的js代码,是逐行进行读取,从上至下执行的。

JavaScript之所以设计为单线程,这与它的用途有关。它作为浏览器脚本语言，主要用途是负责与页面的交互，以及操作DOM(添加,删除等)。

单线程中有一些任务需要耗费一些时间,让用户去等待确认,把一些耗时的事情任务通过新开的线程方式来实现,浏览器会针对对于那些耗时间的任务,会开一些新的进程单独去处理

比如说:通过回调,事件的方式去通知我们的主线程,然后把Ajax等异步处理要做的事情,再推到主线程当中进行执行

setTimeout
setInterval
ajax
…这些任务均为异步任务

js单线程又是如何实现异步

是通过事件循环(event loop)实现异步的。虽然JS是单线程的,但是浏览器的内核却是多线程的,在浏览器的内核中不同的异步操作由不同的浏览器内核模块调度执行,异步任务操作会将相关回调添加到任务队列中。浏览器内核上包含3种 webAPI,分别是 DOM Binding(DOM绑定)、network(网络请求)、timer(定时器)模块。

JS的执行机制是

首先判断js代码是同步还是异步,不停的检查调用栈中是否有任务需要执行,如果没有,就检查任务队列,从中弹出一个任务,放入栈中,如此往复循环,要是同步就进入主进程,异步就进入事件表
异步任务在事件表中注册函数,当满足触发条件后,被推入事件队列
同步任务进入主线程后一直执行,直到主线程空闲时,才会去事件队列中查看是否有可执行的异步任务,如果有就推入主进程中

处理异步问题

显然异步代码是我们常用的一种方式,也是比较复杂的,而在js中处理异步,也就诞生出了很多的工具处理异步问题

例如:回调函数（异步执行或稍后执行的函数,也可以理解为将一个函数的参数作为另一个函数的名字,那么这个参数就叫做回调函数），使用Es6中的promise，Es7中的async await

例如：读取文件

var fs = require('fs');
var myNumber = undefined;
function addOne(callback){
   fs.readFile('number.txt', function doneReading(err, fileContents){
       myNumber = parseInt(fileContents);
       myNumber++;
       callback();
  })
}
function logMyNumber(){
   console.log(myNumber);
}
addOne(logMyNumber)

上面的logMyNumber函数作为addOne函数的实参传入进去,而在addOne函数声明处,用callback参数变量进行接收,并在addOne函数内进行调用执行(callback()),类似这种将一个函数作为参数传递被另一个函数调用执行的,这样的函数就称为回调函数。

await和async

async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

async 函数返回的是一个 Promise 对象。async 函数（包含函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象。如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

Promise.resolve(x) 可以看作是 new Promise(resolve => resolve(x)) 的简写，可以用于快速封装字面量对象或其他对象，将其封装成 Promise 实例。

联想一下 Promise 的特点——无等待，所以在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且，绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数并无二致。

async 函数返回的是一个 Promise 对象，所以在最外层不能用 await 获取其返回值的情况下，我们当然应该用原来的方式：then() 链来处理这个 Promise 对象

await 到底在等啥

await 等待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值（换句话说，就是没有特殊限定）。

因为 async 函数返回一个 Promise 对象，所以 await 可以用于等待一个 async 函数的返回值——这也可以说是 await 在等 async 函数，但要清楚，它等的实际是一个返回值。注意到 await 不仅仅用于等 Promise 对象，它可以等任意表达式的结果，所以，await 后面实际是可以接普通函数调用或者直接量的。

如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。

如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

所以，async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。

promise 与 await/async相比的优势

async/await 的优势在于处理 then 链

例如以下代码：

function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}
function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(m, n) {
    console.log(`step2 with ${m} and ${n}`);
    return takeLongTime(m + n);
}

function step3(k, m, n) {
    console.log(`step3 with ${k}, ${m} and ${n}`);
    return takeLongTime(k + m + n);
}

用 await/async写

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time1, time2);
    const result = await step3(time1, time2, time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}

doIt();

而用 promise 写很复杂

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => {
            return step2(time1, time2)
                .then(time3 => [time1, time2, time3]);
        })
        .then(times => {
            const [time1, time2, time3] = times;
            return step3(time1, time2, time3);
        })
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

小小星仔

https://deades-coder.github.io/2022/07/19/js-jin-jie/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源小小星仔 !

IMF靶机

IMF靶场

2022-07-22 渗透测试

渗透测试靶场练习

GlasgowSmile靶机

GlasgowSmile靶场

2022-05-09 渗透测试

渗透测试靶场练习

JS进阶

面向对象

创建类

类创建添加属性和方法

类的继承

构造函数和原型

实例成员

静态成员

构造函数原型prototype

对象原型

constructor构造函数

原型链

构造函数实例和原型对象三角关系

原型链和成员的查找机制

原型对象中this指向

通过原型为数组扩展内置方法

继承

call()

子构造函数继承父构造函数中的属性

借用原型对象继承方法

ES5新增方法

数组方法forEach遍历数组

数组方法filter过滤数组

数组方法some

some和forEach区别

trim方法去除字符串两端的空格

获取对象的属性名

Object.defineProperty

函数的定义和调用

函数的定义方式

this

函数内部的this指向

改变函数内部 this 指向

call方法

apply方法

bind方法

call、apply、bind三者的异同

严格模式

开启严格模式

高阶函数

闭包

案例：计算打车价格

Promise对象

链式调用

错误传递

JavaScript中的同步与异步

js单线程又是如何实现异步

处理异步问题

await和async

await 到底在等啥

promise 与 await/async相比的优势