javascript怎么定义函数

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript怎么定义函数相关的知识，希望对你有一定的参考价值。

1：调用关键字function来构造

   

function distance(x1,x2,y1,y2) 

　 

　　　var dx=x2-x1; 

　　　var dy=y2-y1; 

　　　return Math.sqrt(dx*dx+dy*dy); 

　

   



2：使用Function()构造函数（请注意与上面的大小写）

1

   

var f=new Function*"x","y","return x*y");

   


这行代码创建了一个新函数，该函数和你所熟悉的语法定义的函数基本上时等价的:

1

2

3

4

   

function f(x,y) 

　　 

　　    return x*y; 

　　

   


Functino()构造函数可以接受任意多个字符串参数。它的最后一个参数时函数的主体，其中可以包含任何javascript语句，语句之间用分号分隔。其他的参数都是用来说明函数要定义的形式参数名的字符串。如果你定义的函数没有参数，那么可以只需给构造函数传递一个字符串（即函数的主体）即可。 
　　注意，传递给构造函数Function()的参数中没有一个用于说明它要创建的函数名。用Function()构造函数创建的未命名函数有时被成为“匿名函数”。 
　　你可能非常想知道Function()构造函数的用途是什么。为什么不能只用function语句来定义所有的函数呢？原因是Function()构造函数允许我们动态地建立和编译一个函数，它不会将我们限制在function语句预编译的函数体中。这样做带来的负面影响效应就是每次调用一个函数时，Function()构造函数都要对它进行编译。因此，在循环体中或者在经常使用的函数中，我们不应该频繁地调用这个构造函数。 
　　使用Function()构造函数的另一个原因是它能够将函数定义为JavaScript表达式的一部分，而不是将其定义一个语句，这种情况下使用它就显得比较的方面，甚至可以说精致。


　3：函数直接量 
　　函数直接量是一个表达式，它可以定义匿名函数。函数直接量的语法和function语句非常相似，只不过它被用作表达式，而不是用作语句，而且也无需指定函数名。下面的三行代码分别使用function()语句、Funciont()构造函数和函数直接量定义了三个基本上相同的函数：

1

2

3

   

function f(x)return x*x; 

　var f=new Function("x","return x*x;"); 

　var f=function(x)reurn x*x;

   



在JavaScript1.1中，可以使用构造函数Function()来定义函数，在JavaScript1.2和其后的版本中，还可以使用函数直接量来构造函数。你应该注意这两种方法之间的重要差别。 
　　 
　　首先，构造函数Function()允许在运行时动态地创建和编译JavaScript代码。但是函数直接量却是函数结构的一个静态部分，就像function语句一样。 
　　其次，作为第一个差别的必然结果，每次调用构造函数Function()时都会解析函数体并且创建一个新东汉数对象。如果对构造函数的调用出现在一个循环中，或者出现在一个经常被调用的函数中，这种方法的效率非常低。另一个方面，函数直接量或出现在循环和函数中的嵌套函数不是在每次调用时都被重新编译，而且每当遇到一个函数直接量时也不创建一个新的函数对象。 
　　Function()构造函数和函数之间量之间的第三点差别是，使用构造函数Function()创建的函数不使用词法作用域，相反的，它们总是被当作顶级函数来编译，就像下面代码所说明的那样：


 参考技术A <html> 
<head></head> 
<body> 
<script type="text/javascript"> 
/*javascript定义函数(声明函数)可以有三种方法：正常方法、构造函数、函数直接量。*/ 
/*1.正常方法 function(param)*/ 
function print(msg) 
 
document.write(msg,"<br/>"); 
 
/*如果函数不包含return 语句，只执行函数体内语句，并返回undefined*/ 
/*2.构造函数方法：new Function()*/ 
var add1=new Function('a','b','return a+b'); 
/*3.函数直接量法，创建未命名函数，*/ 
var result = function(x,y)return x+y;; 
/*也可以指定函数名*/ 
var result2 = function fact(x)if(x<1) return 1;else return x*fact(x-1); 
document.write('调用一般的方法：'); 
print("<hr/>"); 
print('调用构造函数方法：add1(5,6)'); 
print(add1(5,6)); 
print("<hr/>"); 
print("调用函数直接量法:result(3,4)"); 
var re =result(3,4); 
print(re); 
print("调用函数直接量法:result2(3)"); 
print(result2(3)); 
print("<hr/>"); 
print('函数作为数据使用'); 
/*函数可以作为数据使用*/ 
function add(x,y)return x+y; 
function subtract(x,y)return x-y; 
function multiply(x,y)return x*y; 
function divide(x,y)return x/y; 
function operate(operator,operand1,operand2) 
 
