函数声明之function与var

原创 2017年01月03日 14:30:53

    纸上得来终觉浅,绝知此事要躬行。

    软件这行业,很多东西还是要靠敲代码敲出来的,你以为看书看的很通透,例子也能做出来的东西,一需要深入混合运用顿时觉得懵逼了。关键还是在于一知半解,不够深入。

    今天我就总结一下近段时间遇到并纠结过的一些知识。

    老规矩,由浅入深,用发散性思维思考每个知识点。


一、声明一个函数 function与var

1.function

aaa();    //先调用
function aaa(){    //后声明
    //code
}

js是按顺序执行,但是这里却可以先调用再声明

其原因是,js解析器都是找到function声明,然后开始上下文执行,

所以函数已经提前被声明,只是我们代码顺序显示在后

要点,此时需要声明与调用在同一作用域(作用域不同时请看后文)


2.var

var aaa = function(){    //先声明
    //code    //后调用
};

这里就是通常的解析过程,当解析器开始执行上下文之前,aaa是undefind(并未声明),

只有上下文执行到var aaa = function。。。这句话时,aaa才被声明并且当场赋值


例子1

function something() { 
  return 'hello';
}

alert(something());  //??这里会返回什么

function something() {
  return 'world';
}
分析一下,首先js解析器会先找到functioin声明,然后根据js特性后面会覆盖前面,

再执行上下文,所以这里会输出    world


例子2

var something = function() { 
  return 'hello';
}

alert(something());  //??这里会返回什么

function something() {
  return 'world';
}
分析过程,

1.找到function声明,function something(){}

2.执行上下文,var something;

3.执行上下文,赋值给something,成功覆盖前面的something

4.输出    hello


    剩下一些var function的位置自行脑补然后按以上思路解决,

    记住,虽然内部解析有这样的小差别,但是在外部看是一样的,如果你用typeof测试something(),两种返回的都是function

    然后我们再往深入思考,要是function声明时,与调用不在一个作用域时,what happened?


这种情况只要抓住一条重点,看作用域链

例子3

var scope = "global"; 
function f( ) { 
    console.log(scope); 
} 
var a = function(){
    f();
};  
a();

顺着作用链,f先被声明,然后执行上下文,scope赋值,接着执行函数a,a调用已声明函数f,

f调用同一用域链外部变量scope,所以输出    global


例子4

var ga = 'global';
var func = function() {
  var la = 'local';
 return function() {
    return function()
    {
      return function()
      {
        alert(la);alert(ga);
      }
    }
 }
 
}
a = func()()()();
根据作用域链,层层调用,所以输出    

local

global


然后就在弄清这些知识点时,我又发现另一个不曾注意的新知识点:

变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的

请看一下两段代码:

var scope="global";  
function f(){   
    console.log(scope);  
    var scope="local"; 
    console.log(scope);  
}  
f(); 

输出:

undefind

local


var scope="global";  
function f(){   
    console.log(scope);  
    scope="local";  
    console.log(scope);  
}  
f();  

输出

global

local


第一段代码比第二段多了一个var,结果大大不同

简单点理解,就是上面讲解var的时候,解析器先把var声明成undefind

所以第一段代码可以写为

var scope="global";  
function f(){   
    var scope;
    console.log(scope);  
    scope="local"; 
    console.log(scope);  
}  
f();  




版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014168594/article/details/53994220

Javascript 函数声明 的优先级 高于 变量声明的优先级,但 不会 覆盖变量赋值

一段代码及输出如下: b = c; b(); console.log(a); //1 console.log(b); //2 console.log(c); //3 funct...
  • wy818
  • wy818
  • 2015-10-19 11:21:26
  • 3626

js里声明函数有几种方式? var abc = function(x){} 和 function abc(x){} 这两种声明方法有什么不同?

先后者是指函数声明,前者是指函数表达式,他们之间的区别是后者会在代码执行之前被JS解释器加载到作用域中,这样一来就可以在编程时在定义函数之前调用这个函数,此法是有效的;而前者则是在代码执行到那一行时候...
  • Alecor
  • Alecor
  • 2017-02-27 18:15:38
  • 1163

JavaScript 中定义函数时用 var foo = function () {} 和 function foo() 的区别

作者:严肃 链接:https://www.zhihu.com/question/19878052/answer/32361868 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业...
  • u013766398
  • u013766398
  • 2016-06-23 17:29:24
  • 1632

JavaScript中变量声明有var和没var的区别

本文来论述JavaScript中变量声明有var和没var的区别,关于Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 在函数内部,有var和没var声明的变...
  • GregOfNeu
  • GregOfNeu
  • 2014-09-14 21:34:09
  • 560

从一道面试题谈js函数声明

爱奇艺前端面试题有个题目如下:a(); function a(){ console.log('a'); }b(); var b = function(){ console.log('b...
  • WKY_CSDN
  • WKY_CSDN
  • 2017-05-15 16:33:14
  • 437

深入理解变量声明提升和函数声明提升

变量声明提升 1、变量定义 可以使用var定义变量,变量如果没有赋值,那变量的初始值为undefined。 2、变量作用域 变量作用域指变量起作用的范围。变量分为全局变量和局部变量。全...
  • qq673318522
  • qq673318522
  • 2016-03-05 20:51:02
  • 11577

Nodejs找不到static方法

问题解决方法参考链接:http://stackoverflow.com/questions/24346161/nodejs-connect-cannot-find-static 这个问题是我在学习...
  • hnllc2012
  • hnllc2012
  • 2015-09-07 10:07:06
  • 1351

JavaScript几种函数声明方式的区别

函数声明方式  1.函数声明方式  其语法为:  Java代码   function 函数名(参数1,参数2,...){       //要执行的语句   }   例1:  Jav...
  • ll641058431
  • ll641058431
  • 2016-08-25 23:58:48
  • 5216

函数声明和变量声明存在优先级吗?

上几张图:第一个:声明了变量a,当预解析时,它的值为undefined,再声明了函数a,然后输出一下,发现a  输出为整个函数,所以暂且认为函数声明会高级一点,声明了a变量和a函数,弹出a的值为4,但...
  • weixin_40197429
  • weixin_40197429
  • 2018-03-14 23:32:18
  • 20

js中var aaa=function(){...} 和 function aaa(){...}区别

在JS中有两种定义函数的方式, 1是var aaa=function(){...} 2是function aaa(){...} var 方式定义的函数,不能先调用函数,后声明,只能先声明函数,然后调用...
  • crl2518528
  • crl2518528
  • 2016-11-02 17:38:03
  • 2114
收藏助手
不良信息举报
您举报文章:函数声明之function与var
举报原因:
原因补充:

(最多只允许输入30个字)