了解javascript中变量及函数的提升

javascript中变量以及函数的提升，在我们平时的项目中其实还是挺常用的，尤其是大型项目中，不知不觉就会顺手添加一些变量，而有时候自己的不小心就会酿成一些不必要错误，趁有时间整理一下自己对于js中变量及函数提升的理解。

首先，看一个题目：

console.log(a); // undefined
var a = 1;
console.log(a); // 1
console.log(b());
function b(){return 2;} // 2
console.log(c) //报错
let c = 4;
console.log(d()) // 报错
var d = function(){return 3;} // 报错
(function(){
var m = n = 1;
})()
console.log(m) //报错
console.log(n) // 1

上面的实例对于javascript变量及函数提升的可谓是淋漓尽致...

一、javascript 变量的提升

-函数及变量的声明都将被提升到函数的最顶部

-变量可以在使用后声明，也就是变量可以先使用再声明

敲黑板，划重点，是变量的声明，声明，声明，当变量或函数已经初始化之后，就不会提升到函数的最顶部。这里上面的变量a已经初始化了，所以第一个console取不到变量a得值，为undefined；

注意：变量的提升只会提升到当前作用域下

二、javascript函数的提升

而函数b仅仅是先声明了一个函数方法，函数c是函数表达式无法提升，所以在严格模式下b=2；d报错

对于m,n，这里就涉及到javascript作用域的问题

首先，var m = n = 1的执行顺序是什么？并不是我们大多数人心中所想的连续赋值，javascript的赋值是从右向左的，而是 n=1;var m = n;很好，一目了然，在函数作用域内的变量m=n，n是全局变量，最后严格模式下输出结果，n=1，m报错；

三、关于es6两个关键字——let和const

let 声明的变量只在 let 命令所在的代码块内有效，不存在变量的提升

const 声明一个只读的常量，一旦声明，常量的值就不能改变。一旦声明必须初始化，否则就会报错

来个对比很明显的栗子（完美的体现出let命令只在代码块内有效的意思）：

{
let test = 2;
var web = 'font';
}
console.log(test); // 报错
console.log(web); // font

再次回到上面的题目，c就是报错的

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。

var PI = "a";
if(true){
console.log(PI); // 报错，即使函数外面全局声明了PI，但在代码块内还是会报错
const PI = "3.1415926";
}

