JavaScript笔记:函数

时间：2023-03-09 08:00:48
JavaScript笔记:函数

函数是定义一次但却可以调用或执行任意多次的代码块。

一、函数定义

javascript中的函数使用function关键字来定义，常用的函数定义分为三种形式：

  • 声明式函数定义
 function sum(a,b)
 {
     return a+b;
 }    

 alert(sum(,));
  •   函数表达式
 var sum = function(a,b)
 {
     return a+b;
 };

 alert(sum(10,20));

函数声明与函数表达式的区别：

1、以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用.

2、以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的.

二、函数的返回值

1、若函数没有指明返回值，默认返回的是'undefined'。

2、当函数有返回值时，返回值是什么就返回什么。如下：

function box(name, age) {                    //有参数的函数
    return '你的姓名：'+name+'，年龄：'+age;//通过return 把函数的最终值返回
}
alert(box('小徐', 25));                        //调用函数得到返回值，然后外面输出

返回结果：

JavaScript笔记:函数

3、return语句还有一个功能就是退出当前函数，注意和break的区别。PS：break用在循环和switch分支语句里。在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页.

三、函数调用

函数体代码在函数被调用时才会执行。Javascript函数常用的有3种调用方式：

  • 普通的函数调用
  • 方法调用
  • 构造函数调用

（1）函数调用形式

 function func() {
  alert("Hello World");
 }

func();
 // 使用函数的Lambda表达式定义函数，然后调用
 var func = function() {
  alert("你好，小徐");
 };
 func();

在函数调用模式中，函数里的 this 关键字指全局对象，如果在浏览器中就是 window 对象.

(2)方法调用模式

将函数赋值给对象的成员后，那么这个就不在称为函数，而应该叫做方法

 // 定义一个函数
 var func = function() {
  alert("我是一个函数么?");
 };

 // 将其赋值给一个对象
 var o = {};
 o.fn = func; // 注意这里不要加圆括号
 // 调用
 o.fn();

在方法中this专指当前对象. 即o.fn 中的this 指的就是对象o.

(3)构造器调用模式

 // 定义一个构造函数
 var Person = function() {
   this.name = "上海";
   this.sayHello = function() {
     alert("你好，这里是" + this.name);
   };
 };
 // 调用构造器，创建对象
 var p = new Person();
 // 使用对象
 p.sayHello();

this指的是对象本身.

除了上面简单的使用以外，函数作为构造器还有几个变化. 分别为：
1、 所有需要由对象使用的属性，必须使用this引导；
2、 函数的 return 语句意义被改写，如果返回非对象，就返回this;

四．arguments对象

ECMAScript函数不介意传递进来多少参数，也不会因为参数不统一而错误。实际上，函数体内可以通过arguments对象来接收传递进来的参数。arguments对象的length属性可以得到参数的数量。

我们可以利用length这个属性，来智能的判断有多少参数，然后把参数进行合理的应用。比如，要实现一个加法运算，将所有传进来的数字累加，而数字的个数又不确定。

function box() {
    var sum = 0;
    if (arguments.length == 0) return sum;        //如果没有参数，退出
    for(var i = 0;i < arguments.length; i++) {    //如果有，就累加
        sum = sum + arguments[i];
    }
    return sum;                            //返回累加结果
}
alert(box(5,9,12));

相关文章