js(四):提升

timg.jpg

看到这里,我相信你已经知道了作用域的概念了,以及根据声明的位置和方式将变量分配给作用域的相关原理了。函数作用域和块作用域的行为是一样的,可以总结为:任何声明在某个作用域内的变量,都将附属于这个作用域。

首先我们上个例子

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

function foo(){
 console.log(2);
}

如果你还不知道答案或者不确定,那我相信下面的内容一定会让你有收获。首先我们来回顾一下作用域的一些知识,引擎会在解释JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明,并用合适的作用域将它们关联起来。也就是词法作用域的核心,所以包含所有声明的变量或者声明的函数在执行之前都会先被处理。

var a=1;
比如声明一个变量并赋值为1,表面上看只是一个声明,实际上。js会看处理成两个声明,var a和a=1,第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。

var a     //编译阶段
a=1      //代码执行阶段

也就是变量和函数感觉在执行之前已经被处理过了,这个过程就好像变量和函数声明从它们在代码中出现的位置被“移动”到了最上面。这个过程就叫作提升。但是要牢牢记住:只有被声明的函数或者变量才会被提升,也就是只有声明本身会被提升,而赋值或其他运行逻辑会留在原地等待代码执行。那有个疑问?就是变量提升了,为什么值回事undefined,而函数提升了,确实整个函数都有值。

foo()    //1
function foo(){
    console.log(1);
}
console.log(a);   //undefined
var a=1;

实际上,函数声明和变量声明都会被提升。但是一个值得注意的细节(这个细节可以出现在有多个“重复”声明的代码中)是函数会首先被提升,然后才是变量。这里引进一个新的概念,执行上下文:每次当引擎执行到可执行代码的时候,就会进入一个创建一个执行上下文。我们可以理解为,执行上下文就是代码的执行环境,会形成一个作用域。

首先在这个执行上下文的创建阶段和代码执行阶段

创建阶段,会创建变量对象,建立作用域链,以及确定this的指向。

首先我们需要理解下变量对象(Variable Object)VO,可以这样理解,变量对象就是相当于一个容器,它会做几件事情

1).创建arguments对象。搜索当前上下文中的参数,确定该对象下的属性与属性值。

2).检查当前上下文的function关键字声明的函数,找到之后给当前那个函数赋予一个引用,该引用指向该函数所在内存地址的引用,如果函数名的属性已经存在过,那么该属性将会被最新新的引用所覆盖。之后继续检查当前上下文中的var 变量声明,每找到一个变量声明,就在变量对象中给变量一个属性,属性值为undefined。如果存在同名属性,为了防止同名的函数被修改为undefined,则会直接跳过,原属性值不会被修改。

这种形式也就是为什么变量声明和函数声明中,函数声明会比变量声明要提前,也就是函数优先。

代码执行阶段:变量对象会变成活动对象(Active Object)AO,此时会做几件事情:变量会进行赋值,函数引用,执行其他代码

当然,这里要注意函数参数的提升,实际上函数参数是一个隐式的提升和赋值操作。

function foo (a){
   //函数参数进行隐式赋值    var a ;  a=2;
   console.log(a);
}
foo(2);

下面在看下代码就知道为什么会那样执行了。

foo();   //在变量对象创建阶段,也就是代码执行之前,foo已经有了自己在内存空间的函数引用了,所有函数会执行  输出  1
function foo(){
   console.log(1);
}
console.log(a);  //在变量对象创建阶段,就是代码执行之前,变量对象找到var a;并且赋予a一个属性值,该值为undefined;所有输出  undefined
var a=1;
console.log(a)    //代码执行阶段,完成变量赋值,所以会输出 1.
foo(); // 3      //尽管重复的var 声明会被忽略掉,但出现在后面的函数声明还是可以覆盖前面的。
function foo() {
     console.log( 1 );
}
var foo = function() {
    console.log( 2 );
};
function foo() {
    console.log( 3 );
}

当然啦,我们只是讨论提升的知识,至于this之类的,后面我们再来讨论。 留下几道练习给可以试一试看掌握的程度怎么样

console.log(a);
var a=1;
console.log(a);
function a(){
   console.log(2)
}
console.log(a);
function foo(a){
   console.log(a);
   var a=1;
   console.log(a);
}
foo(2);

欢迎访问我的个人网站zhengyepan
学习笔记,时间匆忙,欢迎交流,还有很多遗漏的知识点,以后会去深入交流~

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

推荐阅读更多精彩内容

  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 1,044评论 0 3
  • 1,javascript 基础知识 Array对象 Array对象属性 Arrray对象方法 Date对象 Dat...
    Yuann阅读 881评论 0 1
  • 原文:http://dmitrysoshnikov.com/ecmascript/javascript-the-c...
    jaysoul阅读 465评论 0 0
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,191评论 0 4
  • 二胎政策放开之后,很多妈妈们都跃跃欲试的想凑成一个“好”字,不管最终是否达成心愿,在未来一定是非常希望两个孩子相亲...
    一佑妈妈阅读 470评论 2 1