了解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 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
Javascript倒计时代码
2010/08/12 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
用vue写一个日历
2020/11/02 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
Python切片用法实例教程
2014/09/08 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
《兰亭集序》教学反思
2014/02/11 职场文书
八一建军节感言
2014/02/28 职场文书
师德演讲稿范文
2014/05/06 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
2015年护士节慰问信
2015/03/23 职场文书
最感人的道歉情书
2015/05/12 职场文书
公司周年庆典致辞
2015/07/30 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
用JS创建一个录屏功能
2021/11/11 Javascript
Go语言基础函数基本用法及示例详解
2021/11/17 Golang