return operator(operand1,operand2); 
 
//计算(2+3) + (4*5) 
var i = operate(add,operate(add,2,3),operate(multiply,4,5)); 
print('(2+3) + (4*5)='+i); 
print("<hr/>"); 
//使用函数直接量 
var operators = new Object(); 
operators['add'] = function(x,y)return x+y; 
operators['substract'] = function(x,y)return x-y; 
operators['multiply'] = function(x,y)return x*y; 
operators['divide'] = function(x,y)return x/y; 
operators['pow'] = Math.pow; 
function operate2(op_name,operand1,operand2) 
 
if(operators[op_name] == null) return "unknown operator"; 
else return operators[op_name](operand1,operand2); 
 
//定义"hello" + "" + "world" 
var j = operate2("add","hello",operate2("add"," ","world")); 
var k = operate2("pow",10,2); 
print(j); 
print(k); 
print("<hr/>"); 
</script> 
</body> 
</html>

 参考技术B 首先，需要定义javascript标签
其次，函数关键字function
然后就是自定义函数名称，这样既可。
<script>
function 自定义函数名


</script> 参考技术C

    使用function定义

    例如 function add(a,b,c)

    var add = function(a,b,c);  

    调用的时候使用add();add(a);add(a,b);add(a,b,c);

 参考技术D 一、正常方法
function print(msg)
document.write(msg);

