javascript变量作用域与声明提升-唐霜

首先，我承认这篇文章是看了原创内容，盗版必究。这篇文章【原创不易，请尊重版权】后才写出来的。【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

迅雷面试题【版权所有】唐霜 www.tangshuang.net

【本文受版权保护】【未经授权禁止转载】【转载请注明来源】【原创不易，请尊重版权】【原创不易，请尊重版权】

今天在参加迅雷的面试的时候，第一道题就把【未经授权禁止转载】【原创内容，转载请注明出处】我难住了，原题是这样：

// 请写出每一个alert的结果var a = 100;
function fun() {
  alert(a);
  var a = 200;
  alert(a);
}

fun();
alert(a);

var a;

alert(a);
var a = 200;
alert(a);

变量的作用域【原创不易，请尊重版权】

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【本文首发于唐霜的博客】

这在我上一篇文章已经讨论过了，这里就直接【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。给出一个结论。javascript中，变【版权所有，侵权必究】【本文首发于唐霜的博客】量的作用域不是块级的，而是以functi原创内容，盗版必究。【本文首发于唐霜的博客】on为单位。所谓块级，就是{}花括号括起【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。来为一块，以function为单位，就是著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】指变量的作用域上限就是当前所在的函数。

var a = 100;
function fun() {
  var a = 5;
  alert(a);
}

alert(a);
fun();

for(i = 0;i < 5;i ++) {
  var a = i;
}

alert(a);

上面这段代码中，用一个for后面的{}来原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。演示块级区域，虽然在for{}中重新声明本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】了a，但是实际上，这个a作用域仍然为全局转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。环境，它该变了最初的a的值，因此，末尾的【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】alert(a)结果为4。但是在fun(【未经授权禁止转载】【本文受版权保护】){}中，var a 的作用域是当前函数转载请注明出处：www.tangshuang.net【转载请注明来源】，因此，函数内的alert(a)是5。

ES6标准新增了let和const两种声【本文受版权保护】著作权归作者所有，禁止商业用途转载。明关键词，这样和var一起，就使得jav【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ascript有三种变量声明形式，每种声【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】明形式声明的变量作用域不同，新标准不再局【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。限于函数级。举个例子：
著作权归作者所有，禁止商业用途转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。【本文受版权保护】
const a = 6;function fun() {
  var b = 9;
  for(let b = 2;b --;) {
    alert(b);
  }
  a = 5;
  alert(a);
  alert(b);
}
fun();
a将永远是6；b则不同，在fun()内是【未经授权禁止转载】【转载请注明来源】9，但是当进入到for{}以后是2，退出本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】for{}之后，又变回9。也就是说用co【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。nst声明的变量不再是变量，而是常量，和【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。PHP里面的define、const是一原创内容，盗版必究。【本文首发于唐霜的博客】样的。let声明的变量只在当前块级区域内【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。有效，也就是for{}的两个花括号范围内原创内容，盗版必究。原创内容，盗版必究。有效，出了花括号又无效了。
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【转载请注明来源】

变量的声明提升【作者：唐霜】

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。原创内容，盗版必究。

当对变量的声明出现在了相同作用域的靠后的【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net位置的时候，变量的声明被自动提升到作用域本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。开头。

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【本文受版权保护】

我们一般在声明变量的时候，会这样操作：【转载请注明来源】

var a = 100;

实际上，这个动作完成了三件事：声明一个变本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。量，定义这个变量的数据类型，赋值（初始化【关注微信公众号：wwwtangshuangnet】【转载请注明来源】）。

【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

那么当这个动作出现在同一个作用域的靠后的【原创不易，请尊重版权】原创内容，盗版必究。位置，javascript会把代码解释为本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。什么情况呢？

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

alert(a);
var a = 100;

上面这段代码，实际上会被按照下面这个顺序【本文受版权保护】【原创内容，转载请注明出处】解释：

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。

var a;
alert(a);
a = 100;

所以，alert(a)的结果是undef本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ined。所谓变量声明提升，就是被声明动【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。作如果发生在靠后的位置，会被自动提升到作未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。用域的最前面。下面来举例复杂的例子：

var a = 100;
alert(a);
var a = 200;
alert(a);
function fun2() {
   alert(a);
   var a = 3;
}
fun2();
alert(typeof a);

var a = function() {}
alert(typeof a);

上面这段代码中，出现了多个var a对a【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net变量进行声明，这个时候，我们要去区分，每转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。一个a的作用域，然后对每一次声明进行提升本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】，最终得到的结果如下：

【作者：唐霜】未经授权，禁止复制转载。未经授权，禁止复制转载。

var a;
var a;
var a; // 最终会被合并为一个var a;

a = 100;
alert(a);

a = 200;
alert(a);

function fun2() {
  var a;
  alert(a);
  a = 3;
}

fun2();

alert(typeof a);

a = function(){}
alert(typeof a);

