Skip to content

Latest commit

 

History

History
199 lines (145 loc) · 5.35 KB

8.md

File metadata and controls

199 lines (145 loc) · 5.35 KB
Raw

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

juejin

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); // 4
pp(1); // ReferenceError: pp is not defined

其他

函数声明提升

PS: JavaScript 变量提升

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

a(); // 1

function a() {
    return 1;  
}

a(); // 1

而函数表达式不会。

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

var 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]); // 22
console.log(arguments.length); // 2

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

箭头函数(ES6)

箭头函数就是个简写形式的函数表达式，具有更精简的语法，箭头函数总是匿名的。 除了精简语法，一大特性是：箭头函数拥有词法作用域的 this 值。详情

一个简单的例子：

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