js变量提升小记
作为世界上最优美的语言javascript的使用者,呵呵,js的魅力是无穷的,今天来聊聊他的魅(dan)力(teng)之一,变量提升。
每种语言所定义的变量基本都会有一定得作用域,而js的作用域则存在着一定的陷阱。首先看一下下面一道题:
<script>
var str1 = "haha";
var str2 = "hehe"; function t1() {
console.log(str1);
console.log(str2); var str2 = "kidding";
console.log(str2);
} t1(); </script>
结果是:
haha
undefine
kidding
纳尼?hehe哪去了?结果不应该是:haha hehe kidding吗?
实际上这里就有一个变量提升的问题。如果函数写成这样,你可能就一目了然了
<script>
var str1 = "haha";
var str2 = "hehe"; function t1() {
var str2;
console.log(str1);
console.log(str2); str2 = "kidding";
console.log(str2);
} t1();
</script>
实际上js在解析的时候正是按照这样的执行顺序进行的,在执行到t1内部的时候,会优先找到函数内部作用域里的变量执行,而且函数内的所有var 声明function声明都会被提到函数体的最上方执行。并且var 声明会先声明之后,执行到赋值的时候再赋值。
再看下面的例子:
<script>
function t(userName) {
console.log(userName); function userName() {
console.log('tom');
}
}
t('toby');
</script>
由于function声明会被提前到函数体最上方,所以相当于这样:
function t(userName) {
function userName() {
console.log('tom');
}
console.log(userName);
}
t('toby');
结果很明显是:
function userName(){
console.log('tom');
}
但是像下面这样的函数表达式,则会把var t2进行提升,而后再对t2进行赋值
<script>
test(); var test = function () {
console.log('hello toby');//这里会输出什么?
};
</script>
解析后变成:
<script>
var test ;
test(); test = function () {
console.log('hello toby');//这里会输出什么?
};
</script>
由于执行到test()的时候,test还是一个undefine所以代码会报错。
但是变量提升只是在该变量在改作用域内从未出现的时候才会发生。看下面的题:
<script>
function t(userName) {
console.log(userName);// (1)
var userName = function () {
console.log(userName);//(2)
}
userName();//(3)
}
t('haha');
</script>
如果按照刚才所说的变量提升,可能会认为结果是:
(1) 处为undefine
(2)处是
function () {
console.log(userName);//(2)
}
实际上结果是:(1)处输出的是haha ,原因在于执行到t函数内部的时候,userName这个变量在传参的时候在这个内部作用于内已经存在了,所以不会进行变量提升,而是直接使用已经
存在的userName='haha'。(2)执行(3)的时候userName就是一个function了,所以(2)处的结果就一目了然了。 自己的一番拙见,如有不对,还望指出。
参考链接:http://www.jianshu.com/p/43bf4f2e0d57?from=singlemessage
js变量提升小记的更多相关文章
- js 变量提升+方法提升
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS 变量提升与函数提升
JS 变量提升与函数提升 JS变量提升 变量提升是指:使用var声明变量时,JS会将变量提升到所处作用域的顶部.举个简单的例子: 示例1 console.log(foo); // undefined ...
- js变量提升与函数提升的详细过程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- JS变量提升和作用域
一.JS变量提升 1.当浏览器引擎解析js代码时,将js中的所有一开始就是var声明的和function声明的都提升到全局.此时又叫全局作用域 console.log(aa); console.log ...
- js变量提升的坑
关于js变量提升 变量提升 在js函数内部是可以直接修改全局的变量的,个人感觉是不好的设计, 但是确实存在这个概念 原理: 先查看有没有函数变量bb 查看形参有没有bb 查看全局有没有bb 报错, 找 ...
- js 变量提升和函数提升原理
关于js的变量,开始的时候我们都会被告知,变量声明应该在引用该变量之前.关于为什么要这样做呢,开始的时候本着会用就行的目的,也没去深究.不过后来经常会发现一些让人很费解的..姑且称为现象吧.先看一段代 ...
- 关于JS变量提升的一些坑
function log(str) { // 本篇文章所有的打印都将调用此方法 console.log(str); } 函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部 变量声明.命名 ...
- JS 变量提升
var a = 1; function foo() { console.log(a); var a = 2; } foo(); //undefined 根据变量提升机制,最后得出undefined; ...
- js变量提升与函数提升
在es6之前,js语言并没有块级作用域,即{}形成的作用域,只有全局作用域和函数作用域,所谓的提升,即是将该变量的声明或者函数的声明提升,举个例子 console.log(global); //und ...
随机推荐
- thinkphp5基础
前面的话 ThinkPHP是一个免费开源的,快速.简单的面向对象的轻量级PHP开发框架,是为了敏捷WEB应用开发和简化企业应用开发而诞生的.ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持 ...
- springboot小技巧(转)
一些springboot小技巧.小知识点 初始化数据 我们在做测试的时候经常需要初始化导入一些数据,如何来处理呢?会有两种选择,一种是使用Jpa,另外一种是Spring JDBC.两种方式各有区别下面 ...
- MVC+EF 入门教程(三)
一.前言 上一节,我们将了生成数据库,那么这张我就将操作设计库. 二.在 Aplication 定义服务 在 Application 中添加文件夹(Blog)和 操作类(BlogServer).实例如 ...
- 图片验证码(Struts2中使用)
写在前面: 最近在项目中做了一个登录页面,用到了图片验证码的功能,所以记录一下.方便之后再有用到,直接拿来用即可.其实图片验证码的生成都是有固定步骤的,网上也有很多的例子,有的时候,如果不想深究,都是 ...
- JavaScript中DOM节点层次Text类型
文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...
- JavaScript类型比较
JavaScript的类型 原始类型: number string boolean null undefined 对象类型: Object function Array Date ... 隐式转换 + ...
- 使用Libmicrohttpd搭建内嵌(本地)服务器
Libmicrohttpd简介 GNU Libmicrohttpd是一个用来在项目中内嵌http服务器的C语言库,它具有以下几个非常鲜明的特点: C语言库,小而快. API非常简单,且都是可重入的. ...
- 如何安装mysql
如何安装mysql对于初学者来说的确是很麻烦,首先要知道安装mysql仅仅只是安装一个mysql系统,是没有任何可视化操作界面的,所以还要安装一个mysql的管理工具,这是初学者容易蒙的地方之一. m ...
- ArcGIS API for JavaScript 4.2学习笔记[12] View的弹窗(Popup)
看本文前最好对第二章(Mapping and Views)中的Map和View类有理解. 视图类有一个属性是Popup类型的popup,查阅API知道这个就是视图的弹窗,每一个View的实例都有一个p ...
- bzoj 4446: [Scoi2015]小凸玩密室
Description 小凸和小方相约玩密室逃脱,这个密室是一棵有n个节点的完全二叉树,每个节点有一个灯泡.点亮所有灯 泡即可逃出密室.每个灯泡有个权值Ai,每条边也有个权值bi.点亮第1个灯泡不需要 ...