JavaScript 高级(进阶)

JavaScript 高级(进阶)

作用域&解构&箭头函数

作用域

目标:了解作用域对程序执行的影响及作用域链的查找机制,使用闭包函数创建隔离作用域避免全局变量污染。

作用域(scope)规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问。
作用域分为:

  • 局部作用域
  • 全局作用域
局部作用域

局部作用域分为函数作用域和块作用域。局部作用域声明的变量外部不能使用。
1.函数作用域:

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

在这里插入图片描述

总结:

  1. 函数内部声明的变量,在函数外部无法被访问
  2. 函数的参数也是函数内部的局部变量
  3. 不同函数内部声明的变量无法互相访问
  4. 函数执行完毕后,函数内部的变量实际被清空了

2.块作用域:

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

在这里插入图片描述
JavaScript 中除了变量外还有常量,常量与变量本质的区别是:常量必须要有值且不允许被重新赋值,常量值为对象时其属性和方法允许重新赋值。

<script>
  // 必须要有值
  const version = '1.0.0';

  // 不能重新赋值
  // version = '1.0.1';

  // 常量值为对象类型
  const user = {
   
    name: '小明',
    age: 18
  }

  // 不能重新赋值
  user = {
   };

  // 属性和方法允许被修改
  user.name = '小小明';
  user.gender = '男';
</script>

总结:

  1. let 声明的变量会产生块作用域,var声明的变量不会产生块作用域。
  2. const 声明的常量也会产生块作用域。
  3. 不同代码块之间的变量无法互相访问。
  4. 推荐使用 let 或 const。

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

全局作用域

script标签和.js 文件的最外层就是所谓的全局作用域,在此声明的变量在函数内部也可以被访问。全局作用域中声明的变量,任何其它作用域都可以被访问。

在这里插入图片描述

注意:

  1. 为 window 对象动态添加的属性默认也是全局的,不推荐!
  2. 函数中未使用任何关键字声明的变量为全局变量,不推荐!!!
  3. 尽可能少的声明全局变量,防止全局变量被污染

全局作用域有哪些? <script 标签内部和 .js 文件。

<script>
  // 此处是全局
  
  function sayHi() {
   
    // 此处为局部
  }

  // 此处为全局
</script>

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

作用域链

作用域链本质上是底层的变量查找机制。

  • 在函数被执行时,会优先查找当前函数作用域中查找变量
  • 如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域

总结:

  1. 嵌套关系的作用域串联起来形成了作用域链
  2. 相同作用域链中按着从小到大的规则查找变量
  3. 子作用域能够访问父作用域,父级作用域无法访问子级作用域
JS垃圾回收机制

了解JS垃圾回收机制的执行过程。目的: 为了闭包做铺垫。

1. 什么是垃圾回收机制?

垃圾回收机制(Garbage Collection) 简称 GC。

JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收。

如果不了解JS的内存管理机制,非常容易造成内存泄漏(内存无法被回收)的情况。不再用到的内存,没有及时释放,就叫做内存泄漏。

2.内存的生命周期

JS环境中分配的内存, 一般有如下生命周期:

  1. 内存分配:当我们声明变量、函数、对象的时候,系统会自动为他们分配内存
  2. 内存使用:即读写内存,也就是使用变量、函数等
  3. 内存回收:使用完毕,由垃圾回收自动回收不再使用的内存

说明: 全局变量一般不会回收(关闭页面回收);一般情况下局部变量的值, 不用了, 会被自动回收。

总结:

  1. 什么是垃圾回收机制?
  • 简称 GC
  • JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收
  1. 什么是内存泄漏?
  • 不再用到的内存,没有及时释放,就叫做内存泄漏
  1. 内存的生命周期是什么样的?
  • 内存分配、内存使用、内存回收
  • 全局变量一般不会回收; 一般情况下局部变量的值, 不用了, 会被自动回收掉
3.垃圾回收算法说明

所谓垃圾回收, 核心思想就是如何判断内存是否已经不再会被使用了, 如果是, 就视为垃圾, 释放掉。

两种常见的浏览器垃圾回收算法: 引用计数法 和 标记清除法

引用计数:
IE采用的引用计数算法, 定义“内存不再使用”的标准,就是看一个对象是否有指向它的引用。

算法:

  1. 跟踪记录每个值被引用的次数。
  2. 如果这个值的被引用了一次,那么就记录次数1。
  3. 多次引用会累加。
  4. 如果减少一个引用就减1。
  5. 如果引用次数是0 ,则释放内存。
const person = {
   
age: 18,
name: 'pink老师'
}
const p = person
person = 1
p = null

引用计数算法是个简单有效的算法。但它却存在一个致命的问题:嵌套引用。如果两个对象相互引用,尽管他们已不再使用,垃圾回收器不会进行回收,导致内存泄露。

function fn() {
   
let o1 = {
   }
let o2 = {
   }
o1.a = o2
o2.a = o1
return '引用计数无法回收'
}
fn()

因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存泄露。

标记清除法:
现代的浏览器已经不再使用引用计数算法了,现代浏览器通用的大多是基于标记清除算法的某些改进算法,总体思想都是一致的。

核心:

  1. 标记清除算法将“不再使用的对象”定义为“无法达到的对象”。
  2. 就是从根部(在JS中就是全局对象)出发定时扫描内存中的对象。 凡是能从根部到达的对象,都是还需要使用的。
  3. 那些无法由根部出发触及到的对象被标记为不再使用,稍后进行回收。
function fn() {
   
let o1 = {
   }
let o2 = {
   }
o1.a = o2
o2.a = o1
return '引用计数无法回收'
}
fn()

