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

前端技术 2023/09/09 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中变量和函数声明的提升就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/25491

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案