这样，你就可以非常清楚的看到每一个ale原创内容，盗版必究。【原创内容，转载请注明出处】rt出现的时候，a的内容了。

隐式提升本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

var foo; 
alert(typeof foo); 
function foo(){}

这时alert返回的结果是undefin【版权所有，侵权必究】转载请注明出处：www.tangshuang.neted还是其他什么呢？实际上，结果是fun【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】ction，为什么呢？因为functio【作者：唐霜】【未经授权禁止转载】n foo;声明将被提升，我们把代码解释【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】为：

function foo;
var foo;
alert(typeof foo);
foo = function(){}

实际上，使用function声明一个函数本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。时，也发生了变量提升，函数名即为变量名，【原创内容，转载请注明出处】【本文首发于唐霜的博客】变量的数据类型被定义为function，【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。这和普通的var声明不同，普通的var只本文作者：唐霜，转载请注明出处。【作者：唐霜】做声明，没有定义数据类型。在上面这段解释未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。代码中，var foo;和functio【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】n foo;发生了冲突，因为前者没有定义【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】foo的数据类型，后者定义了数据类型。在【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】这种冲突的情况下，前面的所有声明会被后者覆盖【访问 www.tangshuang.net 获取更多精彩内容】。（var声明未对变量做任何定义，因此f转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。oo的数据类型还是function）

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【作者：唐霜】

这种function被声明提升的形式被成【本文受版权保护】【未经授权禁止转载】为hoisting（隐式提升的声明）。因【作者：唐霜】本文版权归作者所有，未经授权不得转载。此，function a(){}和var【作者：唐霜】【本文首发于唐霜的博客】 a = function(){}是不同转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。的，他们声明的方式不同，在声明时的数据类【作者：唐霜】【原创不易，请尊重版权】型就不一样，所以，下面的代码出现了奇怪的转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】现象：

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

alert(typeof f1); // undefined
alert(typeof f2); // function

var f1 = function(){}
function f2(){}

你需要尝试去解释上面这段代码，然后就可以本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。清楚的找到原因了。这也是为什么我们在写j【原创内容，转载请注明出处】【本文首发于唐霜的博客】avascript的时候，可以把所有需要【版权所有】唐霜 www.tangshuang.net【本文受版权保护】用到的函数放到代码的末尾，而普通用var著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。声明的变量必须在你用到它之前进行定义（以【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】及赋值，因为在javascript中，第【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】一次定义就是初始化，而只有在赋值的时候，转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。才会被定义）。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

1、语言内置：所有的作用域中都有 thi【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】s 和 arguments 关键字2、形原创内容，盗版必究。原创内容，盗版必究。式参数：函数的参数在函数作用域中都是有效未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。的3、函数声明：形如function f【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。oo() {}4、变量声明：形如var 【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。bar;

下面举个例子：【本文首发于唐霜的博客】

function fun(a) {
  var b = 100;
  function go() {}
  ...
}

原创内容，盗版必究。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

fun -> this,argum【作者：唐霜】本文作者：唐霜，转载请注明出处。ents -> a -> g【转载请注明来源】【转载请注明来源】o -> b
【版权所有】唐霜 www.tangshuang.net【作者：唐霜】著作权归作者所有，禁止商业用途转载。

在遇到fun(){}时，首先this,a【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netrguments这些javascript转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】内部定义的关键字会在作用域中生效，然后，【版权所有】唐霜 www.tangshuang.net【作者：唐霜】fun的形式参数a，也紧接着在作用域中声未经授权，禁止复制转载。【本文首发于唐霜的博客】明，再接着就是作用域内的function【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。声明的变量会被声明，最后才轮到普通的局部原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net变量被声明。但是声明归声明，在其后面的运著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】行过程中，这些声明还是可以被覆盖的，比如

function fun(a) {
  var b = 100;
  alert(typeof b);
  function b() {}
}
fun(1);

你可以看到alert的结果是number未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】，按照上面提到的顺序，javascrip【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.nett解释时会把function b放在va【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netr b的前面，而var b = 100;转载请注明出处：www.tangshuang.net原创内容，盗版必究。经过了定义，因此数据类型也发生了变化。

转载请注明出处：www.tangshuang.net【未经授权禁止转载】【本文首发于唐霜的博客】原创内容，盗版必究。转载请注明出处：www.tangshuang.net

隐示提升与加载调用的区别【原创不易，请尊重版权】

转载请注明出处：www.tangshuang.net【作者：唐霜】本文作者：唐霜，转载请注明出处。

【未经授权禁止转载】原创内容，盗版必究。未经授权，禁止复制转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

<a href="javascirpt:" onclick="btn.clickCancel();">cancel</a>
<script>
var btn = {
  clickCancel : function(){
    // ...
  },
  // ....
};
</script>

