函数的大体分三种,一种是函数的声明,一种是函数表达式(又称为函数的字面量)

  1.函数的声明 => function myFn(){};

  2.函数的表达式 => var myFn = function() {};

  3.函数对象方式 => var myFn = new Function('n1','n2','return n1 + n2 ');  // tip: 参数必须加引号

以上:3和其他的两项用法差别较大,不作比较;主要介绍1与2的区别:

  先看二个简单的例子:

  1. var myFn = function () {
  2. console.log('mm');
  3. };
  4.  
  5. myFn(); //mm
  6.  
  7. var myFn = function () {
  8. console.log('nn');
  9. };
  10.  
  11. myFn(); //nn

在看下这个:

  1. function myFn() {
  2. console.log('mm');
  3. };
  4. myFn(); //nn
  5.  
  6. function myFn() {
  7. console.log('nn');
  8. };
  9. myFn(); //nn

  为什么会出现以上两种情况呢? 我们知道JavaScript的代码是一行一行执行的,但是在代码执行之前,浏览器会有一个预解析的过程,会把声明的变量,函数的表达式提升,然后再一行一行的执行代码;但是为什么两个打印的结果不一样呢? 因为第一个是变量的提升,函数本身并没有提升,而第二个函数表达式会整个提升,所以myFn()写在哪,结果都是一样的;

  我们这个时候可能回想,如果他们在一起的时候,哪个先执行?

  第一种情况:

  1. var myFn = function () {
  2. console.log('nn');
  3. }
  4. myFn(); // nn
  5.  
  6. function myFn() {
  7. console.log('mm');
  8. }
  9. myFn(); // nn

  第二种情况:

  1. function myFn() {
  2. console.log('mm');
  3. }
  4. myFn(); // mm
  5.  
  6. var myFn = function () {
  7. console.log('nn');
  8. }
  9. myFn(); // nn

  这里注意的一点是,变量的提升高于函数表达式;在第一种情况下,var  = myFn 会提升最高的优先级,其次是函数的声明。

  在第一种情况里,函数的声明会提升,然后会被函数表达式覆盖,所以会打印两次一样的;第二次该提升的会提升,代码会一步一的执行;

看一下,下面的一段的代码执行情况,检验一下:

  1. myFn();
  2. function myFn() {
  3. console.log('mm');
  4. }
  5. myFn();
  6. var myFn = function () {
  7. console.log('nn');
  8. }

这里可以很明显的看到结果 =>打印两次  // mm

下面我们在介绍一种,在函数内部的变量提升(先看一段代码)

  1. function myFn(a) {
  2. var a = 2;
  3. console.log(b);
  4. console.log(a);
  5. var b = 0 ;
  6. }
  7. myFn(1); // undefined 2

在函数的内部,如果函数有参数的话,就相当于在函数内部声明了这个变量,如上面例子:先声明 var a;调用的时候传来参数,则 a =1 ,若果在函数内部把a在赋值,那么a就等于新赋值的值;而b是不是参数,但在函数内部定义了,由于变量的提升,会打印underfind,这是变量定义,但是没有赋值,只有在函数赋值后,才能打印该值;

  

JavaScript中函数的变量提升问题的更多相关文章

  1. Javascript中函数及变量定义的提升

    <html> <head> <title>函数提升</title> <script language="javascript" ...

  2. JavaScript中的各种变量提升(Hoisting)

    首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升( ...

  3. javascript中函数声明、变量声明以及变量赋值之间的关系与影响

    javascript中函数声明.变量声明以及变量赋值之间的关系与影响 函数声明.变量声明以及变量赋值之间有以下几点共识: 1.所有的全局变量都是window的属性 2.函数声明被提升到范围作用域的顶端 ...

  4. JavaScript中函数函数的定义与变量的声明<基础知识一>

    1.JavaScript中函数的三种构造方式 a.function createFun(){ } b.var createFun=function (){ } c.var createFun=new ...

  5. JavaScript中函数是不能重载原因

    以前有一次写JS插件的时候,由于后台写习惯了,妄想在JS中写重载函数,可惜不能成功,原因花了一点时间记了下来 首先要理解重载的含义:函数返回值不同或者形式参数个数不同但函数名相同的函数 JavasSc ...

  6. 了解Javascript中函数作为对象的魅力

    前言 Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性,可以有方法, 可以享有所有对象所拥有的特性.并且最重 ...

  7. Javascript中函数的四种调用方式

    一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...

  8. JavaScript中函数的形参和实参的实现原理剖析

    我们都知道JS里面参数的传递是可以不一样的,比如我们有一个函数: <script type="text/javascript"> function one(a,b,c) ...

  9. JavaScript 中函数节流和函数去抖的讲解

    JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...

随机推荐

  1. Python学习-27.Python中的列表(list)

    列表已经用了很多次了.使用中括号包含元素. list = ['a','b','c'] 获取元素使用[]. print(list[0]) 输出a 不过值得注意的是,[]只能是0到元素个数-1吗?在Pyt ...

  2. jQuery中的AJAX的使用

    1.运用ajax()方法,比其它如load().get().post()全局性函数它更多地关注实现过程中的细节:首先要了解其参数列表: url: 要求为String类型的参数,(默认为当前页地址)发送 ...

  3. LINQ to objects遇到的小坑

    1.C#中LINQ to Objects中延迟查询的陷阱(其他类型的LINQ也基本一致) 之前在不了解LINQ延迟查询的时候,我使用下面的这种方式,将where语句的结果直接as为List<T& ...

  4. 毕业回馈-89C51之数码管的使用

    7段码的数码管由7个LED等共同组成,根据公共端的不同有共阴和共阳之分.现在很多数码管在7段码的基础上加了一个.即dp,其内部结构如下图所示: 公共端为LED灯的阴极,所以为共阴极接法: 公共端为阳极 ...

  5. [.net]基元线程同步构造

    /* 基元线程同步构造 用户模式构造: 易变构造(Volatile Construct) 互锁构造(Interlocked Construct):自旋锁(Spinlock) 乐观锁(Optimisti ...

  6. 全球第一开源云ERP Odoo操作手册 模块安装和界面汉化指南

    之前介绍了odoo的安装和初始设置以及数据库,下面来介绍odoo的模块安装和界面汉化. 1.4 模块安装和界面汉化 Odoo 的功能包含在不同的模块中, 刚创建的数据库除 Odoo 的核心模块外, 其 ...

  7. 1047 行 MySQL 详细学习笔记

    https://blog.csdn.net/baidu_25310663/article/details/86517610 Windows服务   -- 启动MySQL   net start mys ...

  8. Windows 环境下使用强大的wget工具

    安装 下载[http://www.interlog.com/~tcharron/wgetwin.html] 解压到目录 比如我解压到D:\Tool\wget 添加wget环境变量,这样使用就更方便了, ...

  9. 盘点Xcode中开发者最喜爱的十大开源插件

    Xcode IDE拥有着诸如导航.重构.校准等众多非常高大上的工具,而予以辅助的插件更是在Xcode的基础上对相关功能进行改进与扩展.在应用开发过程中,通过开源包管理器Alcatraz对插件进行安装管 ...

  10. jzoj5832. 【省选模拟8.20】Emotional Flutter

    tj:我們發現,每一次走過的步長都是k,設當前走的步數是x,走到了一個白條 那麼,每一次走就是把所有黑條都向前移k位,我們可以考慮把所有黑條的左邊界不斷的向前移動k,直到下一次移動時,其左邊界小於0, ...