以上，就是关于javascript中变量提升的理解。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈JS和jQuery的区别

    浅谈JS和jQuery的区别

    一.本质上的区别 1.JavaScript 是通过标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言. 2.JQuery是一个JavaScript函数库.或者说是JavaScript. 使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如: 库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度.另外一个好处是显而易见的,

  • 通过jQuery学习js类型判断的技巧

    通过jQuery学习js类型判断的技巧

    1. isFunction中typeof的不靠谱 源码: var isFunction = function isFunction( obj ) { // Support: Chrome <=57, Firefox <=52 // In some browsers, typeof returns "function" for HTML <object> elements // (i.e., `typeof document.createElement( &quo

  • JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】

    本文实例讲述了JS(jQuery)实现聊天接收到消息语言自动提醒功能.分享给大家供大家参考,具体如下: 综述 最近在开发一个网页端的客服系统,需求要求聊天双方接收到消息能有语音提醒,并且客服端如果存在未读消息要求每隔五分钟给客服语音提醒一下.客服聊天系统使用PHP的Workerman框架进行开发,由于语音提醒实现的功能一样,故而在本篇博文中从简描述,只进行定时循环提醒的功能记录,不说实时的那个语音提醒,因为思路都是一样的,主要是看如何实现自动播放语音功能. 思路 实时提醒 这个就比较明确了,就是

  • 了解javascript中变量及函数的提升

    javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中变量及函数提升的理解. 首先,看一个题目: console.log(a); // undefined var a = 1; console.log(a); // 1 console.log(b()); function b(){return 2;} // 2 console.log(c) //报错

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • JavaScript中变量提升与函数提升经典实例分析

    本文实例讲述了JavaScript中变量提升与函数提升.分享给大家供大家参考,具体如下: 从两个实例说起: eg1: var i; console.log(i); // 2 eg2: console.log(i); // undefined var i = 2; 1.提升 变量和函数声明从它们在代码中出现的位置被提升到了最上面. 注意: 只有声明本身会被提升,而赋值操作不会被提升. 变量会提升到其所在函数的最上面,而不是整个程序的最上面. 函数声明会被提升,但函数表达式不会被提升: func1(

  • JavaScript中变量提升和函数提升的详解

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函数提升 3. 为什么要进行提升 4. 最佳实践 那么,我们就开始进入主题吧. 1. 变量提升 通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理.(注:当前流行的JS引擎大都对源码进行了编译,由于引擎的不同,编译形式也会有

  • JavaScript中变量提升和函数提升实例详解

    js 执行 词法分析阶段:包括分析形参.分析变量声明.分析函数声明三个部分.通过词法分析将我们写的 js 代码转成可以执行的代码. 执行阶段 变量提升 只有声明被提升,初始化不会被提升 声明会被提升到当前作用域的顶端

  • JavaScript中变量提升 Hoisting

    JavaScript中变量提升 Hoisting

    因为我在写这文章的时候,百度里找资料,找到了园友的一篇文章,写的很好,可是我写了又不想放弃,所以就在里面拿了很多东西过来!~~ [翻译]JavaScript Scoping and Hoisting希望得到大家谅解. 一.案发现场 我们先看一段很简单的代码: 复制代码 代码如下: var v='Hello World'; alert(v); 这个没有疑问吧,弹出"Hello World".OK,我们继续. 我们在看一段Code: 复制代码 代码如下: var v='Hello Worl

  • 深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域

    匿名函数:没有实际名字的函数. 匿名函数的作用: 1.通过匿名函数可以实现闭包,关于闭包在后面的文章中会重点讲解.在这里简单介绍一下:闭包是可以访问在函数作用域内定义的变量的函数.若要创建一个闭包,往往都需要用到匿名函数. 2.模拟块级作用域,减少全局变量.执行完匿名函数,存储在内存中相对应的变量会被销毁,从而节省内存.再者,在大型多人开发的项目中,使用块级作用域,会大大降低命名冲突的问题,从而避免产生灾难性的后果.自此开发者再也不必担心搞乱全局作用域了. 本章节重点给大家介绍JavaScrip

  • 深入认识javascript中的eval函数

    1)介绍javascript中的eval函数的用法 (2)如何在函数内执行全局代码 ►先来说eval的用法,内容比较简单,熟悉的可以跳过. eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法"{}"并不能返回一个值,需要用括号括起来才会返回值,简单示例如下: 复制代码 代码如下: var code1='"a" + 2'; //表达式 var c

  • JavaScript中变量声明有var和没var的区别示例介绍

    本文来论述JavaScript中变量声明有var和没var的区别,关于Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (function(){ // ... })(); 在函数内部,有var和没var声明的变量是不一样的.有var声明的是局部变量,没var的,声明的全局变量,所以可以借此向外暴露接口东东. 在全局作用域内声明变量时,有var 和没var看起来都一样,我们知道,声明的全局变量,就是window的属性,究竟是否一样,我们通过ECMAScrpit5提供

  • JavaScript中利用构造器函数模拟类的方法

    前言 本文小编带大家一起学习的是在 JavaScript 中使用构造器函数(construcor function)模拟类.下面话不多说,感兴趣的朋友们下面来一起看看吧. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统的构造器函数来模拟类,因为这样可以给人一种你是个 JavaScript 老手的错觉,哈哈! 什么是构造器函数?构造器函数是编写对象的方法之一.一般情况下,你可以这样编写一个对象: var obj = { a:1, b:2 }; 但也可以使用

随机推荐