js 变量、函数提升 与js的预编译有关
参考网址:http://www.codesec.net/view/178491.html
先简单理解下作用域的概念,方便对变量与函数提升的概念的理解
function foo() {
var x = 1;
if (x) {
var x = 2;
}
console.log(x);
}
foo();//
结果为2,可见js中并没有块级作用域的概念
可以使用下面的方法创造自己的作用域,这样不会干扰到外部变量
function foo() {
var x = 1;
if (x) {
(function() {var x = 2;
}());
}
console.log(x);
}
foo();//
结果为1,可见js中的作用域是以函数为边界的
1.变量提升:
变量提升与js的预编译有关,下面通过例子辅助说明
var a = 100;
var b = 200;
function foo(){
console.log(a);// undefined
a = 10;
console.log(a);//
var a = 1;
console.log(a);//
console.log(b);//
}
foo();
js预编译时会先在当前作用域中找到var声明的变量分配空间,赋值为undefined,如果找不到就会到下一级作用域中找
上面的代码的等价代码如下:
var a = 100;
var b = 200;
function foo(){
var a;
console.log(a);// undefined
a = 10;
console.log(a);//
a = 1;
console.log(a);//
console.log(b);//
}
foo();
这样看是不是容易理解多了。第一行var声明了a,但是没有赋值,因此为undefined,下面打印10、1也就顺理成章了。
至于变量b,它在当前作用域中找不到,因此需要到外层作用域中找,在window下找到了变量b,可以看到它的值为200
2.函数提升
首先要明确两点:
<1> 只有函数声明才会进行函数提升
<2> 函数提升会将函数体一起提升上去,这点与变量提升有所不同
下面来证明函数表达式不能进行函数提升:
~function() {
alert(typeof next); // undefined
~function next() {
alert(typeof next); // function
}()
}()
函数前面加个~的目的是将函数声明变成函数表达式,实际上也可以加其它运算符,比如+,-,!等,总之这个函数声明被变成了函数表达式。
从打印结果来看第一个alert出的是undefined,说明next根本没有发生函数提升。
下面来接着验证:
a();//
var a = function(){
console.log(321);
}
a();//
function a(){
console.log(123);
}
从结果可以看出,先打印出来的反而是放在后面的a(),上面代码的等价表示如下:
var a = function a(){
console.log(123);
}
a();
a = function(){
console.log(321);
}
a();
那么如果当变量提升与函数提升同时发生的时候,哪个的优先级更高呢?我们来做个实验:
function fn(){
console.log(a);
var a = 2;
function a(){}
console.log(a);
}
fn();// function a(), 2
从打印顺序中可以看出,函数提升比变量提升优先级高,因为函数提升是将函数体整体提升,提升上去后立马赋值。等价代码如下:
function fn(){
var a = function(){}
console.log(a);
a = 2;
console.log(a);
}
fn();
下面再来几个有趣的例子:
B = 100;
function B(){
B = 2;
console.log(B);
}
B(); // B is not a function
//函数提升导致的 ////////////////////
B = 100;
var B = function(){
B = 2;
console.log(B);
}
B(); //
//函数表达式不存在函数提升 function change() {
alert(typeof fn); // function
alert(typeof foo); // undefined
function fn() {
alert('fn');
}
var foo = function(){
alert('foo');
}
var fn;
}
change();
//fn提升了,foo没有提升
下面还有几个思考题:
1.
var a = 1;
function b() {
console.log(a);
a = 10;
function a() {}
}
b();// ? function a() {}
console.log(a);// ? 1
2.
a = 10;
(function a(){
a = 1;
console.log(a);// ? function b(){a = 1; .....}
})();
这段代码难以理解,测试代码为:
var a = 10;
var b = 20;
(function b(){
a = 1;
b = 2;
console.log(a);// ?
console.log(b);
})(); console.log(a);
console.log(b);
网上有一段解释是这样的(这样的代码太难理解,最好还是函数和变量不要同名):
感觉楼主的理解还不够深入,正确理解应该是经过以下过程: 当进入执行上下文(代码执行之前)时,VO(变量对象)里已经包含了下列属性: 函数的所有形参(如果我们是在函数执行上下文中) — 由名称和对应值组成的一个变量对象的属性被创建;没有传递对应参数的话,那么由名称和undefined值组成的一种变量对象的属性也将被创建。 所有函数声明(FunctionDeclaration, FD) —由名称和对应值(函数对象(function-object))组成一个变量对象的属性被创建;如果变量对象已经存在相同名称的属性,则完全替换这个属性。 所有变量声明(var, VariableDeclaration) — 由名称和对应值(undefined)组成一个变量对象的属性被创建;如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性。
3.
function a(i) {
console.log(i);// ? 10
var i = 1;
console.log(i);// ? 1
};
a(10);
代码分析如下:
function a(i) {
var i;
i = i ; //i是传进来的值
console.log(i);// ? 10
i = 1;
console.log(i);// ? 1
};
a(10);
js 变量、函数提升 与js的预编译有关的更多相关文章
- Js 变量声明提升和函数声明提升
Js代码分为两个阶段:编译阶段和执行阶段 Js代码的编译阶段会找到所有的声明,并用合适的作用域将它们关联起来,这是词法作用域的核心内容 包括变量声明(var a)和函数声明(function a(){ ...
- js中函数提升及var变量提示
其中,在javascript中,函数声明及var声明的变量会得到提升.但是函数声明会先于var声明的变量被提升.即便function写在后面. 看下面的例子: var aa = 221; functi ...
- 【JS】函数提升变量提升以及函数声明和函数表达式的区别
今天看js的变量提升问题,里面提到了函数提升.然后发现自己之前一直把函数声明和函数表达式弄错,导致函数提升出错 一.变量提升 console.log(a) var a=100 //undefined ...
- js变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级
原文出自:http://www.cnblogs.com/xxcanghai/p/5189353.html作者:小小沧海 题目如下: function Foo() { getName = functio ...
- JS变量的提升详解
此次说明的是var与function的变量提升 那么先看一段代码 <script type="text/javascript"> console.log(test); ...
- 解读JavaScript中的Hoisting机制(js变量声明提升机制)
hoisting机制:javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 知识点一:javascript是没有 ...
- js变量声明提升
1.变量提升 根据javascript的运行机制和javascript没有块级作用域这个特点,可以得出,变量会声明提升移至作用域 scope (全局域或者当前函数作用域) 顶部的. 变量声明提升至全局 ...
- 【JavaScript高级进阶】JavaScript变量/函数提升的细节总结
// 测试1 console.log('----------test1--------------'); console.log(global); // undefined var global = ...
- VS中c++文件调用c 函数 ,fatal error C1853 预编译头文件来自编译器的早期版本号,或者预编译头为 C++ 而在 C 中使用它(或相反)
出现错误:error C1853: "Debug\ConsoleApplication1.pch"预编译头文件来自编译器的早期版本号.或者预编译头为 C++ 而在 C 中使用它(或 ...
随机推荐
- PyQt4消息窗口
默认情况下,如果我们单击了窗口标题栏上的X标记,窗口就会被关闭.但是有些时候我们想要改变这一默认行为.比如,我们正在编辑的文件内容发生了变化,这时若单击X标记关闭窗口,编辑器就应当但出确认窗口. #! ...
- js中replace()方法
str.replace(/Microsoft/g, "W3School");//全局替换 str.replace(/Microsoft/, "W3School" ...
- c++11——基于范围的for循环
c++11中有基于范围的for循环,基于范围的for循环可以不再关心迭代器的概念,只需要关系容器中的元素类型即可,同时也不必显式的给出容器的开头和结尾. int arr[] = {1, 2, 3, 4 ...
- 【ecshop】如何解决DEPRECATED: PREG_REPLACE()报错
部署的ecshop 在高版本的PHP环境里边 ,访问 单个店铺时候会报错, 访问文件路径: http://www.test.com/supplier.php?suppId=5 类似这样的报错: D ...
- Go基础---->go的基础学习(四)
这里简单的介绍一下go中的关于多线程的知识. Go中的多线程 一.go中简单的并发例子 package main import ( "fmt" "time" ) ...
- android基础---->Fragment的使用
碎片(Fragment)是一种可以嵌入在活动当中的UI 片段,它能让程序更加合理和充分地利用大屏幕的空间,因而在平板上应用的非常广泛. Fragment的基础例子
- linux主机下的Vmware Workstation配置NAT设置 端口映射-Ubuntu为例
最近折腾虚拟机,由于是在linux下进行的,而相关资料比较少,所以遇到了一些问题. 一个就是配置vmware workstation的NAT设置.因为一般来说,NAT可以共享主机的ip,从而能以主机身 ...
- 【BZOJ1915】[Usaco2010 Open]奶牛的跳格子游戏 DP+单调队列
[BZOJ1915][Usaco2010 Open]奶牛的跳格子游戏 Description 奶牛们正在回味童年,玩一个类似跳格子的游戏,在这个游戏里,奶牛们在草地上画了一行N个格子,(3 <= ...
- Android--aapt命令
1.aapt l[ist] [-v] [-a] file.{zip,jar,apk} 释义:列出压缩文件中的内容 aapt l xxx.apk:简单的罗列压缩文件中每一项的内容 aapt l -v x ...
- opencv学习笔记——FileStorage类的数据存取操作
OpenCV的许多应用都需要使用数据的存储于读取,例如经过3D校准后的相机,需要存储校准结果矩阵,以方便下次调用该数据:基于机器学习的应用,同样需要将学习得到的参数保存等.OpenCV通过XML/YA ...