Day3--js--可恶之变量声明提升大法.。。

1.首先大家看一下下面的代码，判断下会输出什么结果：

var foo = 1;
function bar() {if(!foo) {var foo = 10;}alert(foo);
}
bar();//10

你是否会疑惑条件语句if(!foo)并不会被执行呀，为什么foo会被赋值为10.

再来看看第二个例子：

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

3.Javascript作用域

让我们先来看一下Java中的一个例子：

public int result() {int x = 1;System.out.println(x);  //1if(true) {int x = 2;System.out.println(x);  //2
    }System.out.println(x);  //1
}

因为在Java中，我们有块级作用域(block-level scope)。在一个代码块中的变量不会覆盖掉代码块外面的变量。

我们不妨试一下在Javascript中的表现：

var x = 1;
console.log(x);  //1
if(true) {var x = 2;console.log(x);  //2
}
console.log(x)  //2

因为Javascript是一种函数级作用域(function-level scope)，

那么在Javascript中，我们怎么实现一种块级作用域的效果呢？答案是闭包：

function foo()　｛var x = 1;if(x) {(function () {var x = 2;}());}x is still 1.
｝

4.Javascript变量提升

我们注意到，变量x的定义被移动到函数的最顶部，在bar()后，再对其进行赋值。
再来看一个栗子，下面这两段代码其实是等价的：

function foo() {if(false) {var x = 1;}return;var y = 1;
}

function foo() {var x,y;if(false) {x = 1;}return;y = 1;
}

我们都知道，创建一个函数的方法有两种，一种是通过函数声明function foo() {},
另一种是通过定义一个变量 var foo = function() {}

来看下面的栗子：

function test() {foo();  //Type error, foo is not a functionbar();  //will alert 'bar'var foo = function() {alert('foo');}function bar() {alert('bar');}
}
test();

1.我们需要重点注意的是，只有函数声明形式才能被提升。
变量赋值并没有被提升，只是声明被提升了。但是，函数的声明有点不一样，函数体也会一同被提升

function test3() {fn();function fn() {log("我来自fn");    }}test3();function test4() {fn(); // fn is not a functionvar fn = function fn() {alert("我来自 fn  test4");}}test4();

  var n =10; function test (){console.log(n);var n = 20;console.log(n)}test()//undefined 20

1 function text6() {2   function a() {}3   var a;4   log(a);                //打印出a的函数体5 6   var b;7   function b() {}8   log(b);                 //打印出b的函数体 9
10   // ！注意看，一旦变量被赋值后，将会输出变量
11   var c = 12
12   function c() {}
13   log(c);                 //12
14
15   function d() {}
16   var d = 12
17   log(d);                //12
18 }
19 text6();

tt ="ee";function b(){function test(){alert(tt);var tt ="ff"}test()}b()//undefined

    tt ="ee";function b(){function test(){var tt;alert(tt);tt="ff"}test()}b()//undefined

console.log(b)function b(){console.log(2);
}
console.log(b)//最后输出两次b函数结构

var age = 10;
function test(){console.log(age)
}
test()//10

function test(){var age = 10;function inner(){var age = 20;console.log(age);//20
    }inner();console.log(age);//10
}
test()

8.未完待续....

转载于:https://www.cnblogs.com/moonzwt/p/9445793.html

Day3--js--可恶之变量声明提升大法.。。相关推荐

ES5和ES6中的变量声明提升
ES5和ES6中的变量声明提升 Example1: a=2; var a; console.log( a ); //结果为2 Example2: console.log( a ); //结果是unde ...
函数声明和变量声明提升
var a; // 声明一个变量,标识符为a function a() { // 声明一个函数,标示符也为a } alert(typeof a); 显示的是"function",即 ...
php变量声明提升,TypeScript：let和const变量声明
在开始介绍let和const变量声明前,有必要先了解下JavaScript里的var变量声明. var变量声明全局声明 var声明在函数体外,所声明的变量为全局变量.var name = " ...
Js 变量声明提升和函数声明提升
Js代码分为两个阶段:编译阶段和执行阶段 Js代码的编译阶段会找到所有的声明,并用合适的作用域将它们关联起来,这是词法作用域的核心内容包括变量声明(var a)和函数声明(function a(){ ...
javascript变量声明提升(hoisting)
http://openwares.net/js/javascript_declaration_hoisting.html 可能要FQ一下 javascript的变量声明具有hoisting机制,Jav ...
php变量声明提升,JavaScript 变量提升
JavaScript 变量提升 JavaScript 中,函数及变量的声明都将被提升到函数的最顶部. JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明. 以下两个实例将获得相 ...
html5前端开发培训机构，JavaScript变量声明提升
学习路线第一阶段:网页制作 HTML:常用标签,锚点,列表标签,表单标签,表格标签,标签分类,标签语义化,注释,字符实体 CSS:CSS介绍,全局样式,行内样式,内联样式,选择器,字体样式值,文本样 ...
JS变量（声明）提升和函数声明提升
目录一.概念理解 1.变量声明提升 2.函数声明提升(又叫函数提升) 变量提升和函数提升的优先级小结: 一.概念理解变量提升:在当前作用于中,js代码自上而下执行之前,浏览器会把所有带var/f ...
JS中函数和变量声明的提升
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

Day3--js--可恶之变量声明提升大法.。。

Day3--js--可恶之变量声明提升大法.。。相关推荐

最新文章

热门文章