console.log(a); //Uncaught ReferenceError: a is not defined

因为没有定义a所以报错了。

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

有定义a,并且给a赋值了52所以打印a就是52。

console.log(a); //undefined
var a = 52;

虽然有定义a但是打印却在变量a的前面,那为什么不是报错而是打印出来的是undefined?因为在js执行代码之前,js会先获取到所有的变量并且把这些变量放置到js代码的顶部。(简称变量声明提前)

实际上,上面的代码是这样执行的:

var a;
console.log(a);

所以代码出来的就是undefined,那你是不是会疑问?我们给赋值给a的52到哪去了。虽然我前面说了js会事先获取所有的变量并且将这些变量放置到顶部,但是变量的赋值并不会事先执行,也就是说,你在哪声明的变量,这个变量的赋值就在哪执行。

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

虽然声明了但没有赋值所有undefined

console.log(a);
function a(){
  this.user = "追梦子";
}

为什么,可以事先就打印出函数a呢?因为函数的赋值在函数声明的时候就已经赋值了,结合上面我说的变量提前,那是不是就可以理解这句话了?

当然这只是一种情况,还有一种情况,稍后说。

function a(){
  this.user = "追梦子";
}
console.log(a);

正常

a(); //Uncaught TypeError: a is not a function
var a = function(){
  console.log(52);
}

为什么现在又不行了?因为现在的函数已经赋值给了变量a,现在它的执行过程和变量一样了,我们通常把这种函数赋值给变量的形式叫做函数表达式。

var a = function(){
  console.log(52);
}
a(); //

正常

if(false){
var a = 1;
}
console.log(a); //undefined

之所以没有报错而是输出了undefined是因为变量存在预解析的情况,又因为js没有块级作用域,所以最后代码就成了这样

var a;
if(false){
a = 1;
}
console.log(a);

总结:

  函数分为:函数声明和函数表达式。

  函数声明--

function a(){
alert("追梦子博客");
}

  函数表达式--

var a = function(){
alert("追梦子");
}

  看似两段相同的语句,它们的执行顺序却截然不同,函数声明时的赋值行为是在函数创建的时候进行的,而函数表达式的赋值行为是在执行这句变量时进行的(因为它已经赋值给了变量所以我这里把它称为变量)。

  不管是变量还是函数都会存在变量声明提前。

来看看几题有意思的js例题,加以理解。

  

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

为什么打印的是undefined?

  我们先来看看它的解析过程:

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

  变量提前了,那为什么不打印全局变量1呢?如果你有这个问题我猜你应该是JavaScript的新朋友,那我建议你看我的上一篇文章:

什么是作用域链,什么是原型链,它们的区别,在js中它们具体指什么?

  在看完作用域链以后我相信你能够看懂这个例子。

我们一起来看看另外一题比较有难度的js面试题:

  

var a = 1;
function b() {
a = 120;
return;
function a() {}
}
b();
alert(a); //1;

  如果你看了上面一题我相信你应该有种不知所措的感觉,这里现在为什么又是1了呢?

我把执行过程的代码写出来我相信你就懂了。

  

var a = 1;
function b() {
var a;
a = 120;
return;
function a() {}
}
b();
alert(a);

  如果你正在js的进阶阶段肯定更闷了,你肯定会想我们不是写return了吗?return后面的代码不是不执行吗?为什么这里却影响了这段代码?

  虽然return后面的代码不会被执行,但是在js预解析的时候(变量提升的时候)还是会把return后面的变量提前,所以我们这段代码因为变量提前所以函数里面的变量a就成了局部变量,因为函数外部是访问不了函数内部的变量所以就输出了1。

  另外提两点,函数的arguments和函数名都是直接赋值的,也就是在这个函数解析的时候就会进行赋值。

  如果你还是不理解建议多看几遍,另外如果你是js的新朋友一定要看什么是作用域链,什么是原型链,它们的区别,在js中它们具体指什么?这篇文章。

