基于js的变量提升和函数提升(详解)

发布时间 - 2026-01-11 03:16:54    点击率:

一、变量提升

在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。

上个简历的例子如:

console.log(global); // undefined
var global = 'global';
console.log(global); // global

function fn () {
console.log(a); // undefined
var a = 'aaa';
console.log(a); // aaa
}
fn();

之所以会是以上的打印结果,是由于js的变量提升,实际上上面的代码是按照以下来执行的:

var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // 打印出global

function fn () {
var a; // 变量提升,函数作用域范围内
console.log(a);
a = 'aaa';
console.log(a);
}
fn();

二、函数提升

js中创建函数有两种方式:函数声明式和函数字面量式。只有函数声明才存在函数提升!如:

console.log(f1); // function f1() {}  
console.log(f2); // undefined 
function f1() {}
var f2 = function() {}

只所以会有以上的打印结果,是由于js中的函数提升导致代码实际上是按照以下来执行的:

function f1() {} // 函数提升,整个代码块提升到文件的最开始<br>console.log(f1);  
console.log(f2);  
var f2 = function() {}

结语:基本上就是这样,要熟练掌握的话可以多做些练习,test:

console.log(f1()); 
console.log(f2);  
function f1() {console.log('aa')}
var f2 = function() {}
(function() {
console.log(a);
a = 'aaa';
var a = 'bbb';
console.log(a);
})();

以上这篇基于js的变量提升和函数提升(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


# js  # 变量提升  # 函数提升  # 详解javascript中的变量提升和函数提升  # 浅谈JavaScript中变量和函数声明的提升  # JavaScript中变量提升和函数提升的详解  # JavaScript中变量提升与函数提升经典实例分析  # JavaScript中的变量提升和函数提升  # JS变量提升及函数提升实例解析  # JavaScript中变量提升和函数提升实例详解  # 了解javascript中变量及函数的提升  # js进阶语法之变量提升、函数提升以及参数的命名冲突问题解决  # 给大家  # 会有  # 是由于  # 希望能  # 这篇  # 有两种  # 上个  # 时才  # 即为  # 小编  # 多做  # 大家多多  # 到它  # 提升到  # pre  # span  # class  # console  # xhtml  # brush 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  Laravel如何实现模型的全局作用域?(Global Scope示例)  javascript读取文本节点方法小结  再谈Python中的字符串与字符编码(推荐)  php 三元运算符实例详细介绍  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  如何用免费手机建站系统零基础打造专业网站?  活动邀请函制作网站有哪些,活动邀请函文案?  如何基于PHP生成高效IDC网络公司建站源码?  如何在不使用负向后查找的情况下匹配特定条件前的换行符  Laravel安装步骤详细教程_Laravel环境搭建指南  车管所网站制作流程,交警当场开简易程序处罚决定书,在交警网站查询不到怎么办?  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  如何快速查询网址的建站时间与历史轨迹?  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办?  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  JS碰撞运动实现方法详解  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  Laravel如何使用Facades(门面)及其工作原理_Laravel门面模式与底层机制  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  如何确保FTP站点访问权限与数据传输安全?  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  如何快速生成可下载的建站源码工具?  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用?  ,交易猫的商品怎么发布到网站上去?  js实现获取鼠标当前的位置  如何在云服务器上快速搭建个人网站?  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  Swift中循环语句中的转移语句 break 和 continue  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  浅谈redis在项目中的应用  企业网站制作这些问题要关注  如何在万网自助建站中设置域名及备案?  在centOS 7安装mysql 5.7的详细教程  详解免费开源的.NET多类型文件解压缩组件SharpZipLib(.NET组件介绍之七)  在线制作视频网站免费,都有哪些好的动漫网站?  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  LinuxCD持续部署教程_自动发布与回滚机制  Android自定义控件实现温度旋转按钮效果  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  Java类加载基本过程详细介绍  如何在IIS中新建站点并解决端口绑定冲突?  Laravel如何操作JSON类型的数据库字段?(Eloquent示例)