根部已经访问不到,所以自动清除。

闭包

概念:一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域。

简单理解:闭包 = 内层函数 + 外层函数的变量。闭包是一种比较特殊的函数,使用闭包能够访问内层函数作用域中的变量。

闭包作用:封闭数据,提供操作,外部也可以访问函数内部的变量。闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来。

闭包的基本格式:
在这里插入图片描述

闭包应用:实现数据的私有。

<script>
  function foo() {
   
    let i = 0;

    // 函数内部分函数
    function bar() {
   
			console.log(++i);
    }

    // 将函数做为返回值
    return bar;
  }
  
  // fn 即为闭包函数
  let fn = foo();
  
  fn(); // 1
</script>

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

闭包可能引起的问题:内存泄漏。

变量提升

变量提升是 JavaScript 中比较“奇怪”的现象,它允许在变量声明之前即被访问(仅存在于var声明变量)。用var关键字声明变量会有变量提升。

<script>
  // 访问变量 str
  console.log(str + 'world!');
  // 声明变量 str
  var str = 'hello ';
</script>

注意:

  1. 变量在未声明即被访问时会报语法错误
  2. 变量在var声明之前即被访问,变量的值为 undefined
  3. let/const 声明的变量不存在变量提升
  4. 变量提升出现在相同作用域当中
  5. 实际开发中推荐先声明再访问变量

说明:
JS初学者经常花很多时间才能习惯变量提升,还经常出现一些意想不到的bug,正因为如此,ES6 引入了块级作用域,用let 或者 const声明变量,让代码写法更加规范和人性化。

变量提升是什么流程?

  1. 先把var声明的变量提升到当前作用域于最前面
  2. 只提升变量声明, 不提升变量赋值
  3. 然后依次执行代码

我们不建议使用var声明变量。关于变量提升的原理分析会涉及较为复杂的词法分析等知识,而开发中使用 let 可以轻松规避变量的提升。

函数进阶

函数提升

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

<script>
  // 调用函数
  foo()
  // 声明函数
  function foo() {
     
    console.log('声明之前即被调用...')
  }
  
  // 不存在提升现象
  bar()  // 错误
  var bar = function () {
     
    console.log('函数表达式不存在提升现象...')
  }
</script>

总结:

  1. 函数提升能够使函数的声明调用更灵活
  2. 函数表达式不存在提升的现象
  3. 函数提升出现在相同作用域当中

函数表达式必须先声明和赋值,后调用 ,否则报错。

函数参数

函数参数的使用细节,能够提升函数应用的灵活度。

函数的参数有实参和形参,形参可以理解为默认参数。函数还有动态参数和剩余参数。

默认参数

<script>
  // 设置参数默认值
  function sayHi(name="小明", age=18) {
     
    document.write(`<p>大家好,我叫${
       name
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaScript核心进阶:阳波PDF是一本面向已经掌握基础JavaScript知识的读者而设计的进阶书籍。此书主要内容涵盖了JavaScript核心的高级特性和使用技巧,旨在帮助读者更深入地理解JavaScript并提升自己的编程能力。 首先,该书的作者是阳波老师,他在JavaScript领域有丰富的经验和深厚的理论基础。他通过清晰、详细的讲解及代码实例,帮助读者逐步了解和掌握JavaScript中的高级概念,如闭包、原型链、作用域等。 除了核心概念,该书还介绍了一些实用技巧和最佳实践,例如模块化开发、异步编程、优化性能等。这些技巧可以帮助读者更高效地编写JavaScript代码,提升应用的质量和响应速度。 此外,书中还包含了一些实战案例,通过具体的项目实例,读者能够学习到如何将JavaScript应用于实际项目中,发挥其强大的功能和灵活性。 总之,JavaScript核心进阶:阳波PDF是一本帮助已经掌握基础JavaScript知识的人提升自己的必备读物。读者能够通过阅读本书,进一步拓展对JavaScript的理解,掌握高级特性和实用技巧,并将其应用于实际项目中,从而提升编程能力和项目质量。 ### 回答2: JavaScript是一种广泛应用于Web开发的编程语言,对于想要深入了解该语言的开发者来说,掌握其核心进阶知识是至关重要的。而《JavaScript核心进阶》是一本由阳波编写的PDF电子书,该书的内容涵盖了JavaScript的核心进阶知识。 《JavaScript核心进阶》这本书包含了丰富的内容,主要分为了四个部分。第一部分介绍了Javascript的基础知识,包括变量、数据类型、运算符、表达式等。第二部分涵盖了Javascript的函数和作用域,其中讲解了函数的定义、调用、参数、闭包等概念。第三部分讲解了Javascript的对象、原型和继承,重点介绍了原型链的概念和使用方法。第四部分介绍了一些高级主题,如模块化编程、异步编程、错误处理等。此外,该书还包含了许多实例和练习,帮助读者加深理解和巩固知识。 在阅读《JavaScript核心进阶》这本书后,读者将能够更好地理解JavaScript的核心概念和技巧。他们将学会如何使用适当的语法和设计模式来编写更加高效和可维护的代码。同时,这本书还帮助读者扩展了对JavaScript的应用范围,使他们能够处理更加复杂和高级的开发任务。 总而言之,《JavaScript核心进阶》是一本适合有一定JavaScript基础的开发者进行学习的书籍。它提供了大量的案例和实践,帮助读者深入理解JavaScript的核心知识。通过阅读这本书,读者将能够掌握JavaScript的核心进阶知识,提升自己的编程技能,实现更加高效和可靠的Web开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值