了解javascript中变量及函数的提升


Posted in Javascript onMay 27, 2019

javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中变量及函数提升的理解。

首先,看一个题目:

console.log(a); // undefined
var a = 1;
console.log(a); // 1
console.log(b());
function b(){return 2;} // 2
console.log(c) //报错
let c = 4;
console.log(d()) // 报错 
var d = function(){return 3;} // 报错
(function(){
var m = n = 1;
})()
console.log(m) //报错
console.log(n) // 1

上面的实例对于javascript变量及函数提升的可谓是淋漓尽致...

一、javascript 变量的提升

-函数及变量的声明都将被提升到函数的最顶部

-变量可以在使用后声明,也就是变量可以先使用再声明

敲黑板,划重点,是变量的声明,声明,声明,当变量或函数已经初始化之后,就不会提升到函数的最顶部。这里上面的变量a已经初始化了,所以第一个console取不到变量a得值,为undefined;

注意:变量的提升只会提升到当前作用域下

二、javascript函数的提升

而函数b仅仅是先声明了一个函数方法,函数c是函数表达式无法提升,所以在严格模式下b=2;d报错

对于m,n,这里就涉及到javascript作用域的问题

首先,var m = n = 1的执行顺序是什么?并不是我们大多数人心中所想的连续赋值,javascript的赋值是从右向左的,而是 n=1;var m = n;很好,一目了然,在函数作用域内的变量m=n,n是全局变量,最后严格模式下输出结果,n=1,m报错;

三、关于es6两个关键字——let和const

let 声明的变量只在 let 命令所在的代码块内有效,不存在变量的提升

const 声明一个只读的常量,一旦声明,常量的值就不能改变。一旦声明必须初始化,否则就会报错

来个对比很明显的栗子(完美的体现出let命令只在代码块内有效的意思):

{
let test = 2;
var web = 'font';
}
console.log(test); // 报错
console.log(web); // font

再次回到上面的题目,c就是报错的

ES6 明确规定,代码块内如果存在 let 或者 const,代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内,在声明变量 PI 之前使用它会报错。

var PI = "a";
if(true){
console.log(PI); // 报错,即使函数外面全局声明了PI,但在代码块内还是会报错
const PI = "3.1415926";
}

以上,就是关于javascript中变量提升的理解。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
javascript基础知识讲解
Jan 11 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
微信小程序自动客服功能
Nov 02 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 #Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
初学node.js中实现删除用户路由
May 27 #Javascript
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 #Javascript
通过jQuery学习js类型判断的技巧
May 27 #jQuery
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
js加强的经典分页实例
2013/03/15 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
深入理解Python对Json的解析
2017/02/14 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python3实现转换Image图片格式
2018/06/21 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python中itertools的用法详解
2020/02/07 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python列表的逆序遍历实现
2020/04/20 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
给护士表扬信
2014/01/19 职场文书
护士求职信范文
2014/05/24 职场文书
双拥工作宣传标语
2014/06/26 职场文书
医德医风个人总结
2015/02/28 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
签证工作证明模板
2015/06/15 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
java中如何截取字符串最后一位
2022/07/07 Java/Android