Rumah >hujung hadapan web >tutorial js >JavaScript的提升行为及原理分析

JavaScript的提升行为及原理分析

黄舟
黄舟asal
2017-02-28 14:43:13996semak imbas

对于刚刚学习JavaScript的同学,可能它的一些行为让你感到疑惑 

和你在学校学过的C/C++差很多
比如说这样的情况

a = 1;var a;console.log(a);// 1

有些同学可能会认为应该是undefined才对,因为var a看起来好像给a重新赋值了
再如这样的情况

console.log(a);// undefinedvar a = 1;

a还没声明就打印,应该是报错才对啊,或者参考上面浏览器的行为而应该输出2啊
然而结果却是undefined

你所见的代码顺序,并不一定是js引擎真正执行的顺序
这就是我今天要谈的JavaScript提升行为
其实写这篇文章就是对预编译知识的补充
看之前如果还不了解预编译的同学戳下面
JavaScript预编译
JavaScript的预编译直接导致了它的提升行为

提升行为

其实了解了预编译我们可以很清晰的理解为什么
执行前发生了预编译
所以执行这两个代码块时相当于执行这样的代码

var a;a = 1;console.log(a);// 1
var a;console.log(a);// undefineda = 1;

对于这个提升行为,记住这样两句话
变量声明提升,函数声明整体提升
再次强调,

function demo(){….}这才叫做函数声明 
var demo = function(){….}这不叫函数声明

其实只要明白预编译原理,提升行为很容易理解

我们习惯把 var a = 1 看做一个声明
可是js引擎却不这么认为,它会把它拆成var = a声明 与 a = 1初始化
并且第一个是编译阶段的任务,第二个是执行阶段的任务
所以无论你的声明出现在作用域的什么地方,都会在执行前提前处理
这就等价于,变量声明和函数声明移动到了作用域的最顶端
这个过程被称为提升

我们在编程的过程中千万不要声明重复的变量,更不要把函数和普通变量声明为相同的名字
顺便一提,把变量用一个var声明在作用域顶端是个好习惯(单一var原则)
这样也不用担心什么提升行为了

实例分析

虽然如此,这个过程我们还是要理解,同样是面试题的重点
还是老套路举例子来看看吧

function a(a, b){
    console.log(a);    console.log(c);
    c = 0;    console.log(b);
    var c;
    a = 3;
    b = 2;    console.log(a);    console.log(c);    console.log(b);    function b(){};
    console.log(b);
}
a(1);

不知道大家看蒙没,一堆abc
正确答案是:

1   undefined    function b(){}    3    0    2    2

我们先从预编译来分析吧,顺便复习一下

  1. 创建AO对象(Active Object)

  2. 查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined

  3. 实参形参相统一,实参值赋给形参

  4. 查找函数声明,函数名作为AO对象的属性,值为函数引用

最后函数a执行前产生的AO对象大概这样

//伪代码AO->{
    a: 1
    b: function(){}
    c: undefined}

于是就相当于执行这样一个函数
(函数名为a跟里面的变量并不冲突)

function a(){    var a = 1;    var b = function(){};    var c;

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

于是我们很轻松得到了答案

如果有一个变量声明和一个函数声明重名了
一定是函数声明覆盖变量声明(JavaScript函数是第一公民各种特权)
如果一个变量声明与另一个变量声明同名
或一个函数声明与另一个函数声明同名
那就是谁在文档下面谁优先

总结

以上就是今天给大家分享的JavaScript提升行为
总结为两句话:变量声明提升,函数声明整体提升
实际上是js引擎预编译所导致的必然行为

以上就是JavaScript的提升行为及原理分析的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn