浅谈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 相关文章推荐
使用js简单实现了tree树菜单
Nov 20 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 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引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
使用angular写一个hello world
2015/01/23 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
对Python中range()函数和list的比较
2018/04/19 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
会计主管岗位职责范文
2013/11/08 职场文书
财务管理个人自荐书范文
2013/11/24 职场文书
应届生个人求职信模板
2013/11/26 职场文书
公司股东合作协议书
2014/09/14 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
2015年共青团工作总结
2015/05/15 职场文书
致运动员的广播稿
2015/08/19 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
英语教学课后反思
2016/02/15 职场文书
《观潮》教学反思
2016/02/17 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android