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

 更新时间:2016年08月09日 10:28:38   投稿:jingxian  
下面小编就为大家带来一篇浅谈JavaScript中变量和函数声明的提升。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

现象:

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中变量和函数声明的提升就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Highcharts使用简例及异步动态读取数据

    Highcharts使用简例及异步动态读取数据

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,通过本文给大家介绍Highcharts使用简例及异步动态读取数据的相关知识,感兴趣的朋友一起学习吧
    2015-12-12
  • 一文详解如何在前端使用JS进行分类汇总

    一文详解如何在前端使用JS进行分类汇总

    这篇文章主要给大家介绍了关于如何在前端使用JS进行分类汇总的相关资料,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,需要的朋友可以参考下
    2023-04-04
  • JS实现网络请求的三种方式梳理

    JS实现网络请求的三种方式梳理

    本文主要为大家介绍了基于 XMLHttpRequest、Promise、async/await 等三种异步网络请求的写法,文中的示例代码讲解详细,感兴趣的可以学习一下
    2022-03-03
  • JavaScript 作用域实例分析

    JavaScript 作用域实例分析

    这篇文章主要介绍了JavaScript 作用域,结合实例形式分析了JavaScript函数作用域相关概念、原理及操作注意事项,需要的朋友可以参考下
    2019-10-10
  • 浅析$.getJSON异步请求和同步请求

    浅析$.getJSON异步请求和同步请求

    下面小编就为大家带来一篇浅析$.getJSON异步请求和同步请求。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies

    pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet p

    这篇文章主要为大家介绍了pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies报错解决
    2023-06-06
  • js实现拖拽元素选择和删除

    js实现拖拽元素选择和删除

    这篇文章主要为大家详细介绍了js实现拖拽元素选择和删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 浅谈webpack 四个核心概念之Entry

    浅谈webpack 四个核心概念之Entry

    这篇文章主要介绍了浅谈webpack 四个核心概念之Entry,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • JavaScript中变量提升和函数提升的详解

    JavaScript中变量提升和函数提升的详解

    这篇文章主要介绍了JavaScript中变量提升和函数提升的详解,文章通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • JS事件添加和移出的兼容写法示例

    JS事件添加和移出的兼容写法示例

    这篇文章主要介绍了JS事件添加和移出的兼容写法,结合实例形式分析了javascript针对不同浏览器实现实现添加与移除事件的相关技巧与使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06

最新评论