js中的执行上下文,菜鸟入门基础。的更多相关文章

  1. 进阶学习js中的执行上下文

    在js中的执行上下文,菜鸟入门基础 这篇文章中我们简单的讲解了js中的上下文,今天我们就更进一步的讲解js中的执行上下文. 1.当遇到变量名和函数名相同的问题. var a = 10; functio ...

  2. 通俗易懂的来讲讲js的函数执行上下文

    0.开场白 在平时编写JavaScript代码时,我们并不会和执行上下文直接接触,但是想要彻底搞懂JavaScript函数的话,执行上下文是我们绕不过去的一个知识点. 1.执行上下文栈 JavaScr ...

  3. JS进阶之---执行上下文,变量对象,变量提升

    一.结构顺序大体介绍 JavaScript代码的整个执行过程,分为两个阶段,代码编译阶段与代码执行阶段. 编译阶段由编译器完成,将代码翻译成可执行代码,这个阶段作用域规则会确定. 执行阶段由引擎完成, ...

  4. js中的执行环境及作用域

    最近在面试时被问到了对作用域链的理解,感觉当时回答的不是很好,今天就来说说js中的作用域链吧. 首先来说说js中的执行环境,所谓执行环境(有时也称环境)它是JavaScript中最为重要的一个概念.执 ...

  5. JS中的执行环境和作用域

    window 是最大最外围的执行环境,然后每个函数都有自己的执行环境.JS代码是从上到下执行的,单纯的用语言描述可能会有点绕,而且不大直观.我们看着代码来 console.log('global be ...

  6. Promise对象及它在js中的执行顺序

    关于Promise对象的学习及它的执行顺序 学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...

  7. js作用域与执行环境(前端基础系列)

    一.作用域(what?) 官方解释是:"一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域." 单从文字理解比较难懂,举个栗子: ...

  8. 在JS中统计函数执行次数与执行时间

    假如想统计JS中的函数执行次数最多的是哪个,执行时间最长的是哪个,该怎么做呢? 1. 统计函数执行次数 2. 统计函数执行时间 3. 如何控制函数的调用次数 4. 如何控制函数的执行时间 一.统计函数 ...

  9. JS中的执行机制(setTimeout、setInterval、promise、宏任务、微任务)

    1.执行机制 JS 是单线程的,处理 JS 任务(程序)只能一个一个顺序执行,所以 JS 中就把任务分为了同步任务和异步任务.同步的进入主线程先执行,异步的进入Event Table并注册函数,当指定 ...

随机推荐

  1. AndroidStudio使用第三方jar包报错(Error: duplicate files during packaging of APK)

    http://www.kwstu.com/ArticleView/android_201410252131196692 错误描述: Error: duplicate files during pack ...

  2. 在线视频转gif动画工具 在线视频转gif动画工具下载

    在线视频转gif动画工具 在线视频转gif动画工具下载 http://www.leawo.cn/space-1723875-do-thread-id-60715.html http://www.lea ...

  3. SQL Developer 4.0 启动报错“unable to create an instance of the java virtual machine located at path”

    安装了Oracle之后,第一件事情就是想想怎么去连接,进而操作.SQL Developer是官方提供的强大工具,个人看来也是第一选择. 目前官网提供的最新版是4.0.1.14.48,下载下来之后,就跃 ...

  4. Lucene 4.X 倒排索引原理与实现: (1) 词典的设计

    词典的格式设计 词典中所保存的信息主要是三部分: Term字符串 Term的统计信息,比如文档频率(Document Frequency) 倒排表的位置信息 其中Term字符串如何保存是一个很大的问题 ...

  5. [SRS流媒体]RTMP/HLS 直播服务器simple-rtmp-server安装

    一个采用MIT协议授权的国产的简单的RTMP/HLS 直播服务器,其核心的价值理念在于简单高效. 使用方法: tep 1: build srs tar xf simple-rtmp-server-*. ...

  6. error while loading shared libraries: /usr/lib64/libc.so.6: invalid ELF header

    在安装一个程序的时候提示libc.so.6过旧,但是查看libc.so的版本是最新的,于是尝试使用尝试软链接  ln -s /usr/lib64/libc.so /usr/lib64/libc.so. ...

  7. Android开发之蓝牙 --修改本机蓝牙设备的可见性,并扫描周围可用的蓝牙设备

    一. 修改本机蓝牙设备的可见性 二. 扫描周围可用的蓝牙设备 一.  清单文件AdroidManifest.xml: <uses-permission android:name="an ...

  8. webstorm 配合IIS使用

    添加名称之后 点击apply 再点击ok 然后在打开设置 就可以配置下图的信息 我们需要在webstorm里面打开IIS部署的地址怎么设置呢? 技术交流QQ群:15129679

  9. HTTP - GET和POST的区别

    网上有很多文章介绍这两种HTTP请求的区别,我也不懂,主要还是看了一些文章,在这里写下一些笔记. 语义不同 在HTTP协议中,最初规定GET是用来查询或者获取资料,只读,POST用于修改数据,可写.因 ...

  10. [玩转微信平台]XML的格式化- 如何去掉XML 文档头和命名空间

    前言 系统要求能够回复微信用户发过来的文本消息.实现中使用的实体对象进行XML的序列化的方式来实现XML消息.   微信平台的回复例子 http://mp.weixin.qq.com/wiki/14/ ...