js 声明函数(函数创建)详解
一般我们在写JavaScript的时候,都喜欢先命名一个空函数(如代码1),我感觉这样会消耗一些性能,而且代码写得还多了。其实可以直接声明想要写的函数,不用先声明一个空函数(如代码2)。
javascript定义函数(声明函数)可以有三种方法:正常方法、构造函数、函数直接量。
最简单的声明javascript函数的方法和我们其他编程语言没有区别,function(param){}
代码如下 | |
function myFunction() { 代码2 var myObject = { |
如果函数不包含return 语句,只执行函数体内语句,并返回undefined
构造函数方法:new Function();
代码如下 | |
|
上面的代码可能很简单大家会看不明白,下面我们接着看。
首先看一下JavaScript最常见的四种函数定义:
1.用Function构造函数定义的函数,代码如下:
代码如下 | |
var multiply = new Function('x', 'y', 'return x * y;'); |
2.函数声明,这种方式也是最为常见的一种:
代码如下 | |
function multiply(x, y) { return x * y; } |
3.函数表达式,声明为匿名函数然后赋值给一变量,很常见的方式:
代码如下 | |
var multiply = function(x, y) { return x * y; } |
4.函数表达式,但是函数声明为命名函数再赋值给一变量,长得跟上一种方式真像:
代码如下 | |
var multiply = function multi(x, y) { return x * y; } |
首先比较一下函数名,以及将函数赋值给的那个函数变量直接的关系,真绕……直观一点儿,从刚刚的例4说吧,就是multiply这个函数变量与multi这个函数名的关系:
代码如下 | |
◦函数名是不能够被修改的,相反的,函数变量是可以重新被赋值的。函数变量可以被重新赋值应该很好理解,我们第4个例子刚刚定义的multiply这个变量,看它不顺眼,重新赋值为: |
立马摇身一变,从乘法变成加法了。但是multi这个函数变量想变就是不可能的了,函数定义已经在那儿了,只要还保留这它的引用,它就是不会变的,可能这里不大好理解,先这样想着,往下看,慢慢就应该能理解了。
◦函数名同时是无法在函数外部使用的,它只在函数体内部可见,一个很简单的例子:
代码如下 | |
var foo = function bar() { alert('hello'); } foo(); // 提示“hello”字符串 bar(); // 执行报错,bar未定义 |
和明显,这里的bar确实是一个函数名,但是它确实不能在外部调用。这时候肯定会有童鞋问干嘛这个例子还是长得那么乖,和例4一个样,怎么不用例2的方式呢?问得好,且听我慢慢分解。
◦继续说例4,我们可以看见函数名(multi)和函数变量(multiply),本不相同,其实两者根本就没有任何关系,因此没有保持一致的必要。说到这儿,我想上面4个例子应该可以精简到3个,例2和例4本质应该是一致的。什么,不信?嘻嘻,我还得继续卖关子哈~继续读下去~~
我们发现例2和例4相比,只不过少了var的函数变量,而例3与例4相比,只不过少了那个函数名,这里从现象上看,例2和例4的本质是相同的,铁证如下:
代码如下 | |
function foo() {} alert(foo); |
// 提示依然只包含“foo”的函数名,和bar半毛钱关系都没有
的确是铁证吧?上面的类似例2的代码结合起来写是不是就成例4的方式了?正确,这就是我刚刚所说的两者本质应该相同,只是用例2方式定义函数的时候,JS引擎帮我们做了一些事情,比如声明了函数名为multiply的函数,同时还悄悄定义了一个也叫multiply的变量,然后赋值给这个变量,两个完全一样的名字,我们自以为在使用函数名multiply的时候,实际是在用multiply这个函数变量,晕了吧~说实话,我也晕了~~总之我们调用的时候,实在用函数变量调用,而函数名是无法在外部调用函数的,因此有了我上述的推断。
但是这里要提到的一个小小的差别,函数声明方式定义的函数,与构造函数声明的或者函数表达式声明的不同之处在于,函数声明方式的函数可以在函数定义之前就调用……不说了,还是看代码:
代码如下 | |
foo(); // 提示Foo |
再说说构造函数声明的函数,这样声明的函数是不会继承当前声明位置的作用域,它默认只会拥有全局作用域,然而这个是其他几种函数声明方式也一样有的,如下:
代码如下 | |
function foo() { var hi = 'hello'; //return function() { // alert(hi); /
相关文章 |