JavaScript Function、函数声明、函数表达式

来源:互联网 发布:农田测亩仪软件下载 编辑:程序博客网 时间:2024/05/20 07:35

JavaScript Function、函数声明、函数表达式

Function 对象

Function 构造器会创建一个新的 Function 对象。 在 JavaScript 中每个函数都是一个 Function 对象。

// 使用 Function 构造函数创建函数new Function ([arg1[, arg2[, ...argN]],] functionBody)

例子

var func = new Function('a', 'b', 'return a + b');func(2, 3) // 5

使用 Function 构造器生成的 Function 对象是在函数创建时解析的。
这比你使用函数声明或者函数表达式(function)并在你的代码中调用更为低效,因为使用后者创建的函数是跟其他代码一起解析的。
所以不推荐使用 Function 构造函数来创建函数。

函数声明 function statement

函数声明是用指定的参数声明一个函数。一个被函数声明创建的函数是一个 Function 对象,具有 Function 对象的所有属性、方法和行为。

// 函数声明语法function name([param[, param[, ... param]]]) { statements }
  • name: 函数名,可以省略。当省略函数名的时候,该函数就成为了匿名函数。
  • param: 传递给函数的参数的名称,一个函数最多可以有255个参数。
  • statements: 组成函数体的声明语句。

函数表达式 function expression

在函数表达式中我们可以忽略函数名称创建匿名函数,并将该匿名函数赋值给变量。

var add = function(a, b) {    return a + b;  };add(2, 3) // 5

当然, 也可以创建命名函数表达式 Named function expression:

var add = function func(a, b) {    return a + b;  };add(2, 3) // 5

命名函数表达式中函数名称只能作为函数体作用域内的局部变量,外部不可访问。

var a = function pp(v) {    v++;    if (v>3) {        return v;    } else {        return pp(v);    }}a(1); // 4pp(1); // ReferenceError: pp is not defined

其他

函数声明提升

PS: JavaScript 变量提升(链接失效,查看原文可看)

对于函数声明创建的函数,可以在本作用域内任意位置访问。

a(); // 1function a() {    return 1;  }a(); // 1

而函数表达式不会。

console.log(a); // undefined (只是变量提升)a(1); // TypeError: a is not a functionvar a = function(v) {    console.log(v);     };

实参与形参

调用函数时,传递给函数的值被称为函数的实参(值传递),对应位置的函数参数名叫作形参。有一点非常需要注意:

  • 如果实参是一个包含原始值(数字,字符串,布尔值)的变量,则就算函数在内部改变了对应形参的值,返回后,该实参变量的值也不会改变。
  • 如果实参是一个对象引用,则对应形参会和该实参指向同一个对象。假如函数在内部改变了对应形参的值,返回后,实参指向的对象的值也会改变。

实参是原始值:

function func(v) {    v = 3;}var a = 1;func(a);console.log(a); // 1

实参是对象引用(1):

function func(v) {    v.c = 3;}var a = {    b: 1,    c: 2};func(a);console.log(a); // { b: 1, c: 3 }

实参是对象引用(2):

function func(v) {      v[1] = 3;}var a = [1, 2];func(a);console.log(a); // [ 1, 3 ]

arguments 对象

arguments 对象是函数内部的局部变量,是一个类数组对象,代表传给一个 function 的参数列表。

function func(a, b) {    console.log(arguments);}func(22, 33); // { '0': 22, '1': 33 }console.log(arguments[0]); // 22console.log(arguments.length); // 2

注意: arguments 对象并不是一个真正的 Array。它类似于数组,但没有数组所特有的属性和方法,除了 length。例如,它没有 pop 方法。
如果需要,可以将其转换成数组再对新的数组进行处理,例如:
var args = Array.prototype.slice.call(arguments);

箭头函数(ES6)

箭头函数就是个简写形式的函数表达式,具有更精简的语法,箭头函数总是匿名的。
除了精简语法,一大特性是:箭头函数拥有词法作用域的 this 值。详情(链接失效,查看原文可看)

一个简单的例子:

var a = [1, 2, 3];// ES5var b = a.map(function(v) {    return v;});// ES6var c = a.map(v => v);console.log(b) // [ 1, 2, 3 ]console.log(c) // [ 1, 2, 3 ]

原文

0 0