JavaScript 函数定义_JS 函数


JavaScript 函数定义


JavaScript 通过关键字 function 来定义函数的。

你可以通过函数声明定义,或声明或函数表达式。


一、函数声明

在前面的教程中,你已熟悉了函数声明的语法 :

function functionName(parameters) {

 执行的代码

}

声明的函数不会立刻执行,将在稍后执行调用到。

示例代码

function myFunction(a, b) {
   return a * b;
}

演示一下


分号是用来分隔可执行的 JavaScript 语句。
由于函数声明不是可执行语句,所以不常用分号结束。


二、函数表达式

JavaScript 函数也可通过表达式定义。

函数表达式可保存在变量中:

示例代码

var x = function (a, b) {return a * b};

演示一下

在变量中保存的函数表达式之后,变量也可作为函数来用:

示例代码

var x = function (a, b) {return a * b};
var z = x(4, 3);

演示一下

上面这个函数实际上是一个 匿名函数 (函数没有名称)。

在变量中存储函数,是不需要函数名称,他们可使用变量名来调用。


上述函数使用的分号结尾,因为它可执行的语句。


三、Function() 函数构造

在上示例代码中看到的,JavaScript 函数是经过 function 关键词定义。

函数也可通过 Function() 的内置 JavaScript 函数构造器定义。

示例代码

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

演示一下

其实你可以不使用上面函数构造器,你可以这么写也是一样的:

示例代码

var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);

演示一下


在很多情况下,可以避免在 JavaScript 中使用 new 关键词。


四、函数提升(Hoisting)

在前面教程中,已经学到了 "hoisting 提升"。

Hoisting 是 JavaScript 中默认将当前作用域顶端的默认行为。

Hoisting 应用于变量声明和函数的声明。

因此,JavaScript 函数可在声明之前调用:

myFunction(5);


function myFunction(y) {

   return y * y;

}

使用表达式定义的函数时是不会提升。


五、自调用函数

函数的表达式可 自调用。

自调用表达式还会被自动调用。

表达式的后面紧跟 () ,就会自动调用。

你无法对函数声明进行自调用。

你需要通过添加括号,来注明它是一个函数表达式:

示例代码

(function () {
   var x = "Hello!!";      // 我会自我调用
})();

演示一下

上面函数实际上是一个,匿名我会自我调用函数 (函数名是没有的)。


六、函数可作值使用

JavaScript 函数可作值使用:

示例代码

function myFunction(a, b) {
   return a * b;
}

var x = myFunction(4, 3);

演示一下

JavaScript 函数可使用在表达式中:

示例代码

function myFunction(a, b) {
   return a * b;
}

var x = myFunction(4, 3) * 2;

演示一下


七、函数是对象

JavaScript 中可使用 typeof 运算符会为函数返回 function。

最好是 JavaScript 的函数描述是一个对象。

JavaScript 函数都会有 属性 和 方法。

arguments.length 属性返回函数被调用时候收到的参数数:

示例代码

function myFunction(a, b) {
   return arguments.length;
}

演示一下

toString() 方法以函数返回字符串:

示例代码

function myFunction(a, b) {
   return a * b;
}

var txt = myFunction.toString();

演示一下


定义对象属性函数,可称他为对象方法。
如果用函数创建新对象,可称为对象构造函数。

八、箭头函数

箭头函数使用简易表达式的语法来编写函数。

示例代码

// ES5

var x = function(x, y) {

    return x * y;

}

// ES6

const x = (x, y) => x * y;


演示一下

有些箭头函数没有自己的 this。定义对象方法不适合。

当箭头函数没有被提升。在使用前必须进行定义。

使用 const 比使用 var 更安全,因为函数表达式,常量值是始终的。

如函数只是一个单语句,则只不妨略 return 关键字和大括号。因而,保留它们或许是一个好习惯:

示例代码

constx = (x, y) => {returnx * y};

演示一下

提示注意:IE11 和 IE 以前的老版本是不支持箭头函数。


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved