关闭

JavaScript中变量提升和函数提升的意义理解

时间: 2018-03-22阅读: 2680标签: js知识

在ES6之前,js中是没有块级作用域的(ES6的块级作用域是指一对{}包括的内容, 花括号里就为一个级作用域),只存在全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分;函数提升只有函数声明中才发生。


现象:

1. 在JavaScript中变量和函数的声明会提升到最顶部执行。

2. 函数的提升高于变量的提升。

3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找。

4. 匿名函数不会提升。

5. 不同<script>块中的函数互不影响。


1、变量提升:

console.log(global); // undefined
var global = 'global';
console.log(global); // global
 
function fn () {
  console.log(a); // undefined
  var a = 'aaa';
  console.log(a); // aaa
}
fn();

之所以会是以上的打印结果,是由于js的变量提升,实际上上面的代码是按照以下来执行的:  

var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // 打印出global
 
function fn () {
  var a; // 变量提升,函数作用域范围内
  console.log(a);
  a = 'aaa';
  console.log(a);
}
fn();


2、函数提升:

js中创建函数有两种方式:函数声明式和函数字面量式 

console.log(f1); // function f1() {}   
console.log(f2); // undefined  
function f1() {} //函数声明方式会被提升
var f2 = function() {} //函数字面量

只所以会有以上的打印结果,是由于js中的函数提升导致代码实际上是按照以下来执行的:  

function f1() {} // 函数提升,整个代码块提升到文件的最开始<br>     console.log(f1);   
console.log(f2);   
var f2 = function() {}


3、函数声明提升高于变量声明:

//同时声明变量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!


4、函数内部用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值。


5、匿名函数不会向上提升

getName()
var getName = function () {
  alert('closule')
}
function getName() {
  alert('function')
}
getName()
 
//上边的代码相当于
function getName() { //函数向上提升
  alert('function')
}
getName()
var getName = function () {
  alert('closule')
}
getName()
 
//代码执行分别弹出 "function", "closule"


6、不同<script>块中的函数互不影响

<script>
  getName()
  var getName = function () {
    alert('closule')
  }
<script>
<script>
  function getName() {
    alert('function')
  }
<script>
 
//代码执行报错:TypeError: getName is not a function
//因为第一个<script>块中getName()函数未定义,匿名函数又不会向上提升





站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/534

10个JavaScript难点:能够读懂这篇博客的JavaScript开发者,运气不会太差…

10个JavaScript难点包括:立即执行函数,闭包,使用闭包定义私有变量,prototype,模块化,变量提升,柯里化,apply, call与bind方法,Memoization,函数重载

js的解析的两个阶段_预解析阶段、执行阶段

js不像C语言那样只要编译一次之后成.exe文件之后就不用在编译可以直接使用了,js是一种解释型语言,js同理是边解析边执行。js的解析分为两个阶段 1.预解析阶段 2.执行阶段。

手写JavaScript中的bind方法

bind方法返回的是一个绑定this后的函数,并且该函数并没有执行,需要手动去调用。(从这一点看bind函数就是一个高阶函数,而且和call,apply方法有区别)。bind方法可以绑定this,传递参数。注意,这个参数可以分多次传递。

js中减少使用不必要的if-else或switch_利用数组/对象代替if-else,switch

无论使用if-else,还是switch。当条件多的时候代码显得非常冗长,而且每次添加条件时需要修改主流程的代码,这样就破坏了类的开闭原则。为解决日后的维护可能存在问题,我们可以采用另一种比较优雅的实现方式来替换if-else,switch吗?

js词法作用域和作用域的理解_什么是javascript词法作用域?

JavaScript引擎在代码执行前会对其进行编译:第一步编译阶段,第二步运行阶段。词法作用域:定义在词法阶段的作用域,即书写代码时函数声明的位置决定的。词法分析器处理代码时会保持作用域不变

js可以设置网页默认为横屏状态吗?js设置网页横屏和竖屏切换

打开页面时通过 window.orientation 可以判断网页是横屏还是竖屏,如果是竖屏,给整个页面添加样式 transform: rotate(90deg); 这样,你的页面就显示横屏的效果了。 总的来说,结合window.orientationchange和window.orientation可以灵活的对网页进行变换。

原生js判断当前页面是否为激活状态【判断用户是否在浏览当前页面】

但浏览器打开多个网页时候,如何判断我这个页面是否正在被用户浏览呢?我们可以通过document.hidden属性判断当前页面是否是激活状态。

Javascript实现模仿接口的3种方式

Javascript模仿接口可以有三种方式:1.注释法,此方法属于程序文档范畴,对接口的继承实现完全依靠程序员自觉 2.检查属性法,把要实现的接口方法添加到类属性列表里,通过定义好的检测反复检查是否已经实现了那些方法 3.鸭式辨形法

js基础_如何理解作用域和作用域链?

作用域外,无法引用作用域内的变量;离开作用域后,作用域的变量的内存空间会被清除,比如执行完函数或者关闭浏览器,作用域与执行上下文是完全不同的两个概念。我曾经也混淆过他们,但是一定要仔细区分。JavaScript代码的整个执行过程,分为两个阶段,代码编译阶段与代码执行阶段。

你所忽略的js隐式转换

你有没有在面试中遇到特别奇葩的js隐形转换的面试题,第一反应是怎么会是这样呢?难以自信,js到底是怎么去计算得到结果,你是否有深入去了解其原理呢?下面将深入讲解其实现原理。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!