一、函数的作用

在 JS 里面，我们可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。

简单来说就是：

函数封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

二、函数的使用

在JavaScript中，每个函数其实都是一个Function对象。

如果一个函数中没有使用return语句，则它默认返回undefined。要想返回一个特定的值，则函数必须使用return语句来指定一个要返回的值。(使用new关键字调用一个构造函数除外)。

调用函数时，传递给函数的值被称为函数的实参（值传递），对应位置的函数参数名叫作形参。如果实参是一个包含原始值(数字，字符串，布尔值)的变量，则就算函数在内部改变了对应形参的值，返回后，该实参变量的值也不会改变。如果实参是一个对象引用，则对应形参会和该实参指向同一个对象。假如函数在内部改变了对应形参的值，返回后，实参指向的对象的值也会改变。

/* 定义函数 myFunc */
function myFunc(theObject)
{
   //实参 mycar 和形参 theObject 指向同一个对象.
   theObject.brand = "Toyota";
}

/*
* 定义变量 mycar;
* 创建并初始化一个对象;
* 将对象的引用赋值给变量 mycar
*/
var mycar = {
   brand: "Honda",
   model: "Accord",
   year: 1998
};

/* 弹出 'Honda' */
window.alert(mycar.brand);

/* 将对象引用传给函数 */
myFunc(mycar);

/*
* 弹出 'Toyota',对象的属性已被修改.
*/
console.log(mycar.brand);

三、函数封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）

例子：封装计算1-100累加和

/*
计算1-100之间值的函数
*/
// 声明函数
function getSum(){
var sumNum = 0;// 准备一个变量，保存数字和
for (var i = 1; i <= 100; i++) {
sumNum += i;// 把每个数值都累加到变量中
}
alert(sumNum);
}
// 调用函数
getSum();

四、函数的返回值

当函数执行完的时候，并不是所有时候都要把结果打印。我们期望函数给我一些反馈（比如计算的结果返回进行后续的运算），这个时候可以让函数返回一些东西。也就是返回值。函数通过return返回一个返回值。

在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined
每一个函数都有一个返回值

//声明一个带返回值的函数

function 函数名(形参1, 形参2, 形参3...) {

//函数体

return 返回值;

}

//可以通过变量来接收这个返回值

var 变量 = 函数名(实参1, 实参2, 实参3...)

五、函数的两种声明方式

1、自定义函数方式(命名函数)

利用函数关键字 function 自定义函数方式

// 声明定义方式
function fn() {...}
// 调用
fn();

因为有名字，所以也被称为命名函数
调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

2、函数表达式方式(匿名函数）

利用函数表达式方式的写法如下：

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

因为函数没有名字，所以也被称为匿名函数
这个fn 里面存储的是一个函数
函数表达式方式原理跟声明变量方式是一致的
函数调用的代码必须写到函数体后面

总结

作为一名程序员，要完成任何事情几乎都绕不开一些简单的函数，所以会写一些函数是每个开发者都应该掌握的，以便于完成某些功能和提高性能。

JavaScript函数及其作用相关推荐

JavaScript 函数声明，函数表达式，匿名函数，立即执行函数之区别
函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...
在JavaScript函数中定义全局变量
是否可以在JavaScript函数中定义全局变量? 我想在其他函数中使用trailimage变量(在makeObj函数中声明). <html xmlns="http://www.w3. ...
javaScript系列 [01]-javaScript函数基础
[01]-javaScript函数基础 1.1 函数的创建和结构函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...
JavaScript函数的各种调用模式
函数是JavaScript世界里的第一公民,换句话来说,就是我们如果可以精通JavaScript函数的使用,那么对JavaScript的运用可以更游刃有余了.熟悉JavaScript的人应该都知道,同 ...
Javascript函数和事件
一.默认函数 JavaScript提供了一些默认的函数编码函数escape():将非字母.数字字符转换成ASCII码译码函数unescape():将ASCII码转换成字母.数字字符求值函数eva ...
JavaScript 函数参数
JavaScript 函数参数 JavaScript 函数对参数的值没有进行任何的检查. 函数显式参数(Parameters)与隐式参数(Arguments) functionName(paramet ...
Javascript 函数声明和函数表达式的区别
2019独角兽企业重金招聘Python工程师标准>>> Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实 ...
从JavaScript函数重名看其初始化方式
今天有个哥们问我要是JavaScript函数重名了会有什么后果?开始我没有细想,就说可能会出错吧,可是等我实验完了发现页面没有任何脚本错误提示,而且程序也运行了,只是对同名函数的调用执行了位置靠后的一 ...
深入理解javascript函数进阶系列第一篇——高阶函数
前面的话前面的函数系列中介绍了函数的基础用法.从本文开始,将介绍javascript函数进阶系列,本文将详细介绍高阶函数定义高阶函数(higher-order function)指操作函数的函数 ...
JavaScript学习总结(七)——JavaScript函数(function)
转载自 JavaScript学习总结(七)--JavaScript函数(function) 一.函数基本概念为完成某一功能的程序指令(语句)的集合,称为函数. 二.JavaScript函数的分类 ...

JavaScript函数及其作用