浅谈JavaScript中变量和函数声明的提升


Posted in Javascript onAugust 09, 2016

现象:

1. 在JavaScript中变量和函数的声明会提升到最顶部执行。

2. 函数的提升高于变量的提升。

3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找。

4. 匿名函数不会提升。

5. 不同<script>块中的函数互不影响。

例子:

函数声明提升高于变量声明

//同时声明变量a和函数a
var a;
function a() {} 
alert(typeof a); //显示的是"function",初步证明function的优先级高于var。

//先声明函数后声明变量,证明上边的例子不是function覆盖了变量
function a() {}
var a; 
alert(typeof a); //显示的仍是"function",而不是"undefined",即function的优先级高于var。

//声明了变量的同时赋值
function a() {}
var a = 1;
alert(typeof a); //number,此时不是function了。
//说明:"var a=1"相当于"var a;a=1",即先声明,后赋值,"a=1"相当于把a重新赋值了,自然就是number!

函数内部用var定义了和外部相同的变量,函数将不再向上找外部的变量

var value = 'hello';
function show() {
  alert(value);
  if (!value) {
    var value = 'function';
  }
  alert(value);
}
show() //此处调用函数依次弹出 "undefined", "function"

//上例相当于var value = 'hello';
function show() {
var value; //注意这行
  alert(value);
  if (!value) {
    value = 'function'; //这行去掉var
  }
  alert(value);
}
show()//1.如果上列中show内部定义value未用var,则会用到外部的变量,弹出"hello", "hello"。 
//2.如果函数内部未定义value,也能获取到外部的value值。

匿名函数不会向上提升

getName()
var getName = function () {
  alert('closule')
}
function getName() {
  alert('function')
}
getName()

//上边的代码相当于
function getName() { //函数向上提升
  alert('function')
}
getName()
var getName = function () {
  alert('closule')
}
getName()

//代码执行分别弹出 "function", "closule"

不同<script>块中的函数互不影响

<script>
  getName()
  var getName = function () {
    alert('closule')
  }
<script>
<script>
  function getName() {
    alert('function')
  }
<script>

//代码执行报错:TypeError: getName is not a function
//因为第一个<script>块中getName()函数未定义,匿名函数又不会向上提升

以上这篇浅谈JavaScript中变量和函数声明的提升就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
解决elementui表格操作列自适应列宽
Dec 28 Javascript
浅谈js基本数据类型和typeof
Aug 09 #Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 #Javascript
详解js实现线段交点的三种算法
Aug 09 #Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 #Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 #Javascript
引用jquery框架后出错的解决方法
Aug 09 #Javascript
js实现常用排序算法
Aug 09 #Javascript
You might like
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
通过Python实现自动填写调查问卷
2017/09/06 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python封装原理与实现方法详解
2018/08/28 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
事业单位辞职信范文
2014/01/19 职场文书
大学生暑期实践感言
2014/02/26 职场文书
《泉水》教学反思
2014/04/11 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
活动新闻稿范文
2015/07/17 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技