JavaScript函数 - 技术栈

1.初识函数

１．系统函数

1.parselnt()

2.parseFloat()

1.初识函数

在JavaScript中，函数类似于java中的方法，是执行特定功能的JavaScript代码。但是JavaScript中的函数使用更简单，不用定义函数属于哪个类，因此调用时不需要用"对象.函数名()"的方式，直接使用函数名称来调用函数即可。

JavaScript中，中的函数有两种：一种是JavaScript自带的系统函数**,**另一种是用户自行创建的自定义函数。

１．系统函数

在JavaScript中，常用的系统函数有三种，分别是parseInt()、paresFloat()和isNaN()。其中，前两种系统函数是用于将非数字的原始值转换成数字的函数，最后一种系统函数是用于检查是否是非数字的函数。

1.parselnt()

parselnt()函数可以解析一个字符串，并返回一个整数，其基本语法格式如下。

javascript 复制代码

parseInt("字符串");

在判断字符串是否为数字前，parseInt()和parseFloat()都会分析该字符串。

parseInt()函数首先查看下标为0的字符，判断它是否为一个有效数字。如果不是，则返回NaN,不再继续执行其他操作。如果该字符是有效数字，则该函数将查看下标为1的字符，进行同样的测试，这一过程将持续到发现非有效数字的字符为止，此时parseInt()函数将该字符之前的字符串转换成数字。例如

javascript 复制代码

var num1=parseInt("56.64");//返回值为56
var num2=parseInt("123abc");//返回值为123
var num3=parseInt("hello999");//返回值为NaN

2.parseFloat()

parseFloat()函数可以解析一个字符串，并返回一个浮点数，其基本语法格式如下。

javascript 复制代码

parseFloat("字符串");

parseFloat()函数与parseInt()函数的处理方式相似，从下标0开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换为浮点数。

对于parseFloat()函数来说，第一个出现的小数点是有效字符，如果有两个小数点，那么第二个小数点被看作无效，例如：

javascript 复制代码

var num1=parseFloat("3.1415926");//返回值为3.1415926
var num2=parseFloat("123abc");//返回值为123
var num3=parseFloat("hello999");//返回值为NaN
var num4=parseFloat("52.18.97");//返回值为52.18

3.isNaN()

isNaN()函数用于检查其参数是否是非数字，其基本语法格式如下。

javascript 复制代码

isNaN(x);

在上述语法中，如果x是特殊的非数字，则返回true;否则false.例如：

javascript 复制代码

var num1=isNaN("20.5");//返回值为false
var num2=isNaN("123abc");//返回值为true
var num3=isNaN("48.98");//返回值为false

2.自定义函数

与java语言一亲，JavaScript需要先定义函数，然后才能调用函数。而在JavaScript中，定义函数的方式有两种，分别是函数声明和函数表达式。

1.函数声明

在JavaScript中，函数声明由关键字function、函数名、一组参数及大括号中持执行的JavaScript语句组成，其基本语法格式如下。

javascript 复制代码

function 函数名(参数1，参数2，参数3，...){
//JavaScript语句;
[return返回值]
}

在上述语法中，function是定义函数的关键字，必须有；参数1、参数2等是函数的参数。因为JavaScript本身是弱类型语言，所以它的参数没有类型检查和类型限定。函数中的参数是可选的，根据函数是否带参数。可分为不带参数的无参函数和带参数的有参函数。无参函数的语法格式如下。

javascript 复制代码

function 函数名(){
//JavaScript语句;
}

在上述语法中，"{"和"}"定义了函数的开始和结束；return语句用来规定函数返回的值。

要执行一个函数，必须先调用这个函数，当调用函数时，必须指定函数情况及其后面的参数(如果有参数)。函数的调用一般和元素的事件结合使用，语法格式如下。

javascript 复制代码

事件名="函数名()";

2.函数表达式

在JavaScript中，把一个函数赋给一个变量，此时形成了函数表达式，语法如下。

javascript 复制代码

var 变量=function(参数1,参数2,参数3,...){
//JavaScript语句;
}

由于函数声明和函数表达式的基本使用方法是一样的，所以这里不再讲述函数表达式的使用方法。但是既然有两种定义函数的方式，就说明二者一定有不一样的地方，下面使用函数声明的方式定义函数名都为f1()的函数，使用函数表达式的方式定义两个函数名都为f2()的函数，看看二者的区别。

3.函数自调用

与java不同的是，在自定义函数中，如果函数有名字，如"function study(){}",则被称为命名函数;如果函数没有名字，如"function(){}",则被称为匿名函数。那么匿名函数该如何调用呢？

javascript 复制代码

(function(){
//函数体
})();

在上述代码中，将"function(){}"匿名函数一天在一对"()"中，就实现了调用，它被为函数自调用。

函数自调用的特点是函数没有名字，在声明的同时直接调用。这一特点的好处在于，如果同时声明了两个f1()函数，如"function f1(){}"和"function f1(){}",在使用时会冲突，即后面的函数会覆盖前面的函数，但是使用函数自调用的方式就不会冲突。

4.回调函数

