java Script 高级总结

 

1, 作用域

作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。

1.1局部作用域

局部作用域分为函数作用域和块作用域。

1.11函数作用域

在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。

1. 函数内部声明的变量，在函数外部无法被访问

2. 函数的参数也是函数内部的局部变量

3. 不同函数内部声明的变量无法互相访问

4. 函数执行完毕后，函数内部的变量实际被清空了

1.12块作用域

在 JavaScript 中使用 {} 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。  

JavaScript 中除了变量外还有常量，常量与变量本质的区别是【常量必须要有值且不允许被重新赋值】，常量值为对象时其属性和方法允许重新赋值。

总结：

1. let 声明的变量会产生块作用域，var 不会产生块作用域

2. const 声明的常量也会产生块作用域

3. 不同代码块之间的变量无法互相访问

4. 推荐使用 let 或 const

注：开发中 let 和 const 经常不加区分的使用，如果担心某个值会不小被修改时，则只能使用 const 声明成常量。

1.2全局作用域

<script> 标签和 .js 文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。

总结：

1. 为 window 对象动态添加的属性默认也是全局的，不推荐！

2. 函数中未使用任何关键字声明的变量为全局变量，不推荐！！！

3. 尽可能少的声明全局变量，防止全局变量被污染

JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。

1.3作用域链

1. 嵌套关系的作用域串联起来形成了作用域链

2. 相同作用域链中按着从小到大的规则查找变量

3. 子作用域能够访问父作用域，父级作用域无法访问子级作用域

1.4闭包

闭包是一种比较特殊和函数，使用闭包能够访问函数作用域中的变量。  

总结：

1. 闭包本质仍是函数，只不是从函数内部返回的

2. 闭包能够创建外部可访问的隔离作用域，避免全局变量污染

3. 过度使用闭包可能造成内存泄漏

注：回调函数也能访问函数内部的局部变量。

1.5变量提升(了解)

总结：

1. 变量在未声明即被访问时会报语法错误

2. 变量在声明之前即被访问，变量的值为 undefined

3. let 声明的变量不存在变量提升，推荐使用 let

4. 变量提升出现在相同作用域当中

5. 实际开发中推荐先声明再访问变量

1.6函数提升(了解)

 函数提升与变量提升比较类似，是指函数在声明之前即可被调用。

2,函数

2.1动态参数

arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。

arguments 是一个伪数组

2.2剩余参数

1. ... 是语法符号，置于最末函数形参之前，用于获取多余的实参

2. 借助 ... 获取的剩余实参，是个真数组

 2.3箭头函数

箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。       

总结：

1. 箭头函数属于表达式函数，因此不存在函数提升

2. 箭头函数只有一个参数时可以省略圆括号 ()

3. 箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回

4. 箭头函数中没有 arguments，只能使用 ... 动态获取实参

3.解构赋值 

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。

3.1数组解构

总结：

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

2. 变量的顺序对应数组单元值的位置依次进行赋值操作

3. 变量的数量大于单元值数量时，多余的变量将被赋值为 undefined

4. 变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位

5. 允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析

3.2对象解构

总结：

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

2. 对象属性的值将被赋值给与属性名相同的变量

3. 对象中找不到与变量名一致的属性时变量值为 undefined

4. 允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效

注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析

 4.深入对象

4.1构造函数 

构造函数是专门用于创建对象的函数，如果一个函数使用 new 关键字调用，那么这个函数就是构造函数。

总结：

1. 使用 new 关键字调用函数的行为被称为实例化

2. 实例化构造函数时没有参数时可以省略 ()

3. 构造函数的返回值即为新创建的对象

4. 构造函数内部的 return 返回的值无效！

注：实践中为了从视觉上区分构造函数和普通函数，习惯将构造函数的首字母大写。

4.2实例成员

通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。  

总结：

1. 构造函数内部 this 实际上就是实例对象，为其动态添加的属性和方法即为实例成员

2. 为构造函数传入参数，动态创建结构相同但值不同的对象

注：构造函数创建的实例对象彼此独立互不影响。

4.3静态成员

在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。

总结：

1. 静态成员指的是添加到构造函数本身的属性和方法

2. 一般公共特征的属性或方法静态成员设置为静态成员

3. 静态成员方法中的 this 指向构造函数本身

 5.内置构造函数

在 JavaScript 中最主要的数据类型有 6 种，分别是字符串、数值、布尔、undefined、null 和 对象，常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型，对象也被称为引用类型。

在 JavaScript 内置了一些构造函数，绝大部的数据处理都是基于这些构造函数实现的，JavaScript 基础阶段学习的 Date 就是内置的构造函数。

甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数，用于创建对应类型的数据。

