js中的作用域与变量提升和函数提升

一、什么是提升(Hosting)?

// 引擎会在解释JavaScript代码之前首先对其进行编译,

**// 编译过程中的一部分工作就是找到所有的声明,**

**// 并用合适的作用域将他们关联起来,这也正是词法作用域的核心内容。**

**// 简单说就是在js代码执行前引擎会先进行预编译,**

**// 预编译期间会将变量声明与函数声明提升至其对应作用域的最顶端。**

二、变量提升

       a = 2;

       var a;

       console.log(a)                



       console.log(a);      

           var a = 2

**// 按照JS代码的执行顺序应该是从上到下一行行的执行的,真的是这样吗??其实这不是完全正确的。**

**// 正确的思路是,包括变量,函数在内的所有声明都会在任何代码在执行前首先被处理。**

**// 当你看到var a = 2 时你可能会理解成这是一个声明,**

**// 但JS在执行时实际上会将其看成两个声明 var a 和 a = 2**

**// 第一个var a 是在代码的编译阶段执行的。**

**// 第二个赋值声明 a = 2 会被留在原地等待执行阶段来执行**

   在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),

只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。

        console.log(good); // undefined

        var good = 'good';

        console.log(good); // good

       // function fn() {

       //     console.log(a); // undefined

       //     var a = 'aaa';

       //     console.log(a); // aaa

       // }

       // fn()

之所以会是以上的打印结果,

    是由于js的变量提升,实际上上面的代码是按照以下来执行的:

  var good; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值

   console.log(good); // undefined

  good= 'good

  console.log(good); // 打印出good

       function fn() {

        var a; // 变量提升,函数作用域范围内

        console.log(a);

       a = 'aaa';

           console.log(a);

       }

       fn();

三、函数提升

**//   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 () { }

**例二:**

   foo();

   function foo(){

  console.log("aaa");

  }

结果输出: aaa  原理:函数声明提升 (函数声明提升直接把整个函数提到执行环境的最顶端)

相当于:

function foo(){

console.log("aaa");

}

foo();

变量提升只提升函数名 而函数提升会提升整个函数  注意:函数提升在变量提升上面。

**例三:**

foo();

var foo = function(){

console.log("aaa");

}

运行结果是: foo is not a function

相当于;

var foo;

console.log(foo);  //undefined

foo(); //foo is not a function

foo = function(){

console.log("aaa");

}

上面代码输出undefined 是因为变量提升后并没有赋值因此输出undefined

输出foo is not a function 原因是:js解析遇到 foo()时会默认当做函数来解析

**例四:**

console.log(foo);

var foo=10;

console.log(foo);

function foo(){

console.log(10);

}

console.log(foo);

输出为:

相当于:

function foo(){

console.log(10);

}

var foo;

console.log(foo);

foo=10;

console.log(foo);

console.log(foo);

函数提升在变量提升上面,第一个console.log(foo);为什么会输出函数题呢,原因在于 var foo; 并未有赋值只是声明,因此他会调用上面的值

总结:关于变量提升,一定要注意细心思考一下,还有就是要牢记,函数提升在变量提升之上

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,013评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,205评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,370评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,168评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,153评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,954评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,271评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,916评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,382评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,624评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,209评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2 345

推荐阅读更多精彩内容