对函数进行调用的几种方式：
函数名（传递给函数的参数1，传递给函数的参数2，….）
变量 = 函数名（传递给函数的参数1，传递给函数的参数2，….）
对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert("sum=“+ square(2,3));
不指定任何函数值的函数，返回undefined
二、构造函数方法 new Function();
//构造函数方式定义javascript函数 注意Function中的F大写
var add=new Function('a','b','return a+b;');
//调用上面定义的add函数
var sum=add(3,4);
alert(sum);
//弹出7
注:接受任意多个字符串参数，最后一个参数是函数体。
如果只传一个字符串，则其就是函数体。
三、函数直接量定义函数
//使用函数直接量的方式定义函数

var result=function(a,b)return a+b;
//调用使用函数直接量定义的函数
var sum=result(7,8);
alert(sum);
注:函数直接量是一个表达式，它可以定义匿名函数
匿名函数如下：
btnElement.onclick=function()
alert("点击按钮");

JavaScript入门学习之二——函数

在前一章中讲了JavaScript的入门语法，在这一章要看看函数的使用。

函数的定义

JavaScript中的函数和Python中的非常类似，只不过定义的方式有些不同,下面看看是怎么定义的

//定义普通函数
function f1(){
    console.log(‘hello world!‘)
}

//定义带参数的函数
function f2(a,b){
    console.log(a)
    console.log(b)
}

//定义带返回值的函数
function f3(a,b){
    return a+b
}

//定义匿名函数
var sum = function(a,b){
    return a+b
}

//定义立即执行函数
(function(a){
    console.log(‘立即执行函数‘)
})(a)

立即执行函数其实有些像python里的lambda方法，的用法应该注意一下：因为在我们在全局内定义了一个变量，在定义函数的过程是无法调用这个变量的。

(function(a,b){
    console.log(a+b);
    console.log(‘函数中‘)
})(123,456)

这个方法可以让外部访问不到函数中的变量，防止函数污染全局变量。

函数的调用

这里要将一个JavaScript里比较随意的一点（也可以说是一个坑），我们看一看下面的函数

function fun(a,b){
    console.log(a+b);
}

fun(12,34)

这样没啥问题，因为形参和函数调用的时候的实参数量是一致的。那么我们改一下实参的状态，会怎么样？

fun(12,34,56)
//打印值为46
fun(12)
//打印值为NaN

arguments的使用

这里就要讲到arguments的使用了，类似Python中的*args，arguments表达了函数的形参(但是是可以不用在声明函数中明确的写出来的)

所以在JS的函数里不管是多传参数或少传参数都是不会报错的，我们可以这样看看

function fun2(a,b){
    console.log(arguments)
    for (i=0;i<arguments.length;i++){
        console.log(arguments[i])
    }
}

fun2(11,22,33,44)

而我们想要算一下传入参数的累加值，就要按下面的方法了

function fun_sum(a,b){
    var totle=0;
    for (i=0;i<arguments.length;i++){
        totle += arguments[i]
    }
    return totle
}

console.log(fun_sum(1,2,3,4,5))
 函数的全局变量和局部变量

局部变量

在JavaScript内部声明的变量(var)是局部变量，所以只能在函数内部访问，就是说这个变量的作用域只有函数内部。只要函数运行完毕，改变量就会被删除。

全局变量

在函数外部声明的变量是全局变量，网页上所有的脚本和函数都能访问。

var test = ‘test‘

console.log(‘声明函数前‘,test)
function fun(){
    console.log(‘开始声明函数‘,test);
    var test = ‘in func‘;
    console.log(‘函数声明完成‘,test);
}

console.log(‘调用函数前‘,test);
fun();
console.log(‘调用函数后‘,test);

//////////输出//////////
声明函数前 test
调用函数前 test
开始声明函数 undefined
函数声明完成 in func
调用函数后 test

注意这里还有个非常坑的点：

我们在定义函数前有个变量test，如果在函数内部没有对这个test进行赋值，那么这个变量是正常的，但是一旦有了赋值操作，在操作前就成了underfined了(上面的例子就是有了赋值操作)，在看看下面的

var test2 = 123;
function fun2(){
    console.log(test2)
}

fun2()

//////////输出//////////
123

变量生存周期

JavaScript的变量生命期从他们被声明的时候开始，

局部变量是在函数运行结束的时候被删除，而全局变量是在页面被关闭的时候删除。

作用域

还是要看看这几个例子：

 例子1

var city = ‘beijing‘;
function fun(){
    var city = ‘shanghai‘;
    function inner(){
        var city = ‘shenzhen‘;
        console.log(city);
    }
    inner();
}

fun()
////////输出////////
shenzhen

例子2

var city = ‘beijing‘;
function fun(){
    console.log(city);
}

function fun2(){
    var city = ‘shanghai‘;
    return fun;
}

var ret = fun2();
ret();
//////////输出//////////
beijing

案例3.闭包

var city = ‘beijing‘;
function f(){
    var city = ‘shanghai‘;
    function inner(){
        console.log(city);
    }
    return inner;
}

var ret = f();
ret()

//////////输出//////////
shanghai

在上面的例子中，ret对应的函数就是inner()，也就是闭包的用法。

所以，函数的调用一定要往回找函数的定义过程。

首先，在函数内部找->再往外部找，最后找全局作用域。

词法分析

JavaScript在调用函数的一瞬间，会先进行词法分析，大致过程是这样的：

函数调用的前一个瞬间，回显形成一个激活对象:Active Object(AO)，并会进行下面3个方面的分析

　　函数参数——如果有参数，则将此参数赋值给AO，且值为underfined；如果没有，则不做任何操作。

　　函数局部变量——如果AO上右同名的值，则不做任何操作，如果没有，则将此变量赋值给AO，并且值为underfined。

　　函数声明——如果AO上有，则会将AO上的对象覆盖，如果没有则不做任何操作。

　　综上所述，函数内部无论是使用参数还是使用局部变量都会到AO上找。

再看看下面的例子：

var name = ‘xiaoming‘;
var age =12;
function fun(){
    console.log(age);
    var age = 30;
    console.log(age)
}

fun()

//////////输出//////////
underfined
30

这也就是讲了上面的那个坑是怎么导致的。

var name = ‘xiaoming‘;
var age =12;
function fun(){
    console.log(age);
    function age(){
        console.log(‘inner func‘);
    }
    console.log(‘test‘)
}

fun()
//////////输出//////////
ƒ age(){
        console.log(‘inner func‘);
    }
test

结合前面的规则看看是怎么执行的。

以上是关于javascript怎么定义函数的主要内容，如果未能解决你的问题，请参考以下文章

JavaScrip笔记心得（持续更新）

JavaScrip笔记心得（持续更新）

JavaScrip笔记心得（持续更新）

javascrip变量和标识符

JavaScrip和Java一样吗?

JavaScrip:Function