你会发现，即使在定义btn之前使用btn【本文受版权保护】本文作者：唐霜，转载请注明出处。.clickCancel()，程序是仍然原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。有效的。这是什么原因呢？实际上，在<【本文首发于唐霜的博客】【本文受版权保护】;a>标签的onclick属性中去【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】调用btn并不冲突，<a>标原创内容，盗版必究。【未经授权禁止转载】签的onclick事件是在DOM加载完才【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】生效，而DOM加载完时，所有的javas【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。cript声明和初始化都已经完成，btn【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net变量已经在内存中存在了。

delete本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

在javascript中，我们使用del【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netete来删除某一个变量或属性，比如：

a = 10;
delete a;
alert(a); // undefined

但是，那些变量或属性可以被delete删【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】除呢？哪些又不可以呢？这是一个比较复杂的本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。问题，可以阅读一下这篇文章【版权所有】唐霜 www.tangshuang.net。我自己总结下来，就是凡严格声明的变量不转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】能被delete删除，非严格声明的可以删【本文受版权保护】【版权所有】唐霜 www.tangshuang.net除。我们来通过演示了解：

【转载请注明来源】著作权归作者所有，禁止商业用途转载。【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

// 变量
var a = 10;
b = 12;

delete a;
delete b;

alert(a);
alert(b);

function fun() {
  var a = 10;
  b = 12;
  delete a;
  delete b;
  alert(a);
  alert(b);
}
fun();

eval("var x = 1;");
alert(x);
delete x;
alert(x);

上面这段代码，我们用来演示一个变量被de本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】lete的情况，你会发现，凡是用var进著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。行严格声明的，都不能被删除，没有var声本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。明的，会被删除。什么叫严格声明呢？就是e【作者：唐霜】未经授权，禁止复制转载。val()中声明的var x不算严格声明【版权所有，侵权必究】未经授权，禁止复制转载。，因此delete x;成功了。

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【未经授权禁止转载】

// 删除函数
function fun() {}
delete fun;
alert(typeof fun);

window.fun1 = function(){}
alert(typeof fun1);
delete fun1;
alert(typeof fun1);

// 删除属性
var object = {
  name : 'xx00'
}
element = {
  name : 'xxxx'
}

delete object.name;
delete element.name;

alert(object.name);
alert(element.name);

function Cat() {
  this.name = 'tom';
  this.age = 10;
}
Cat.prototype.weight = 12;Cat.prototype.sing = 'wawa~';

var cat1 = new Cat();
delete cat1.name;
delete cat1.weight;
alert(cat1.name);
alert(cat1.weight);

在我们以前的文章中讲过，javascri【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。pt一切都是对象，因此，其实我们很多问题原创内容，盗版必究。【版权所有，侵权必究】都要回归到对象这个核心概念来看。在这段演著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net示代码中，object.name和ele未经授权，禁止复制转载。未经授权，禁止复制转载。ment.name都被删掉了，无论obj原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ect前面是否用var加以声明，都不会对本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】object.name产生什么影响。其实未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。这是比较容易理解的，对object的声明【未经授权禁止转载】【本文首发于唐霜的博客】会让object无法被delete，而o著作权归作者所有，禁止商业用途转载。【作者：唐霜】bject的属性并并没被严格声明，而且在【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。javascript里面并没有类似 ob本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ject = {var name : &【本文受版权保护】未经授权，禁止复制转载。#8216;xxx’}这样的未经授权，禁止复制转载。【未经授权禁止转载】写法，所以，可以说，单纯的对象属性，大部本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net分都是可以被删除的，而唯独通过proto【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。type赋予（声明）的属性，不能被删除。

【本文受版权保护】【本文受版权保护】原创内容，盗版必究。【未经授权禁止转载】

现在再重新来思考著作权归作者所有，禁止商业用途转载。

【转载请注明来源】【原创内容，转载请注明出处】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

b = 10;
window.fun = function(){};
object.name;

你就会发现，但凡没有声明的变量，实际上都本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。是某个对象的属性，比如这里的b = 10【本文受版权保护】【未经授权禁止转载】;实际上就是window.b = 10，【原创不易，请尊重版权】未经授权，禁止复制转载。未经声明的属性都可以被删除。

【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【转载请注明来源】【转载请注明来源】

注意：ES6带来了一些新的变化，严格模式【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。”use strict【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。221;下，变量不声明会报错，程序终止；【原创内容，转载请注明出处】未经授权，禁止复制转载。delete不能再删除变量，因此也会报错【转载请注明来源】转载请注明出处：www.tangshuang.net，终止程序。
【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【转载请注明来源】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【本文受版权保护】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【本文受版权保护】原创内容，盗版必究。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。原创内容，盗版必究。未经授权，禁止复制转载。原创内容，盗版必究。【未经授权禁止转载】【版权所有，侵权必究】原创内容，盗版必究。原创内容，盗版必究。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【转载请注明来源】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。

2016-04-17 4925

唐霜

javascript变量作用域与声明提升