JavaScript学习手册(16)

本文详细介绍了JavaScript中的作用域概念,包括全局作用域与函数作用域的特点及应用。解释了变量声明提前与函数声明提前的现象,并说明了如何在不同作用域间访问变量。

作用域

指一个变量的作用范围

作用域分类

  1. 全局作用域

    直接编写在script标签中的JS代码,都在全局作用域。

    全局作用域在页面打开时创建,在页面关闭时销毁。

    在全局作用域中有一个全局对象window,我们可以直接使用。

    ​ 它代表的是一个浏览器窗口,它由浏览器创建,我们可以直接使用。

    在全局作用域中,

    ​ 创建的变量都会作为window对象的属性保存。

    ​ 创建的函数都会作为window对象的方法保存。

    全局作用域中的变量都是全局变量,

    ​ 在页面的任意部分都可以访问到。

  2. 函数作用域

    调用函数时创建函数作用域函数执行完毕以后,函数作用域销毁。

    每调用一次函数就会创建一个新的函数作用域,它们之间是互相独立的。

    在函数作用域中可以访问到全局作用域的变量。

    在全局作用域中无法访问到函数作用域的变量。

    ​ 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用,如果没有则向上一级作用域中寻找,直到找到全局作用域。

    ​ 如果全局作用域中依然没有找到,则会报错(Uncaught ReferenceError)。

    在函数中要访问全局变量可以使用window对象。

变量声明提前

  1. 使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值)。
  2. 但是如果声明变量时不使用var关键字,则变量不会被声明提前。

函数的声明提前

  1. 使用函数声明形式创建的函数function 函数(){ }
  2. 它会在所有的代码执行之前就被创建,可以在函数声明前调用函数。

使用函数表达式创建的函数,不能被声明提前,所以不能在声明前调用。

  • 函数声明,会被提前调用
  • 函数表达式,不会被提前创建

在函数作用域也有声明提前的特性。

  • 使用var 关键字声明的变量,会在函数中所有的代码执行之前被声明。
  • 函数声明也会在函数中所有的代码执行之前执行。
  • 在函数中,不使用var声明的变量都会成为全局变量。

注意:定义形参就相当于在函数作用域中声明了变量。

debug

在这里插入图片描述
每日一句
十年练得好文秀才,十年练不成田秀才。

### JavaScript 学习手册16章 内容概述 JavaScript学习资源通常分为基础篇、进阶篇和高级应用篇。如果提到第16章的内容,可能涉及的是较为深入的主题,具体取决于书籍或教程的结构设计。以下是基于常见教材内容推测的第16章主题及其核心知识点: #### 一、ES6+ 新特性详解 现代 JavaScript 教程往往会在章节后期重点讲解 ECMAScript 2015 (ES6) 及其后续版本引入的新功能。这些新特性的掌握对于开发者来说至关重要。 - **模块化编程** 使用 `import` 和 `export` 实现模块化的代码管理[^1]。 ```javascript // 导出模块 export const myFunction = () => { console.log('This is an exported function'); }; // 导入模块 import { myFunction } from './myModule.js'; ``` - **箭函数** 箭函数提供了更简洁的语法,并解决了传统函数中的 `this` 绑定问题。 ```javascript const add = (x, y) => x + y; console.log(add(3, 4)); // 输出7 ``` - **解构赋值** 解构赋值允许从数组或对象中提取数据并分配给变量。 ```javascript const obj = { name: 'Alice', age: 25 }; const { name, age } = obj; console.log(name, age); // Alice 25 ``` #### 二、异步编程模型 随着 Web 应用复杂度增加,异步处理成为必备技能之一。 - **Promise 对象** Promise 提供了一种优雅的方式来处理异步操作的结果。 ```javascript new Promise((resolve, reject) => { setTimeout(() => resolve("Success!"), 1000); }).then(result => console.log(result)); ``` - **async/await 关键字** async 函数使得异步代码看起来像同步代码一样易于阅读和维护。 ```javascript async function fetchData() { try { let response = await fetch('https://api.example.com/data'); let data = await response.json(); console.log(data); } catch(error) { console.error('Error:', error); } } ``` #### 三、错误处理机制 健壮的应用程序离不开完善的错误捕获与恢复策略。 - **try...catch 结构** 在执行可能存在异常的部分时可以使用此方法来保护程序流程不被打断。 ```javascript try { throw new Error("An intentional mistake"); } catch(e) { console.error(`Caught exception: ${e.message}`); } ``` #### 四、性能优化技巧 了解如何提升脚本运行效率也是高水平工程师的重要标志。 - 避免不必要的 DOM 访问因为它们相对耗时; - 利用缓存减少重复计算开销; - 压缩文件体积以加快加载速度等等均属于此类范畴内的讨论范围[^1]。 --- ###
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈工程师MrL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值