浅谈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 相关文章推荐
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
浅谈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中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python实现杨氏矩阵查找
2019/03/02 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python的缺点和劣势分析
2019/11/19 Python
python interpolate插值实例
2020/07/06 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
目标管理责任书
2014/04/15 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
上班迟到检讨书
2015/05/06 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang