JavaScript中函数的变量提升问题

函数的大体分三种，一种是函数的声明，一种是函数表达式（又称为函数的字面量）

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

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

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

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

　　先看二个简单的例子：

var myFn = function () {console.log('mm');
};myFn(); //mmvar myFn = function () {console.log('nn');
};myFn(); //nn

在看下这个：

function myFn() {console.log('mm');
};
myFn(); //nnfunction myFn() {console.log('nn');
};
myFn(); //nn

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

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

　　第一种情况：

var myFn = function () {console.log('nn');
}
myFn();  // nnfunction myFn() {console.log('mm');
}
myFn(); // nn

　　第二种情况：

function myFn() {console.log('mm');
}
myFn(); // mmvar myFn = function () {console.log('nn');
}
myFn(); // nn

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

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

看一下，下面的一段的代码执行情况，检验一下：

myFn();
function myFn() {console.log('mm');
}
myFn();
var myFn = function () {console.log('nn');
}

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

下面我们在介绍一种，在函数内部的变量提升（先看一段代码）

function myFn(a) {var a = 2;console.log(b);console.log(a);var b = 0 ;
}
myFn(1);  // undefined 2

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

转载于:https://www.cnblogs.com/wxb-it/p/6931248.html

JavaScript中函数的变量提升问题相关推荐

JavaScript 中的 Hoisting (变量提升和函数声明提升)
如何将函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) ...
浅聊JavaScript中的Hoisting(变量提升)
一直有写博客的想法但因为懒惰等各种情况没有付出实际行动,择日不如撞日,那就今天让我给大家简单归纳总结一下JavaScript中的Hoisting(变量提升)吧! 1.对于变量 //variablesc ...
JavaScript(三)——函数、变量作用域、方法
文章目录 1. 函数 2. 变量的作用域 3. 方法 4. 内部对象 4.1 Date 4.2 JSON 4.3 Ajax 1. 函数在JavaScript中,函数即对象,可以随意地被程序操控,函数 ...
JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
JavaScript中函数的三种定义方法
JavaScript中函数定义的三种方法. 函数的三种定义方法分别是:函数定义语句.函数直接量表达式和Function()构造函数的方法.下面依次介绍这几种方法具体怎么实现. 1. 函数定义语句 // ...
JavaScript中函数作为另一个函数的参数的时候它存在于哪个作用域
一直对函数作为参数被传递进另外一个函数理解的不是很清除.先看下这段代码吧: function test(fn){var bar = 1;fn(); } var bar = 99; test(funct ...
JavaScript中函数的length属性
JavaScript中函数的length属性 length是函数的一个属性函数的length是js函数对象的一个属性,函数的length代表形参的个数(即有多少必传参数) 形参的数量不包括不包括剩余 ...
JavaScript中函数里的arguments属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
Javascript中函数提升和变量提升
词法分析词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数再分析变量的声明分析函数说明具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active ...

JavaScript中函数的变量提升问题

JavaScript中函数的变量提升问题相关推荐

最新文章

热门文章