5.1Object引用类型

Object 是内置的构造函数，用于创建普通对象。

总结：

1. 推荐使用字面量方式声明对象，而不是 Object 构造函数

2. Object.assign 静态方法创建新的对象

3. Object.keys 静态方法获取对象中所有属性

4. Object.values 表态方法获取对象中所有属性值

5.2Array引用类型

Array 是内置的构造函数，用于创建数组。

数组赋值后，无论修改哪个变量另一个对象的数据值也会相当发生改变。         

总结：

1. 推荐使用字面量方式声明数组，而不是 Array 构造函数

2. 实例方法 forEach 用于遍历数组，替代 for 循环 (重点)

3. 实例方法 filter 过滤数组单元值，生成新数组(重点)

4. 实例方法 map 迭代原数组，生成新数组(重点)

5. 实例方法 join 数组元素拼接为字符串，返回字符串(重点)

6. 实例方法 find 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点)

7. 实例方法every 检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回 true，否则返回 false(重点)

8. 实例方法some 检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true，否则返回 false

9. 实例方法 concat 合并两个数组，返回生成新数组

10. 实例方法 sort 对原数组单元值排序

11. 实例方法 splice 删除或替换原数组单元

12. 实例方法 reverse 反转数组

13. 实例方法 findIndex 查找元素的索引值

5.3包装类型

之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。

5.31 String

String 是内置的构造函数，用于创建字符串。

1. 实例属性 length 用来获取字符串的度长(重点)

2. 实例方法 split('分隔符') 用来将字符串拆分成数组(重点)

3. 实例方法 substring（需要截取的第一个字符的索引[,结束的索引号]） 用于字符串截取(重点)

4. 实例方法 startsWith(检测字符串[, 检测位置索引号]) 检测是否以某字符开头(重点)

5. 实例方法 includes(搜索的字符串[, 检测位置索引号]) 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点)

6. 实例方法 toUpperCase 用于将字母转换成大写

7. 实例方法 toLowerCase 用于将字母就转换成小写

8. 实例方法 indexOf 检测是否包含某字符

9. 实例方法 endsWith 检测是否以某字符结尾

10. 实例方法 replace 用于替换字符串，支持正则匹配

11. 实例方法 match 用于查找字符串，支持正则匹配

注：String 也可以当做普通函数使用，这时它的作用是强制转换成字符串数据类型。

5.32 Number

Number 是内置的构造函数，用于创建数值。

1. 推荐使用字面量方式声明数值，而不是 Number 构造函数

2. 实例方法 toFixed 用于设置保留小数位的长度

6.面向对象

面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、继承、多态。

6.1 封装

封装的本质是将具有关联的代码组合在一起，其优势是能够保证代码复用且易于维护，函数是最典型也是最基础的代码封装形式，面向对象思想中的封装仍以函数为基础，但提供了更高级的封装形式。  

构造函数

同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。

 

总结：

1. 构造函数体现了面向对象的封装特性

2. 构造函数实例创建的对象彼此独立、互不影响

3. 命名空间式的封装无法保证数据的独立性

注：可以举一些例子，如女娲造人等例子，加深对构造函数的理解。

原型对象

实际上每一个构造函数都有一个名为 prototype 的属性，译成中文是原型的意思，prototype 的是对象类据类型，称为构造函数的原型对象，每个原型对象都具有 constructor 属性代表了该原型对象对应的构造函数。

        当访问对象的属性或方法时，先在当前实例对象是查找，然后再去原型对象查找，并且原型对象被所有实例共享。

结合构造函数原型的特征，实际开发重往往会将封装的功能函数添加到原型对象中。  

6.2原型继承

基于构造函数原型对象实现面向对象的继承特性。

6.3原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链，

 7.深拷贝和浅拷贝

1. 首先浅拷贝和深拷贝只针对想Object,Array这样的复杂对象，简单来说，浅拷贝只复制一层对象的属性，二深拷贝则复制了所有的层级。

2. 对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会 改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

call()

1. call 方法能够在调用函数的同时指定 this 的值

2. 使用 call 方法调用函数时，第1个参数为 this 指定的值

3. call 方法的其余参数会依次自动传入函数做为函数的参数

apply()

1. apply 方法能够在调用函数的同时指定 this 的值

2. 使用 apply 方法调用函数时，第1个参数为 this 指定的值

3. apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数

 bind()

bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数

7.1this

1, 普通函数this指向 window

2, 普通对象this指向 obj

3, 构造函数this指向 实例对象

4, 原型方法this指向 实例对象

5, 事件绑定this指向 事件源

6, 定时器,延时器this指向 window

7, 箭头函数this指向 外层函数的this