了解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 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
php-msf源码详解
2017/12/25 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
nodejs基础知识
2017/02/03 NodeJs
支持移动端原生js轮播图
2017/02/16 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
python中while循环语句用法简单实例
2015/05/07 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python使用gRPC传输协议教程
2018/10/16 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
Python3开发环境搭建详细教程
2020/06/18 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
新三好学生主要事迹
2014/01/23 职场文书
小学语文教学反思
2014/02/10 职场文书
离职信范本
2015/06/23 职场文书
病假条格式范文
2015/08/17 职场文书
小学思想品德教学反思
2016/02/24 职场文书