基于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


相关推荐: Android自定义控件实现温度旋转按钮效果  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  在线教育网站制作平台,山西立德教育官网?  Android中AutoCompleteTextView自动提示  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  谷歌浏览器下载文件时中断怎么办 Google Chrome下载管理修复  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设?  如何制作公司的网站链接,公司想做一个网站,一般需要花多少钱?  SQL查询语句优化的实用方法总结  敲碗10年!Mac系列传将迎来「触控与联网」双革新  Laravel如何生成和使用数据填充?(Seeder和Factory示例)  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  JavaScript数据类型有哪些_如何准确判断一个变量的类型  如何用狗爹虚拟主机快速搭建网站?  Python文件异常处理策略_健壮性说明【指导】  详解jQuery中的事件  如何用花生壳三步快速搭建专属网站?  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  Android滚轮选择时间控件使用详解  美食网站链接制作教程视频,哪个教做美食的网站比较专业点?  如何在景安云服务器上绑定域名并配置虚拟主机?  昵图网官网入口 昵图网素材平台官方入口  如何快速启动建站代理加盟业务?  UC浏览器如何切换小说阅读源_UC浏览器阅读源切换【方法】  laravel怎么在请求结束后执行任务(Terminable Middleware)_laravel Terminable Middleware请求结束任务执行方法  如何在IIS服务器上快速部署高效网站?  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  java ZXing生成二维码及条码实例分享  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  如何快速生成可下载的建站源码工具?  如何在 Pandas 中基于一列条件计算另一列的分组均值  如何用西部建站助手快速创建专业网站?  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面?  如何用5美元大硬盘VPS安全高效搭建个人网站?  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  Laravel如何实现本地化和多语言支持?(i18n教程)  EditPlus中的正则表达式 实战(1)  JavaScript如何实现倒计时_时间函数如何精确控制  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  ,怎么在广州志愿者网站注册?  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱?  js实现点击每个li节点,都弹出其文本值及修改  Laravel Fortify是什么,和Jetstream有什么关系  nodejs redis 发布订阅机制封装实现方法及实例代码  Java遍历集合的三种方式  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  Python高阶函数应用_函数作为参数说明【指导】