从上周开始,我所在的学习小组正式开始了angular的学习,angular是全面支持es6的,所以语法上和以前的angular有了很大的不同,比如变量声明时就抛弃了var,而选择了let和const;记得刚开始学习js的时候,使用webstrom时用var,webstrom会在下面画一条小绿线,表示这个用法,问题不大,但是有点问题。因为webstrom推荐使用最新的标准,之后问过学长,他说这是es6的语法,暂时不用管,防止浏览器不兼容。

终于,现在到了学习es6的时候。

const与let

const就是定义一个常量,即一个无法改变的量。

而let是一个更完善的var,以前的var是不完善的,他定义的变量是以函数为范围,而不是正常编程语言中的以一个大括号为范围,比如:

  for(var i=0;i<10;i++){
var a = 'a';
} console.log(a); // a

打印a时仍然会打印'a',若是一个没接触过js的人肯定会大吃一惊,这就是一个最简单的变量提升的例子。而let就解决了这个问题。它定义的变量就是块级的。

变量提升与函数提升

上面已经说了一个变量提升的最简单的例子,下面介绍一下为什么:

通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理

下面来说说函数提升,同样的,让我们先看个例子:

function hoistFunction() {
foo(); // output: I am hoisted function foo() {
console.log('I am hoisted');
}
} hoistFunction();

函数可以在声明之前就可以调用,这是因为引擎是把函数声明整个地提升到了当前作用域的顶部,预编译之后的大概代码如下:

function hoistFunction() {
function foo() {
console.log('I am hoisted');
} foo(); // output: I am hoisted
} hoistFunction();

总结

变量提升和函数提升可以远比上面那个例子复杂,但对我们意义并不大,毕竟对于变量已经有了完善的let定义方法,而函数提升,在能不用的情况最好不用,毕竟他是不规范的,学习这个,只是为了以后看到相关代码时能够看懂,否则,看这种代码时肯定一脸懵逼。
(另外说一句,函数提升是专门设计的,有其特殊用途,而变量提升纯粹是设计语言时的失误,但两者都应该少用,毕竟都不规范,想要详细了解,可以点这里

原文地址:https://segmentfault.com/a/1190000017025533

js中的变量提升和函数提升的更多相关文章

  1. Js中有关变量声明和函数声明提升的问题

    在ECMAScript5中没有块级作用域一说,只有函数作用域和全局作用域,在其中声明的变量和函数和其他语言的展现形式不同,在某些情况下不一定需要先定义后使用,函数和变量的使用可以在其声明之前,这到底是 ...

  2. js中变量提升和函数提升

    变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...

  3. JS 变量提升与函数提升

    JS 变量提升与函数提升 JS变量提升 变量提升是指:使用var声明变量时,JS会将变量提升到所处作用域的顶部.举个简单的例子: 示例1 console.log(foo); // undefined ...

  4. js变量提升与函数提升的详细过程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. JS——变量提升和函数提升

    一.引入 在了解这个知识点之前,我们先来看看下面的代码,控制台都会输出什么 var foo = 1; function bar() { if (!foo) { var foo = 10; } aler ...

  6. 谈谈javascript中的变量提升还有函数提升

    在很多面试题中,经常会看到关于变量提升,还有函数提升的题目,所以我就写一篇自己理解之后的随笔,方便之后的查阅和复习. 首先举个例子 foo();//undefined function foo(){ ...

  7. JS逻辑题 技术点: 1). 变量提升 2). 函数提升 3). 预处理 4). 调用顺序

    考查的技术点:  1). 变量提升 2). 函数提升  3). 预处理  4). 调用顺序 var c = 1; function c(c) { console.log(c); var c = 3; ...

  8. JavaScript系列文章:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  9. JavaScript:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

随机推荐

  1. PHP实现并发请求

    后端服务开发中经常会有并发请求的需求,比如你需要获取10家供应商的带宽数据(每个都提供不同的url),然后返回一个整合后的数据,你会怎么做呢? 在PHP中,最直观的做法foreach遍历urls,并保 ...

  2. 【AIM Tech Round 5 (rated, Div. 1 + Div. 2) B】Unnatural Conditions

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 让a+b的和为100000000...0这样的形式就好了 这样s(a+b)=1<=m就肯定成立了(m>=1) 然后至于s ...

  3. 如何计算合适的InnoDB log file size

    原文链接:http://www.mysqlperformanceblog.com/2008/11/21/how-to-calculate-a-good-innodb-log-file-size/ Pe ...

  4. 设置编码格式为utf8

    response.setCharacterEncoding("UTF-8"); 在Servlet2.3中是不行的,至少要2.4版本才可以,如果低于2.4版本,可以用如下办法: re ...

  5. 编程算法 - 求1+2+...+n(模板类) 代码(C++)

    求1+2+...+n(模板类) 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 求1+2+...+n, 要求不能使用乘除法\for\whil ...

  6. AOP经典2种配置演示样例

    第一种: 使用aop指定切面aspect. <bean id="LogAdvice" class="com.thinkmore.framework.monitor. ...

  7. Yarn架构基本概况(二)

    在概况(一)中,主要简单的对Yarn的情况作了简单的介绍,今天花一定时间在某些详细的模块上呈现下面Yarn的总体情况.帮助大家更好的理解Yarn. 1)ResourceManager 在Yarn的总体 ...

  8. iOS 使用脚本自动化复制target

    有些项目成熟以后,就会有需求自动化配置生成一个全新的项目,不需要再让开发人员手动修改工程文件,将配置化工作直接移交给运维或者配置团队去做 其实按照普通的做法,无非就是在xcode里将目标target ...

  9. Android之弹出菜单框【注冊上下文菜单】

    注冊上下文菜单:(长按弹出一个菜单) 第一种创建方法(与长按事件结合): public class MainActivity extends Activity { private TextView u ...

  10. TOMCAT虚拟路径配置

    在tomcat安装好后,只要把你的web项目copy到%TOMCAT_HOME%webapp下面就可以是使用啦!!其实还有种方法就是设定虚拟目录,即把项目的目录映射到tomcat中.这样做即可以不用重 ...