foo:function(){}与function foo(){}还有foo=function()三者间的区别

首先要分清楚的是:
第一种其实是定义了一个名为foo的属性,然后给这个属性赋了一个匿名函数(function就是这个匿名函数的定义),也只能在一个定义好的方法或者类中才行,因为其相当于定义的是一个属性。第二种和第三种都是自定义了一个名为foo的函数,是在任何地方都可以创建使用的,一般定义在一个文件中或者是另外一个方法的内部方法。
而后两者的区别在于,因为后者是定义了一个属性,因此其在编译后,只是将其名称作为一个属性提前了,但是其中的方法体是没有被编译提前的,因为其在运行的时候,是在调用的时候才会对其方法体进行编译,但是前者是在编译的时候就完全被解析了,不管是名称还是方法体都是被提前了的,还有比较重要的一点是:
借用知乎上一位博主的例子:

function hereOrThere() { //function statement
  return 'here';
}

alert(hereOrThere()); // alerts 'there'

function hereOrThere() {
  return 'there';
}

我们会发现alert(hereOrThere) 语句执行时会alert(‘there’)!这里的行为其实非常出乎意料,主要原因是JavaScript 函数声明的“提前”行为,简而言之,就是Javascript允许我们在变量和函数被声明之前使用它们,而第二个定义覆盖了第一种定义。换句话说,上述代码编译之后相当于

function hereOrThere() { //function statement
  return 'here';
}

function hereOrThere() {//申明前置了,但因为这里的申明和赋值在一起,所以一起前置
  return 'there';
}

alert(hereOrThere()); // alerts 'there'

再看下面一个例子:

var hereOrThere = function() { // function expression
  return 'here';
};

alert(hereOrThere()); // alerts 'here'

hereOrThere = function() {
  return 'there';
};

这里就是我们期待的behavior,这段程序编译之后相当于:

Var hereOrThere;//申明前置了

hereOrThere = function() { // function expression
  return 'here';
};

alert(hereOrThere()); // alerts 'here'

hereOrThere = function() {
  return 'there';
};

作者:严肃
链接:https://www.zhihu.com/question/19878052/answer/32361868
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

猜你喜欢

转载自blog.csdn.net/csdn_duanjiao2016/article/details/78337545
foo