javaScript 函数提升

在同一个<script../>元素内，javaScript允许先调用函数，然后再后面再定义函数，这就是典型的函数提升：javaScript会将全局函数提升到<script../>元素的顶部定义

例如：

<script type="text/javascript">

//调用add函数

console.log(add(2,5));

//定义add函数（会发生函数提升）

function add(a,b)

{

console.log("执行add函数");

return a+b;

}

</script>

上面代码先调用add()函数，然后再定义add()函数，这段javaScript代码完全正常执行。这是因为javaScript会将add()函数提升到<script.../>元素的顶部，也就是说，上面这段脚本和下面代码的效果是一样的

<script type="text/javascript">

//定义add函数

function add(a,b)

{

console.log("执行add函数");

return a+b;

}

//调用add函数

console.log(add(2,5))

</script>

如果使用程序先定义匿名函数，然后将匿名函数赋值给变量，在这种方式下依然会发生函数提升，但此时只是提升被赋值的变量，函数定义本身不会提升。例如如下代码。

<script type="text/javascript">

//调用add函数

console.log(add(2,5));

//定义add函数，此时只提升add变量名，函数定义不会被提升

var add= function(a,b)

{

console.log("执行add函数")；

return a+b;

}

</script>

上面脚本中粗体字代码先定义了一个匿名函数，然后将该匿名函数赋值给add变量。对于使用这种方式定义的函数，javaScript将只提升add变量，将add变量提升到<script.../>元素的顶部，但函数定义本身并不会提升

使用浏览器执行就会显示如下错误

局部函数会被提升到所在函数的顶部，实例如下：

<script type="text/javascript">

function test(){

//调用add函数

console.log(add(2,5));

//定义add函数（会发生函数提升）

function add(a,b)

{

console.log("执行add函数");

return a+b;

}

}

test();

</script>

上面javaScript代码在test()函数中定义了一个局部函数add(),javaScript会将该add()函数提升到test()函数的顶部，因此上面程序完全可以先调用add函数，然后再定义add()函数

同理，如果程序先定义匿名函数，然后将匿名函数赋值给局部变量，那么javaScript将只提升该局部变量的变量定义，不会提升函数定义本身。例如如下代码

<script type="text/javascript">

function test(){

//调用add函数

console.log(add(2,5));

//定义add函数函数，此时只是提升add变量名，函数定义不会被提升

var add= function(a,b)

{

console.log("执行add函数");

return a+b;

}

}

test();

</script>

上面javaScript代码在test()函数中定义了一个匿名函数，然后将该匿名函数赋值给局部变量add，此时程序只是将该add变量提升到test()函数顶部，并不会提升函数定义本身，因此程序先调用add()函数将会导致错误。

需要指出的是，如果匿名函数被赋值的变量没有使用var声明，那么该变量就是一个全局变量，因此该匿名函数将会变成一个全局函数，例如如下代码：

<script type="text/javascript">

function test(){

//定义add函数函数，此时只是提升add变量名，函数定义不会被提升

add = function(a,b)

{

console.log("执行add函数");

return a+b;

}

}

test();

//test()函数执行之后，该函数内定义的add变成全局函数

console.log(add(2, 5));

</script>

上面程序在test()函数内定义了匿名函数，该匿名函数被赋值给add变量，但由于该变量并未使用var声明，因此该变量是一个全局变量，test()函数被调用之后，add函数就变成全局可用的函数。使用浏览器执行上面的代码，可以看到如下输出

javaScript编程时，应该尽量避免变量名和函数名同名，否则会发生互相覆盖的情形。从实际测试结果看来，这种覆盖可分为两种情况。

定义变量时只使用var定义变量，不分配初始值，此时函数的优先级更高，函数会覆盖变量。

定义变量时为变量指定了初始值，此时变量的优先级更高，变量会覆盖函数。

下面代码测试了函数与变量相互覆盖的情形。

<script type="text/javascript">

function a(){

}

var a;//定义变量，不指定初始值

console.log(a);//输出a的函数体

var b;//定义变量，不指定初始值

function b(){

}

console.log(b);//输出b的函数体

var c=1;//定义变量，并指定初始值

function d(){

}

console.log(c);//输出1

function d(){

}

var d=1;//定义变量，并指定初始值

console.log(d);//输出1

上面代码开始分别定义了名为a、b的函数和变量，由于定义变量a、b时并未指定初始值，因此不管这些变量放在同名的函数之前还是之后，变量都会被函数覆盖；代码接下来定义了名为c、d的函数和变量，由于定义变量c、d时还指定了初始值，因此不管这些变量放在同名的函数之前还是之后，变量都会覆盖函数。

js将函数赋值给变量后该怎么使用

在编写代码的时候，我们有些时候回碰上这种情况，有人会将一个函数赋值给一个变量，这个时候我们该怎样去调用这个函数呢？

下面就让我们用代码说话。

首先我们将一个函数赋值给一个变量

然后我们在按钮中添加单击事件，并通过变量来调用这个函数

最后我们来看一下效果

以上就是js将函数赋值给变量后该怎么使用的详细内容，更多请关注网站的其它相关文章！