将prompt()方法返回的值作为参数传递给了函数study(count),此时传递的值是数值类型。在JavaScript中，是否还可以将其他类型作为参数传递呢？例如：

javascript 复制代码

//字符串类型作为参数使用
function f1(x,y){
 console.log(x+y);
}
f1("hello","你好");
//布尔类型作为参数使用
function f2(x){
 console.log(x);
}
f2(true);

在上述的代码中，分别将字符串类型，布尔类型作为参数传递给了函数，并且也确实能够使用。那如果将函数作为参数使用呢？例如：

javascript 复制代码

function f1(fun){
 console.log("f1函数调用了");
 fn();
}
function f2(){
 console.log("f2函数调用了");
}
f1(f2);

在上述代码中当调用f1()函数时，将f2()函数作为参数传入，运行时，首先输出"f1函数调用了",之后输入出"f2函数调用了。

综上所述，f2()函数作为参数传递到f1()中，并且在f1()函数中执行fn()函数,这时，f2()函数可以被称作回调函数。如果没有指定函数名称，可以被称作匿名回调函数。

2.局部变量和全局变量

与java中的变量一样，在JavaScript中，根据变量作用范围的不同，可分为局部变量和全局变量。

1.局部变量和全局变量的概念及使用

局部变量是在函数内部声明的变量(必须使用var)，只能在函数内部访问它。其特点是可以在不同的函数中使用名称相同的局部变量。

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

综上所述，可以得出如下结论：全局变量和局部变量的区别：作用域不同、声明位置不同、生存期不同。

作用域：局部变量仅作用在函数中，而全局变量作用于整个脚本。
声明位置：局部变量声明的位置在函数中，而全局变量可以声明在使用之前的任何位置。
生存期：局部变量在函数运行以后被删除，而全局变量在页面关闭后被删除。

2.隐式全局变量

前面介绍了"局部变量是在函数内部声明的变量(必须使用var）"。如果变量声明时没有var，则被称为隐式全局变量。例如：

javascript 复制代码

var a1=1;//全局变量
a2=2;//隐式全局变量

在上述代码中，"a2=2;"就是一个隐式全局变量。如果在函数内部声明一个局部变量，但此变量不使用var，例如：

javascript 复制代码

function f1(){
 num=200;//num按理说应该是一个局部变量
}
f1();
console.log(num);//200

在上述代码中，在函数内部声明的变量num按理说应该是局部变量，但是它并没有调用var来声明，所以它变成了一个隐式全局变量，因此在调用 f1()函数后，在函数外部可以访问到num.

那么不使用var声明的隐式全局变量和全局变量有什么区别？

3.作用域和作用域链

在前面介绍的内容中，其实已经涉及了作用域的概念，本节将详细介绍作用域。块级作用域、作用域链。

1.作用域和块级作用域

作用域(Scope)就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

块级作用域是由大括号限定的。在块级作用域下，所有的变量都定义在大括号内，从定义开始到大括号结束这个范围内可以使用，出了这个范围就无法访问。块级作用域的应用场景包括正常带有大括号的语句、条件语句、循环语句和函数。

以上列出的四种情况都是带有大括号的语句。

2.作用域链

当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级执行上下文的变量对象中查找，一直找到全局上下文的变量对象，即全局对象，这样由多个执行上下文的变量对象构成的链表就被称为作用域链(Scope Chain)。

例如，当执行函数时，总是先从函数内部寻找局部变量。如果内部找不到，则向创建函数的作用域寻找，依次向上。如果最终没有找到，通常会报错。

4.闭包

通过前面介绍的作用域，可得出在函数外部无法读取函数内的局部变量，而闭包是指有权访问另一个函数作用域中的变量的函数。那么，问题来了，如何在函数外部读取函数内的局部变量呢？主要分为如下两步：

在函数的内部，再定义一个函数。
把内部的函数作为返回值。

闭包的作用有哪些？闭包主要有如下两个作用。

可以读取函数内部的变量。
可以让这些变量的值始终保存在内存中。

正是这些作用，也导致了闭包有如下两个缺点。

由于闭包可以读取函数内部的变量，所以闭包可以在父函数外部改变父函数内部变量的值。
由于闭包会使得函数中的变量都被保存在内存中，所以内存消耗很大，不能滥用闭包，否则会造成网页性能的问题。另外，在IE低版本浏览器中，可能会导致内存泄漏。

5.事件

事件是使用JavaScript实现网页特效的灵魂内容，当与浏览器进行交互进，浏览器就会触发各种事件来成网页中的各种特效，常见的事件如下。

onload:一个页面或一幅画像完成加载。
onclick:鼠标单击某个对象。
onmouseover:鼠标指针移到某元素上。
onmouseout:鼠标指针离开某元素。
onkeydown:某个键盘按键被按下。
onchange:域的内容被改变。

在JavaScript中，通常使用函数实现事件处理，例如在上面中，单击按钮触发的onclick事件调用函数在页面中输出内容，以及在网上注册、登录时，单击按钮验证输入内容的合法性，这些功能都是通过事件来触发函数，实现各种各样炫酷的页面效果的。