本文概述了JavaScript的ES6模块化、面向对象编程基础，包括类与对象、继承、模块化导入导出，以及如何利用模块化提升代码组织与复用，通过实例演示了模块化和类的实战应用，介绍了作用域和垃圾回收机制，有助于理解和实践现代JavaScript开发
| 内容 | 链接 |
|---|---|
| day1 基础知识大总结（JS使用、变量、数据运算、数组、函数、作用域） | 链接 |
| day2 对象 | 链接 |
| day3 进阶API之DOM技术 | 链接 |
| day4 进阶API之BOM技术 | 链接 |
| day5 提高之面向对象ES6 | 链接 |
1. 面向对象导读
- 面向过程POP就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
- 面向对象OOP是把事务分解成为一个个对象，然后由对象之间分工与合作。面向对象更贴近我们的实际生活, 可以使用面向对象描述现实世界事物. 但是事物分为具体的事物和抽象的事物
面向对象的思维特点：
- 抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板)
- 对类进行实例化, 获取类的对象
两者比较:
- 面向过程
优点：性能比面向对象高，适合跟硬件联系很紧密的东西,
缺点：不易维护、不易复用、不易扩展。 - 面向对象
优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护，
缺点：性能比面向过程低。
举个栗子：将大象装进冰箱，面向对象做法:先找出对象，并写出这些对象的功能
- 大象对象 进去
- 冰箱对象 打开 关闭
- 使用大象和冰箱的功能
1.1 ES6模块化
node.js 遵循了 CommonJS 的模块化规范。其中：
- 导入其它模块使用 require() 方法
- 模块对外共享成员使用 module.exports 对象
模块化的好处：大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己。
在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：
- AMD 和 CMD 适用于浏览器端的 Javascript 模块化
- CommonJS 适用于服务器端的 Javascript 模块化
太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，大一统的 ES6 模块化规范诞生了！
1.1.1 什么是 ES6 模块化规范
ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。ES6 模块化规范中定义：
- 每个 js 文件都是一个独立的模块
- 导入其它模块成员使用 import 关键字
- 向外共享模块成员使用 export 关键字
- 模块还依赖于
<script> 标签中的 type="module"。
1.1.2 node.js 中体验 ES6 模块化
在 node.js 中体验 ES6 模块化，node.js 中默认仅支持 CommonJS 模块化规范，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照如下两个步骤进行配置：
① 确保安装了 v14.15.1 或更高版本的 node.js node -version
② 在 package.json 的根节点中添加 “type”: “module” 节点，初始化package.json的命令npm init -y 默认common.js
1.2 ES6 模块化的基本语法
ES6 的模块化主要包含如下 3 种用法：
① 默认导出与默认导入
② 按需导出与按需导入
③ 直接导入并执行模块中的代码
1.2.1 默认导出与默认导入
- 默认导出的语法： export default 默认导出的成员，每个模块中，只允许使用唯一的一次 export default，否则会报错！
// 01 默认导出.js
let n1 = 10
let n2 = 20
function show() {}
export default {
n1
}
- 默认导入的语法： import 接收名称 from ‘模块标识符’，默认导入时的接收名称可以任意名称，只要是合法的成员名称即可：
// 02 默认导入.js
import m1 from './01 默认导出.js'
console.log(m1)
命令行中输入 node 02 默认导入.js
1.2.2 按需导出与按需导入
- 按需导出的语法： export 按需导出的成员
export let s1 = 'aaa'
export let s2 = 'ccc'
- 按需导入的语法： import { s1 } from ‘模块标识符’
import info, { s1,s2 as str2 } from './03.按需导出.js'
console.log(s1)
console.log(str2)
- 按需导出与按需导入的注意事项
① 每个模块中可以使用多次按需导出
② 按需导入的成员名称必须和按需导出的名称保持一致
③ 按需导入时，可以使用 as 关键字进行重命名
④ 按需导入可以和默认导入一起使用
1.2.3 直接导入并执行模块中的代码
如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，示例代码如下：
// 05.直接运行模块中的代码.js
for (let i = 0; i < 3; i++) {
console.log(i)
}
// 06.test.js
import './05.直接运行模块中的代码.js'
1.3 ES6中的类和对象
1.3.1 对象
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，—个数据库、一张网页、一个与远程服务器的连接也可以是“对象”.
- 属性：事物的特征，在对象中用属性来表示
- 方法：事物的行为，在对象中用方法来表示
1.3.2 类
在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。
- 类抽象了对象的公共部分，它泛指某一大类（class）
- 对象特指某一个，通过类实例化一个具体的对象
1.3.2.1 创建类
class name {
// class body
}
创建实例：
var XX = new name();
// 注意：类必须使用new 实例化对象
1.3.2.2 constructor() 构造函数
constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过 new 命令生成对象实例时，自动调用该方法。如果没有显示定义, 类内部会自动给我们创建一个constructor()
<script>
// 1. 创建类 class 创建一个 明星类
class Star {
// constructor 构造器或者构造函数
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
}
// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
</script>
- 通过 class 关键字创建类，类名我们还是习惯性定义首字母大写
- 类里面有个 constructor函数，可以接收传递过来的参数，同时返回实例对象
- constructor函数只要 new 生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
- 最后注意语法规范
- 创建类➡类名后面不要加小括号
- 生成实例➡类名后面加小括号
- 构造函数不需要加 function 关键字
1.3.2.3 类中添加方法
语法：
class Person {
constructor(name,age) {
// constructor 称为构造器或者构造函数
this.name = name;
this.age = age;
}
say() {
console.log(this.name + '你好');
}
}
var ldh = new Person('刘德华', 18);
ldh.say()
注意： 方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。
<script>
// 1. 创建类 class 创建一个 明星类
class Star {
// 类的共有属性放到 constructor 里面
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
sing(song) {
console.log(this.uname + song);
}
}
// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
// (1) 我们类里面所有的函数不需要写function
// (2) 多个函数方法之间不需要添加逗号分隔
ldh.sing('冰雨');
zxy.sing('李香兰');
</script>
- 类的共有属性放到constructor 里面
- 类里面的函数都不需要写 function 关键字
1.3.2.4 类的继承
- 现实中的继承：子承父业，比如我们都继承了父亲的姓。
- 程序中的继承：子类可以继承父类的一些属性和方法。
语法：
// 父类
class Father {
}
// 子类继承父类
class Son extends Father {
}
实例：
<script>
// 父类有加法方法
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
// 子类继承父类加法方法 同时 扩展减法方法
class Son extends Father {
constructor(x, y) {
// 利用super 调用父类的构造函数
// super 必须在子类this之前调用
super(x, y);
this.x = x;
this.y = y;
}
subtract() {
console.log(this.x - this.y);
}
}
var son = new Son(5, 3);
son.subtract();
son.sum();
</script>
1.3.2.5 super关键字
- super 关键字用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数
1. 调用父类的构造函数
// 父类
class Person {
constructor(surname){
this.surname = surname;
}
}
// 子类继承父类
class Student entends Person {
constructor(surname,firstname) {
super(surname); //调用父类的 constructor(surname)
this.firstname = firstname; //定义子类独有的属性
}
}
注意：子类在构造函数中使用super,必须放到this前面（必须先调用父类的构造方法，在使用子类构造方法）
案例：
// 父类加法操作
class Father {
constructor(x, y) {
this.x = x
this.y = y
}
sum() {
console.log(this.x + this.y);
}
}
// 子类继承父类加法方法的同时扩展减法操作
class Son extends Father {
constructor(x, y) {
// 调用父类的构造函数 super必须在子类this之前调用(父亲必须放在之前)
super(x, y)
this.x = x
this.y = y
}
subtract() {
console.log(this.x - this.y);
}
}
let son = new Son(5, 3)
son.subtract() // 2
son.sum() // 8
2. 调用父类的普通函数
class Father {
say() {
return '我是爸爸';
}
}
class Son extends Father {
say(){
// super.say() super调用父类的方法
return super.say() + '的儿子';
}
}
var damao = new Son();
console.log(damao.say());
- 多个方法之间不需要添加逗号分隔
- 继承中属性和方法的查找原则：就近原则，先看子类，再看父类
1.3.2.6 三个注意点
- 在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
- 类里面的共有属性和方法一定要加 this使用
- 类里面的this指向：
- constructor 里面的 this指向实例对象
- 方法里面的this指向这个方法的调用者
<body>
<button>点击</button>
<script>
var that;
var _that;
class Star {
constructor(uname, age) {
// constructor 里面的this 指向的是 创建的实例对象
that = this;
this.uname = uname;
this.age = age;
// this.sing();
this.btn = document.querySelector('button');
this.btn.onclick = this.sing;
}
sing() {
// 这个sing方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
console.log(that.uname);
// that里面存储的是constructor里面的this
}
dance() {
// 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
_that = this;
console.log(this);
}
}
var ldh = new Star('刘德华');
console.log(that === ldh);
ldh.dance();
console.log(_that === ldh);
// 1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象
// 2. 类里面的共有的属性和方法一定要加this使用.
</script>
</body>
2 作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
JavaScript (ES6前) 中的作用域有两种：全局作用域和局部作用域(函数作用域)
- 全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
- 局部作用域：作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域
- JS 没有块级作用域：块作用域由 {} 包括；在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：
if(true){
int num = 123;
System.out.println(num); // 123
}
System.out.println(num); // 报错
- JS 中没有块级作用域(在ES6之前)
if(true){
int num = 123;
System.out.println(num); // 123
}
System.out.println(num); // 123
2.1 变量的作用域
在JavaScript中，根据作用域的不同，变量可以分为两种：全局变量和局部变量
区别：
- 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存；函数内部可以使用全局变量
- 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间；函数外部不可以使用局部变量；当函数执行完毕，本作用域内的局部变量会销毁。
2.1.1 全局变量
在全局作用域下(<script> ,标签内部.js 文件)声明的变量叫做全局变量（在函数外部定义的变量）
- 全局变量在代码的任何位置都可以使用
- 在全局作用域下 var 声明的变量 是全局变量
- 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）
注意：
为 window 对象动态添加的属性默认也是全局的，不推荐！
函数中未使用任何关键字声明的变量为全局变量，不推荐！！！
尽可能少的声明全局变量,防止全局变量被污染
2.1.2 局部变量
在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
- 局部变量只能在该函数内部使用
- 在函数内部 var 声明的变量是局部变量
- 函数的形参实际上就是局部变量
局部作用域分为函数作用域和块作用域。
2.1.2.1 函数作用域
函数作用域：在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。
函数内部声明的变量,在函数外部无法被访问
函数的参数也是函数内部的局部变量
不同函数内部声明的变量无法互相访问
函数执行完毕后，函数内部的变量实际被清空了
2.1.2.2 块作用域
在JavaScript中使用{}包裹的代码称为代码块,代码块内部声明的变量外部将【有可能】无法被访问。
let 声明的变量会产生块作用域，var 不会产生块作用域
const 声明的常量也会产生块作用域
不同代码块之间的变量无法互相访问
推荐使用let或 const
2.1.3 let、var、const
var、let 和 const 都是 JavaScript 中用来声明变量的关键字，并且 let 和 const 关键字是在 ES6 中才新增的。
在 ES2015 之前，JavaScript 是没有块作用域的。可以使用 let 关键词声明拥有块作用域的变量。在块 {} 内声明的变量无法从块外访问。
var和let区分
- 作用域
用 var 声明的变量的作用域是它当前的执行上下文，即如果是在任何函数外面，则是全局执行上下文，如果在函数里面，则是当前函数执行上下文。换句话说，var 声明的变量的作用域只能是全局或者整个函数块的。
而 let 声明的变量的作用域则是它当前所处代码块，即它的作用域既可以是全局或者整个函数块，也可以是 if、while、switch等用{}限定的代码块。
另外，var 和 let 的作用域规则都是一样的，其声明的变量只在其声明的块或子块中可用。
可以看出，let 声明的变量的作用域可以比 var 声明的变量的作用域有更小的限定范围，更具灵活。
function varTest() {
var a = 1;
{
var a = 2; // 函数块中，同一个变量
console.log(a); // 2
}
console.log(a); // 2
}
function letTest() {
let a = 1;
{
let a = 2; // 代码块中，新的变量
console.log(a); // 2
}
console.log(a); // 1
}
varTest();
letTest();
-
重复声明
var 允许在同一作用域中重复声明，而 let 不允许在同一作用域中重复声明，否则将抛出异常。let 声明的重复性检查是发生在词法分析阶段，也就是在代码正式开始执行之前就会进行检查。 -
绑定全局对象
var 在全局环境声明变量，会在全局对象里新建一个属性，而 let 在全局环境声明变量，则不会在全局对象里新建一个属性。
var foo = 'global'
let bar = 'global'
console.log(this.foo) // global
console.log(this.bar) // undefined
let 在全局环境声明变量不在全局对象的属性中，let 在全局环境声明变量 bar 保存在[[Scopes]][0]: Script这个变量对象的属性中，而[[Scopes]][1]: Global就是我们常说的全局对象。
- 变量提升与暂存死区
var 声明变量存在变量提升，如何理解变量提升呢？
要解释清楚这个，就要涉及到执行上下文和变量对象。
在 JavaScript 代码运行时，解释执行全局代码、调用函数或使用 eval 函数执行一个字符串表达式都会创建并进入一个新的执行环境，而这个执行环境被称之为执行上下文。因此执行上下文有三类：全局执行上下文、函数执行上下文、eval 函数执行上下文。
Variable object：变量对象，用于存储被定义在执行上下文中的变量 (variables) 和函数声明 (function declarations) 。
Scope chain：作用域链，是一个对象列表 (list of objects) ，用以检索上下文代码中出现的标识符 (identifiers) 。
thisValue：this 指针，是一个与执行上下文相关的特殊对象，也被称之为上下文对象。
一个执行上下文的生命周期可以分为三个阶段：创建、执行、释放。而所有使用 var 声明的变量都会在执行上下文的创建阶段时作为变量对象的属性被创建并初始化，这样才能保证在执行阶段能通过标识符在变量对象里找到对应变量进行赋值操作等。
而用 var 声明的变量构建变量对象时进行的操作如下：
- 由名称和对应值（undefined）组成一个变量对象的属性被创建（创建并初始化）
- 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。
上述过程就是我们所谓的“变量提升”，这也就能解释为什么变量可以在声明之前使用，因为使用是在执行阶段，而在此之前的创建阶段就已经将声明的变量添加到了变量对象中，所以执行阶段通过标识符可以在变量对象中查找到，也就不会报错。
var 声明的变量在执行上下文创建阶段就会被「创建」和「初始化」，因此对于执行阶段来说，可以在声明之前使用。
let 声明的变量在执行上下文创建阶段只会被「创建」而不会被「初始化」，因此对于执行阶段来说，如果在其定义执行前使用，相当于使用了未被初始化的变量，会报错。
const（定义常量）知识点：
const 声明的是一个只读变量，声明之后不允许改变其值。因此，const 一旦声明必须初始化，否则会报错。
用 let 或 const 声明的变量和常量不会被提升！为了避免 bug，请始终在每个作用域的开头声明所有变量。
通过 const 定义的变量与 let 变量类似，但不能重新赋值，JavaScript const 变量必须在声明时赋值，它不定义常量数组。它定义的是对数组的常量引用，因此，我们仍然可以更改常量数组的元素。常量对象、数组可以更改
2.2 作用域链
- 只要是代码，就至少有一个作用域
- 写在函数内部的叫局部作用域
- 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
- 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
- 作用域链：采取就近原则的方式来查找变量最终的值。
作用域链本质上是底层的变量查找机制。
在函数被执行时，会优先查找当前函数作用域中查找变量
如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域
总结：
1.嵌套关系的作用域串联起来形成了作用域链
2.相同作用域链中按着从小到大的规则查找变量
3.子作用域能够访问父作用域，父级作用域无法访问子级作用域
// 作用域链: 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链表
var num = 10;
funtion fn() { //外部函数
var num = 20;
function fun() { //内部函数
console.log(num); // 20 ,一级一级访问
}
}
2.3 js垃圾回收机制
垃圾回收(Garbage Collection)JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收.
2.3.1 内存的生命周期
内存的生命周期JS环境中分配的内存，一般有如下生命周期：
1, 内存分配:当我们声明变量、函数、对象的时候,系统会自动为他们分配内存
2. 内存使用:即读写内存,也就是使用变量、函数等
3. 内存回收:使用完毕,由垃圾回收器自动回收不再使用的内存
说明：全局变量一般不会回收(关闭页面回收)一般情况下局部变量的值,不用了,会被自动回收掉
内存泄漏:：程序中分配的内存由于某种原因程序未释放或无法释放叫做内存泄漏
2.3.2 算法说明
堆栈空间分配区别：
1,栈(操作系统) :由操作系统自动分配释放函数的参数值、局部变量等,基本数据类型放到栈里面。
2.堆（操作系统)：一般由程序员分配释放,若程序员不释放，由垃圾回收机制回收。复杂数据类型放到堆里面。
两种常见的浏览器垃圾回收算法:引用计数法 和 标记清除法
2.6 闭包
- 闭包指有权访问另一个函数作用域中的变量的函数；闭包 = 内层函数 +外层函数的变量
- 简单理解：一个作用域可以访问另外一个函数内部的局部变量
- 闭包作用:封闭数据,提供操作,外部也可以访问函数内部的变量
<body>
<script>
// 闭包（closure）指有权访问另一个函数作用域中变量的函数。
// 闭包: 我们fn2 这个函数作用域 访问了另外一个函数 fn1 里面的局部变量 num
function fn1() { // fn1就是闭包函数
var num = 10;
function fn2() {
console.log(num); //10
}
fn2();
}
fn1();
</script>
</body>
2.6.1 在chrome中调试闭包
- 打开浏览器，按 F12 键启动 chrome 调试工具。
- 设置断点。
- 找到 Scope 选项（Scope 作用域的意思）。
- 当我们重新刷新页面，会进入断点调试，Scope 里面会 有两个参数（global 全局作用域、local 局部作用域）。
- 当执行到 fn2() 时，Scope 里面会多一个 Closure 参数 ，这就表明产生了闭包。
2.6.2 闭包的作用
延伸变量的作用范围:
<body>
<script>
// 闭包（closure）指有权访问另一个函数作用域中变量的函数。
// 一个作用域可以访问另外一个函数的局部变量
// 我们fn 外面的作用域可以访问fn 内部的局部变量
// 闭包的主要作用: 延伸了变量的作用范围
function fn() {
var num = 10;
return function() {
console.log(num);
}
}
var f = fn();
f();
</script>
</body>
2.6.3 闭包练习
1. 点击li输出索引号
<body>
<ul class="nav">
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>大猪蹄子</li>
</ul>
<script>
// 闭包应用-点击li输出当前li的索引号
// 1. 我们可以利用动态添加属性的方式
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function() {
// console.log(i);
console.log(this.index);
}
}
// 2. 利用闭包的方式得到当前小li 的索引号
for (var i = 0; i < lis.length; i++) {
// 利用for循环创建了4个立即执行函数
// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
(function(i) {
// console.log(i);
lis[i].onclick = function() {
console.log(i);
}
})(i);
}
</script>
</body>
2. 定时器中的闭包
<body>
<ul class="nav">
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>大猪蹄子</li>
</ul>
<script>
// 闭包应用-3秒钟之后,打印所有li元素的内容
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
(function(i) {
setTimeout(function() {
console.log(lis[i].innerHTML);
}, 3000)
})(i);
}
</script>
</body>
2.3 预解析
首先来看几段代码和结果：
console.log(num); // 结果是多少？
//会报错 num is undefined
console.log(num); // 结果是多少？
var num = 10;
// undefined
// 命名函数(自定义函数方式):若我们把函数调用放在函数声明上面
fn(); //11
function fn() {
console.log('11');
}
// 匿名函数(函数表达式方式):若我们把函数调用放在函数声明上面
fn();
var fn = function() {
console.log('22'); // 报错
}
//相当于执行了以下代码
var fn;
fn(); //fn没赋值，没这个，报错
var fn = function() {
console.log('22'); //报错
}
JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。
- 预解析：js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面
- 代码执行：从上到下执行JS语句
预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。
2.3.1 变量预解析（变量提升）
变量预解析也叫做变量提升、函数提升
变量提升: 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升
console.log(num); // 结果是多少？
var num = 10;
// undefined
//相当于执行了以下代码
var num; // 变量声明提升到当前作用域最上面
console.log(num);
num = 10; // 变量的赋值不会提升
2.3.2 函数预解析(函数提升)
函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。
fn(); //11
function fn() {
console.log('11');
}
2.3.3 解决函数表达式声明调用问题
对于函数表达式声明调用需要记住：函数表达式调用必须写在函数声明的下面
// 匿名函数(函数表达式方式):若我们把函数调用放在函数声明上面
fn();
var fn = function() {
console.log('22'); // 报错
}
//相当于执行了以下代码
var fn;
fn(); //fn没赋值，没这个，报错
var fn = function() {
console.log('22'); //报错
}
2.3.4 预解析练习
预解析部分十分重要，可以通过下面4个练习来理解。
Pink老师的视频讲解预解析： b站链接
练习1：
var num = 10;
fun();
function fun() {
console.log(num); //undefined
var num = 20;
}
// 最终结果是 undefined
上述代码相当于执行了以下操作
var num;
function fun() {
var num;
console.log(num);
num = 20;
}
num = 10;
fun();
练习2
var num = 10;
function fn(){
console.log(num); //undefined
var num = 20;
console.log(num); //20
}
fn();
// 最终结果是 undefined 20
上述代码相当于执行了以下操作
var num;
function fn(){
var num;
console.log(num);
var num = 20;
console.log(num);
}
num = 10;
fn();
练习3
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
上述代码相当于执行了以下操作
var a;
function f1() {
var b;
var a
b = 9;
console.log(a); //undefined
console.log(b); //9
a = '123';
}
a = 18;
f1();
练习4
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
// 相当于 var a = 9; b = 9;c = 9; b和c的前面没有var声明,当全局变量看
// 集体声明 var a = 9,b = 9,c = 9;
console.log(a);
console.log(b);
console.log(c);
}
上述代码相当于执行了以下操作
function f1() {
var a;
a = b = c = 9;
console.log(a); //9
console.log(b); //9
console.log(c); //9
}
f1();
console.log(c); //9
console.log(b); //9
console.log(a); //报错 a是局部变量
2.4 严格模式
- JavaScript 除了提供正常模式外，还提供了严格模式
- ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码
- 严格模式在IE10 以上版本的浏览器才会被支持，旧版本浏览器会被忽略
- 严格模式对正常的JavaScript语义做了一些更改：
- 消除了Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为
- 消除代码运行的一些不安全之处，保证代码运行的安全
- 提高编译器效率，增加运行速度
- 禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class, enum, export, extends, import, super 不能做变量名
2.4.1 开启严格模式
- 严格模式可以应用到整个脚本或个别函数中。
- 因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况
2.4.1.1 为脚本开启严格模式
- 为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句
- “
use strict” 或’use strict’
<script>
'user strict';
console.log("这是严格模式。");
</script>
- 因为"use strict"加了引号，所以老版本的浏览器会把它当作一行普通字符串而忽略。
- 有的 script 基本是严格模式，有的 script 脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他 script 脚本文件。
<script>
(function (){
'use strict';
var num = 10;
function fn() {}
})();
</script>
2.4.1.2 为函数开启严格模式
- 若要给某个函数开启严格模式，需要把"
use strict"或’use strict’声明放在函数体所有语句之前
<body>
<!-- 为整个脚本(script标签)开启严格模式 -->
<script>
'use strict';
// 下面的js 代码就会按照严格模式执行代码
</script>
<script>
(function() {
'use strict';
})();
</script>
<!-- 为某个函数开启严格模式 -->
<script>
// 此时只是给fn函数开启严格模式
function fn() {
'use strict';
// 下面的代码按照严格模式执行
}
function fun() {
// 里面的还是按照普通模式执行
}
</script>
</body>
- 将"
use strict" 放在函数体的第一行，则整个函数以 "严格模式"运行。
2.5 严格模式中的变化
- 严格模式对JavaScript的语法和行为，都做了一些改变
2.5.1.1 变量规定
- 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量
- 严格模式禁止这种用法，变量都必须先用var 命令声明，然后再使用
- 严禁删除已经声明变量，例如，``delete x` 语法是错误的
<body>
<script>
'use strict';
// 1. 我们的变量名必须先声明再使用
// num = 10;
// console.log(num);
var num = 10;
console.log(num);
// 2.我们不能随意删除已经声明好的变量
// delete num;
</script>
</body>
2.5.1.2 严格模式下this指向问题
- 以前在全局作用域函数中的this指向window对象
- 严格模式下全局作用域中函数中的this 是 undefined
- 以前构造函数时不加 new 也可以调用，当普通函数，this指向全局对象
- 严格模式下，如果构造函数不加 new 调用，this指向的是 undefined ，如果给它赋值，会报错
- new 实例化的构造函数指向创建的对象实例
- 定时器this 还是指向window
- 事件、对象还是指向调用者
<body>
<script>
'use strict';
//3. 严格模式下全局作用域中函数中的 this 是 undefined。
function fn() {
console.log(this); // undefined。
}
fn();
//4. 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错.
function Star() {
this.sex = '男';
}
// Star();
var ldh = new Star();
console.log(ldh.sex);
//5. 定时器 this 还是指向 window
setTimeout(function() {
console.log(this);
}, 2000);
</script>
</body>
2.5.1.3 函数变化
- 函数不能有重名的参数
- 函数必须声明在顶层，新版本的JavaScript会引入“块级作用域”（ES6中已引入）。为了与新版本接轨，不允许在非函数的代码块内声明函数
<body>
<script>
'use strict';
// 6. 严格模式下函数里面的参数不允许有重名
function fn(a, a) {
console.log(a + a);
};
// fn(1, 2);
function fn() {}
</script>
</body>
3 Promise
多层回调函数的相互嵌套，就形成了回调地狱。 为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。
回调地狱的缺点：
- 代码耦合性太强，牵一发而动全身，难以维护
- 大量冗余的代码相互嵌套，代码的可读性变差
1.3.1 Promise 的基本概念
- Promise 是一个构造函数
①我们可以创建 Promise 的实例 const p = new Promise()
②new 出来的 Promise 实例对象，代表一个异步操作 - Promise.prototype 上包含一个 .then() 方法
① 每一次 new Promise() 构造函数得到的实例对象，
② 都可以通过原型链的方式访问到 .then() 方法，例如 p.then() - .then() 方法用来预先指定成功和失败的回调函数
①p.then(成功的回调函数，失败的回调函数)
②p.then(result => { }, error => { })
③调用 .then() 方法时，成功的回调函数是必选的、失败的回调函数是可选的
1.3.2 基于 then-fs 读取文件内容
由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件，不支持 Promise 的调用方式。因此，需
要先运行如下的命令，安装 then-fs 这个第三方包，npm install then-fs 从而支持我们基于 Promise 的方式读取文件的内容：
import thenFs from 'then-fs'
// 注意：.then()中的失败回调是可选的，可以被省略
thenFs.readFile('./files/1.txt', 'utf8').then((r1) => { console.log(r1) }, err1 => { console.log(err1.message) })
thenFs.readFile('./files/2.txt', 'utf8').then((r2) => { console.log(r2) }, err2 => { console.log(err2.message) })
thenFs.readFile('./files/3.txt', 'utf8').then((r3) => { console.log(r3) }, err3 => { console.log(err3.message) })
//注意：上述的代码无法保证文件的读取顺序，需要做进一步的改进！
- then() 方法的特性
如果上一个 .then() 方法中返回了一个新的 Promise 实例对象，则可以通过下一个 .then() 继续进行处理。通过 .then() 方法的链式调用，就解决了回调地狱的问题
1.3.3 基于 Promise 按顺序读取文件的内容
Promise 支持链式调用，从而来解决回调地狱的问题。通过 .catch 捕获错误,在 Promise 的链式操作中如果发生了错误，可以使用 Promise.prototype.catch 方法进行捕获和处理,如果不希望前面的错误导致后续的 .then 无法正常执行，则可以将 .catch 的调用提前：示例代码如下：
import thenFs from 'then-fs'
thenFs.readFile('./files/11.txt', 'utf8')
.catch((err) => {
console.log(err.message)
})
.then((r1) => {
console.log(r1)
return thenFs.readFile('./files/2.txt', 'utf8')
})
.then((r2) => {
console.log(r2)
return thenFs.readFile('./files/3.txt', 'utf8')
})
.then((r3) => {
console.log(r3)
})
1.3.4 Promise.all() 和.race() 方法
Promise.all() 方法会发起并行的 Promise 异步操作，等所有的异步操作全部结束后才会执行下一步的 .then 操作（等待机制）。示例代码如下：
import thenFs from 'then-fs'
const promiseArr = [
thenFs.readFile('./files/3.txt', 'utf8'),
thenFs.readFile('./files/2.txt', 'utf8'),
thenFs.readFile('./files/1.txt', 'utf8'),
]
// 所有异步操作结束之后，拿到所有的结果。
Promise.all(promiseArr).then(result => {
console.log(result)
// Promise.race() 方法会发起并行的 Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的.then 操作（赛跑机制）。
Promise.race(promiseArr).then(result => {
console.log(result)
})
1.3.5 基于 Promise 封装读文件的方法
方法的封装要求：
① 方法的名称要定义为 getFile
② 方法接收一个形参 fpath，表示要读取的文件的路径
③ 方法的返回值为 Promise 实例对象
注意：第5 行代码中的new Promise() 只是创建了一个形式上的异步操作。
1.3.6 创建具体的异步操作
如果想要创建具体的异步操作，则需要在new Promise() 构造函数期间，传递一个function 函数，将具体的异步操作定义到function 函数内部。示例代码如下：
1.3.7 获取.then 的两个实参
通过.then() 指定的成功和失败的回调函数，可以在function 的形参中进行接收，示例代码如下：
1.3.8 调用resolve 和reject 回调函数
Promise 异步操作的结果，可以调用resolve或reject回调函数进行处理。示例代码如下：
1.4 async/await
- 什么是async/await
async/await 是ES8（ECMAScript 2017）引入的新语法，用来简化Promise 异步操作。在async/await 出现之前，开发者只能通过链式.then() 的方式处理Promise 异步操作。示例代码如下：
.then 链式调用的优点：解决了回调地狱的问题
.then 链式调用的缺点：代码冗余、阅读性差、不易理解
1.4.1 async/await 的基本使用
使用async/await 简化Promise 异步操作的示例代码如下：
1.4.2 async/await 的使用注意事项
①如果在function 中使用了await，则function 必须被async 修饰
②在async 方法中，第一个await 之前的代码会同步执行，await 之后的代码会异步执行
1.4 EventLoop
- JavaScript 是单线程的语言
JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。
单线程执行任务队列的问题：如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。
1.5.1 同步任务和异步任务
为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类：
①同步任务（synchronous）
又叫做非耗时任务，指的是在主线程上排队执行的那些任务
只有前一个任务执行完毕，才能执行后一个任务
②异步任务（asynchronous）
又叫做耗时任务，异步任务由JavaScript 委托给宿主环境进行执行
当异步任务执行完成后，会通知JavaScript 主线程执行异步任务的回调函数
- 同步任务和异步任务的执行过程：
①同步任务由JavaScript 主线程次序执行
②异步任务委托给宿主环境执行
③已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
④JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行
⑤JavaScript 主线程不断重复上面的第4 步
JavaScript 主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制又称为 EventLoop（事件循环）。
1.5.2 结合 EventLoop 分析输出的顺序
正确的输出结果：ADCB。其中：
A 和 D 属于同步任务。会根据代码的先后顺序依次被执行
C 和 B 属于异步任务。它们的回调函数会被加入到任务队列中，等待主线程空闲时再执行
1.6 宏任务和微任务
1.6.1 什么是宏任务和微任务
JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：
① 宏任务（macrotask）
异步 Ajax 请求、setTimeout、setInterval、 文件操作、 其它宏任务
② 微任务（microtask） Promise.then、.catch 和 .finally、 process.nextTick、其它微任务
1.6.2 宏任务和微任务的执行顺序
每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个宏任务。
去银行办业务的场景
① 小云和小腾去银行办业务。首先，需要取号之后进行排队---- 宏任务队列
② 假设当前银行网点只有一个柜员，小云在办理存款业务时，小腾只能等待----单线程，宏任务按次序执行
③ 小云办完存款业务后，柜员询问他是否还想办理其它业务？ ---- 当前宏任务执行完，检查是否有微任务
④ 小云告诉柜员：想要买理财产品、再办个信用卡、最后再兑换点马年纪念币？---- 执行微任务，后续宏任务被推迟
⑤ 小云离开柜台后，柜员开始为小腾办理业务 ----所有微任务执行完毕，开始执行下一个宏任务
1.6.3 分析以下代码输出的顺序
1.7 API 接口案例
案例需求：
基于 MySQL 数据库 + Express 对外提供用户列表的 API 接口服务。用到的技术点如下：
第三方包 express 和 mysql2、 ES6 模块化、Promise、async/await
-
主要的实现步骤
① 搭建项目的基本结构
② 创建基本的服务器
③ 创建 db 数据库操作模块
④ 创建 user_ctrl 业务模块
⑤ 创建 user_router 路由模块 -
搭建项目的基本结构
① 启用 ES6 模块化支持，在 package.json 中声明 “type”: “module”
② 安装第三方依赖包，运行 npm install express@4.17.1 mysql2@2.2.5 -
创建基本的服务器
-
创建 db 数据库操作模块
-
创建 user_ctrl 模块
-
创建 user_router 模块
-
导入并挂载路由模块
-
使用 try…catch 捕获异常
-
总结
① 能够知道如何使用 ES6 的模块化语法
默认导出与默认导入、按需导出与按需导入
② 能够知道如何使用 Promise 解决回调地狱问题
promise.then()、promise.catch()
③ 能够使用 async/await 简化 Promise 的调用
方法中用到了 await，则方法需要被 async 修饰
④ 能够说出什么是 EventLoop
EventLoop 示意图
⑤ 能够说出宏任务和微任务的执行顺序
在执行下一个宏任务之前，先检查是否有待执行的微任务
2. 函数进阶
5.1 函数的定义
- 函数声明方式 function 关键字(命名函数)
- 函数表达式(匿名函数)
- new Function()
var fn = new Function('参数1','参数2',.....,'函数体');
- Function 里面参数都必须是字符串格式
- 第三种方式执行效率低，也不方便书写，因此较少使用
- 所有函数都是 Function 的实例(对象)
- 函数也属于对象
<body>
<script>
// 函数的定义方式
// 1. 自定义函数(命名函数)
function fn() {};
// 2. 函数表达式 (匿名函数)
var fun = function() {};
// 3. 利用 new Function('参数1','参数2', '函数体');
// Function 里面参数都必须是字符串格式，执行效率低，较少写
var f = new Function('a', 'b', 'console.log(a + b)');
f(1, 2);
// 4. 所有函数都是 Function 的实例(对象)
console.dir(f);
// 5. 函数也属于对象
console.log(f instanceof Object);
</script>
</body>
5.2 函数的调用方式
- 普通函数
- 对象的方法
- 构造函数
- 绑定事件函数
- 定时器函数
- 立即执行函数
<body>
<script>
// 函数的调用方式
// 1. 普通函数
function fn() {
console.log('人生的巅峰');
}
// fn(); fn.call()
// 2. 对象的方法
var o = {
sayHi: function() {
console.log('人生的巅峰');
}
}
o.sayHi();
// 3. 构造函数
function Star() {};
new Star();
// 4. 绑定事件函数
// btn.onclick = function() {}; // 点击了按钮就可以调用这个函数
// 5. 定时器函数
// setInterval(function() {}, 1000); 这个函数是定时器自动1秒钟调用一次
// 6. 立即执行函数
(function() {
console.log('人生的巅峰');
})();
// 立即执行函数是自动调用
</script>
</body>
5.3 函数内this的指向
- this指向，是当我们调用函数的时候确定的，调用方式的不同决定了this的指向不同，一般我们指向我们的调用者
| 调用方式 | this指向 |
|---|---|
| 普通函数调用 | window |
| 构造函数调用 | 实例对象，原型对象里面的方法也指向实例对象 |
| 对象方法调用 | 该方法所属对象 |
| 事件绑定方法 | 绑定事件对象 |
| 定时器函数 | window |
| 立即执行函数 | window |
<body>
<button>点击</button>
<script>
// 函数的不同调用方式决定了this 的指向不同
// 1. 普通函数 this 指向window
function fn() {
console.log('普通函数的this' + this);
}
window.fn();
// 2. 对象的方法 this指向的是对象 o
var o = {
sayHi: function() {
console.log('对象方法的this:' + this);
}
}
o.sayHi();
// 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
function Star() {};
Star.prototype.sing = function() {
}
var ldh = new Star();
// 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
var btn = document.querySelector('button');
btn.onclick = function() {
console.log('绑定时间函数的this:' + this);
};
// 5. 定时器函数 this 指向的也是window
window.setTimeout(function() {
console.log('定时器的this:' + this);
}, 1000);
// 6. 立即执行函数 this还是指向window
(function() {
console.log('立即执行函数的this' + this);
})();
</script>
</body>
5.4 改变函数内部this指向
- JavaScript 为我们专门提供了一些函数方法来帮我们处理函数内部 this 的指向问题，常用的有 bind(),call(),apply()三种方法
5.4.1 call() 方法
- call()方法调用一个对象，简单理解为调用函数的方式，但是它可以改变函数的this指向
- fun.call(thisArg,arg1,arg2,…)
- thisArg: 在 fun 函数运行时指定的 this 值
- arg1,arg2: 传递的其他参数
- 返回值就是函数的返回值，因为它就是调用函数
- 因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承
<body>
<script>
// 改变函数内this指向 js提供了三种方法 call() apply() bind()
// 1. call()
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a + b);
};
fn.call(o, 1, 2);
// call 第一个可以调用函数 第二个可以改变函数内的this 指向
// call 的主要作用可以实现继承
function Father(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
}
function Son(uname, age, sex) {
Father.call(this, uname, age, sex);
}
var son = new Son('刘德华', 18, '男');
console.log(son);
</script>
</body>
5.4.2 apply()方法
- apply()方法调用一个函数，简单理解为调用函数的方式，但是它可以改变函数的 this指向
- fun.apply(thisArg,[argsArray])
- thisArg: 在 fun 函数运行时指定的 this 值
- argsArray : 传递的值，必须包含在数组里面
- 返回值就是函数的返回值，因为它就是调用函数
- 因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值
<body>
<script>
// 改变函数内this指向 js提供了三种方法 call() apply() bind()
// 2. apply() 应用 运用的意思
var o = {
name: 'andy'
};
function fn(arr) {
console.log(this);
console.log(arr); // 'pink'
};
fn.apply(o, ['pink']);
// 1. 也是调用函数 第二个可以改变函数内部的this指向
// 2. 但是他的参数必须是数组(伪数组)
// 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值
// Math.max();
var arr = [1, 66, 3, 99, 4];
var arr1 = ['red', 'pink'];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);
</script>
</body>
5.4.3 bind()方法
- bind()方法不会调用函数。但是能改变函数内部 this指向
- fun.bind(thisArg,arg1,arg2,…)
- 返回由指定的 this值和初始化参数改造的 原函数拷贝
- 因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind
<body>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<script>
// 改变函数内this指向 js提供了三种方法 call() apply() bind()
// 3. bind() 绑定 捆绑的意思
var o = {
name: 'andy'
};
function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(o, 1, 2);
f();
// 1. 不会调用原来的函数 可以改变原来函数内部的this 指向
// 2. 返回的是原函数改变this之后产生的新函数
// 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
// 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
// var btn1 = document.querySelector('button');
// btn1.onclick = function() {
// this.disabled = true; // 这个this 指向的是 btn 这个按钮
// // var that = this;
// setTimeout(function() {
// // that.disabled = false; // 定时器函数里面的this 指向的是window
// this.disabled = false; // 此时定时器函数里面的this 指向的是btn
// }.bind(this), 3000); // 这个this 指向的是btn 这个对象
// }
var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
this.disabled = true;
setTimeout(function() {
this.disabled = false;
}.bind(this), 2000);
}
}
</script>
</body>
5.4.4 call apply bind总结
- 相同点：都可以改变函数内部的 this指向
- 区别点：
- call和apply会调用函数，- 并且改变函数内部的this指向
- call和apply传递的参数不一样，call 传递参数，apply 必须数组形式
- bind不会调用函数，可以改变函数内部this指向
- 主要应用场景
- call经常做继承
- apply经常跟数组有关系，比如借助于数学对线实现数组最大值与最小值
- bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向
思维导图：
5.5 高阶函数
- 高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出
接收函数作为参数：
<body>
<div></div>
<script>
// 高阶函数- 函数可以作为参数传递
function fn(a, b, callback) {
console.log(a + b);
callback && callback();
}
fn(1, 2, function() {
console.log('我是最后调用的');
});
</script>
</body>
将函数作为返回值：
<script>
function fn(){
return function() {}
}
</script>
- 此时 fn 就是一个高阶函数
- 函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数
- 同理函数也可以作为返回值传递回来
4 构造函数和原型
4.1 概念
- 在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。ES6， 全称 ECMAScript 6.0 ，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
- 在 ES6之前 ，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。
- 创建对象有三种方式：对象字面量、new Object()、自定义构造函数
// 1. 利用 new Object() 创建对象
var obj1 = new Object();
// 2. 利用对象字面量创建对象
var obj2 = {}；
// 3.利用构造函数创建对象
function Star(uname,age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我会唱歌');
}
}
var ldh = new Star('刘德华',18);
注意：
- 构造函数用于创建某一类对象，其首字母要大写
- 构造函数要和new一起使用才有意义
4.2 构造函数
- 构造函数是一种特殊的函数，主要用来初始化对象(为对象成员变量赋初始值)，它总与new一起使用
- 我们可以把对象中的一些公共的属性和方法抽取出来，然后封装到这个函数里面
new 在执行时会做四件事
- 在内存中创建一个新的空对象。
- 让 this 指向这个新的对象。
- 执行构造函数里面的代码，给这个新对象添加属性和方法。
- 返回这个新对象（所以构造函数里面不需要 return ）。
4.2.1 静态成员和实例成员
JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的this上添加。通过这两种方式添加的成员，就分别称为静态成员和实例成员。
- 静态成员: 在构造函数本身上添加的成员为静态成员，只能由构造函数本身来访问
- 实例成员: 在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问
// 构造函数中的属性和方法我们称为成员，成员可以添加
function Star(uname,age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我会唱歌');
}
}
var ldh = new Star('刘德华',18);
// 实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
// 实例成员只能通过实例化的对象来访问
ldh.sing();
Star.uname; // undefined 不可以通过构造函数来访问实例成员
// 静态成员就是在构造函数本身上添加的成员 sex 就是静态成员
// 静态成员只能通过构造函数来访问
Star.sex = '男';
Star.sex;
ldh.sex; // undefined 不能通过对象来访问
4.2.2 构造函数的问题
构造函数方法很好用，但是存在浪费内存的问题。
- 我们希望所有的对象使用同一个函数，这样就比较节省内存
4.2.3 构造函数原型 prototype
- 构造函数通过原型分配的函数是所有对象所共享的,这样就解决了内存浪费问题
- JavaScript 规定，每一个构造函数都有一个prototype属性，指向另一个对象，注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有
- 我们可以把那些不变的方法，直接定义在prototype 对象上，这样所有对象的实例就可以共享这些方法
<body>
<script>
// 1. 构造函数的问题.
function Star(uname, age) {
//公共属性定义到构造函数里面
this.uname = uname;
this.age = age;
// this.sing = function() {
// console.log('我会唱歌');
// }
}
//公共的方法我们放到原型对象身上
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
console.log(ldh.sing === zxy.sing);
ldh.sing();
zxy.sing();
// 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
</script>
</body>
一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
- 问答：原型是什么？ 一个对象，我们也称为 prototype 为原型对象
- 问答：原型的作用是什么？ 共享方法
4.2.4 对象原型 __ proto __
- 对象都会有一个属性 proto 指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype 原型对象的属性和方法，就是因为对象有_proto_原型的存在。
- _proto_对象原型和原型对象 prototype 是等价的
- _proto_对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype
- Star.prototype 和 ldh.proto 指向相同
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
ldh.sing();
console.log(ldh);
// 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
console.log(ldh.__proto__ === Star.prototype);
// 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
// 如果没有sing 这个方法,因为有 __proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法
</script>
</body>
4.2.5 constructor 构造函数
- 对象原型(__ proto __) 和构造函数(prototype)原型对象 里面都有一个属性 constructor 属性，constructor 我们称为构造函数，因为它指回构造函数本身。
- constructor主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数
- 一般情况下，对象的方法都在构造函数(prototype)的原型对象中设置
- 如果有多个对象的方法，我们可以给原型对象prototype采取对象形式赋值，但是这样会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个constructor指向原来的构造函数
具体请看实例配合理解
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
// 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
// Star.prototype.sing = function() {
// console.log('我会唱歌');
// };
// Star.prototype.movie = function() {
// console.log('我会演电影');
// }
Star.prototype = {
// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
constructor: Star,
sing: function() {
console.log('我会唱歌');
},
movie: function() {
console.log('我会演电影');
}
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
</script>
</body>
4.2.6 构造函数、实例、原型对象三者关系
4.3 原型链
4.3.1 查找规则
- 当访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性
- 如果没有就查找它的原型(也就是_proto_指向的prototype原型对象)
- 如果还没有就查找原型对象的原型(Object的原型对象)
- 依次类推一直找到Object为止(null)
- __ proto __对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
// 1. 只要是对象就有__proto__ 原型, 指向原型对象
console.log(Star.prototype);
console.log(Star.prototype.__proto__ === Object.prototype);
// 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
console.log(Object.prototype.__proto__);
// 3. 我们Object.prototype原型对象里面的__proto__原型 指向为 null
</script>
</body>
4.3.2 原型对象this指向
- 构造函数中的 this指向我们的实例对象
- 原型对象里面放的是方法，这个方法里面的this指向的是这个方法的调用者，也就是这个实例对象
<body>
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
var that;
Star.prototype.sing = function() {
console.log('我会唱歌');
that = this;
}
var ldh = new Star('刘德华', 18);
// 1. 在构造函数中,里面this指向的是对象实例 ldh
ldh.sing();
console.log(that === ldh);
// 2.原型对象函数里面的this 指向的是 实例对象 ldh
</script>
</body>
4.3.3 扩展内置对象
- 可以通过原型对象，对原来的内置对象进行扩展自定义的方法
- 比如给数组增加自定义求偶数和的功能
<body>
<script>
// 原型对象的应用 扩展内置对象方法
Array.prototype.sum = function() {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
};
// Array.prototype = {
// sum: function() {
// var sum = 0;
// for (var i = 0; i < this.length; i++) {
// sum += this[i];
// }
// return sum;
// }
// }
var arr = [1, 2, 3];
console.log(arr.sum());
console.log(Array.prototype);
var arr1 = new Array(11, 22, 33);
console.log(arr1.sum());
</script>
</body>
注意：
- 数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {}，只能是Array.prototype.xxx = function(){}的方式
4.4 继承
ES6 之前并没有给我们提供extends继承
- 我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承
4.4.1 call()
调用这个函数，并且修改函数运行时的 this 指向
fun.call(thisArg,arg1,arg2,......)
- thisArg：当前调用函数 this 的指向对象
- arg1,arg2： 传递的其他参数
示例：
<body>
<script>
// call 方法
function fn(x, y) {
console.log('我希望我的希望有希望');
console.log(this); // Object{...}
console.log(x + y); // 3
}
var o = {
name: 'andy'
};
// fn();
// 1. call() 可以调用函数
// fn.call();
// 2. call() 可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象
fn.call(o, 1, 2);
</script>
</body>
4.4.2 借用构造函数继承父类型属性
- 核心原理: 通过 call() 把父类型的 this 指向子类型的 this，这样就可以实现子类型继承父类型的属性
<body>
<script>
// 借用父构造函数继承属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
Father.call(this, uname, age);
this.score = score;
}
var son = new Son('刘德华', 18, 100);
console.log(son);
</script>
</body>
4.4.3 借用原型对象继承父类型方法
- 一般情况下，对象的方法都在构造函数的原型对象中设置，通过构造函数无法继承父类方法
- 核心原理：
- 将子类所共享的方法提取出来，让子类的 prototype 原型对象 = new 父类()
- 本质： 子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父 类原型对象
- 将子类的constructor重新指向子类的构造函数
<script>
// 借用父构造函数继承属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
Father.prototype.money = function() {
console.log(100000);
};
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
Father.call(this, uname, age);
this.score = score;
}
// Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
Son.prototype = new Father();
// 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
Son.prototype.constructor = Son;
// 这个是子构造函数专门的方法
Son.prototype.exam = function() {
console.log('孩子要考试');
}
var son = new Son('刘德华', 18, 100);
console.log(son);
console.log(Father.prototype);
console.log(Son.prototype.constructor);
</script>
4.4.4 类的本质
- class 本质还是 function
- 类的所有方法都定义在类的 prototype属性上
- 类创建的实例，里面也有_proto_指向类的prototype原型对象
- 所以 ES6 的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
- 所以 ES6 的类其实就是语法糖
- 语法糖：语法糖就是一种便捷写法，简单理解
扫一扫
2444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
