浅谈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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 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
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
Python实现随机漫步功能
2018/07/09 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
tensorflow如何批量读取图片
2019/08/29 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
PHP如何自定义函数
2016/09/16 面试题
广告学专业应届生求职信
2013/10/01 职场文书
生日寿宴答谢词
2014/01/19 职场文书
八年级语文教学反思
2014/02/11 职场文书
农业开发项目建议书
2014/05/16 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
授权收款委托书
2014/09/23 职场文书
党员示范岗材料
2014/12/19 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android