转载

JS学习-函数

一概述

1.1 函数的声明

函数的声明有三种方式

function命令
```
function print(s) {
  console.log(s);
}
```
function 命令声明的代码区块，就是一个函数。 function 命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

函数表达式

采用变量赋值的写法，这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称 函数表达式（Function Expression） ，因为赋值语句的等号右侧只能放表达式。
```
var print = function(s) {
  console.log(s);
};
```
函数表达式的函数名只在函数体内部有效，下面的 x 只在函数体内部可用，指代函数表达式本身，其他地方都不可用：
```
var print = function x(){
  console.log(typeof x);
};

x
// ReferenceError: x is not defined

print()
// function
```
这种写法的用处有两个
- 可以在函数体内部调用自身
- 方便除错（除错工具显示函数调用栈时，将显示函数名，而不再显示这里是一个匿名函数）。因此，下面的形式声明函数也非常常见
```
var f = function f() {};
```

Function构造函数
```
var add = new Function(
  'x',
  'y',
  'return (x + y)'
);

// 等同于

function add(x, y) {
  return (x + y);
}
```
在上面代码中， Function 构造函数接受三个参数，除了最后一个参数是 add 函数的“函数体”，其他参数都是 add 函数的参数。如果只有一个参数，该参数就是函数体：
```
var foo = new Function(
  'return "hello world"'
);

// 等同于

function foo() {
  return "hello world";
}
```
Function 构造函数可以不使用 new 命令，返回结果完全一样。

1.2 函数的重复声明

JS中函数允许多次声明，后面的声明就会覆盖前面的声明。

而且由于函数名的提升（参见下文），前一次声明在任何时候都是无效的。

1.3 一等公民

JS的函数与其他数据类型（数值、字符串、布尔值等等）处于同等地位，可以使用其他数据类型的地方，就能使用函数。

比如，可以把函数赋值给变量和对象的属性，也可以当作参数传入其他函数，或者作为函数的结果返回。

function add(x, y) {
  return x + y;
}

// 将函数赋值给一个变量
var operator = add;

// 将函数作为参数和返回值
function a(op){
  return op;
}
a(add)(1, 1)

1.4 函数名的提升

JS引擎将函数名视同变量名，所以采用 function 命令 声明函数时，整个函数会像变量声明一样，被提升到代码头部。所以，下面的代码不会报错：

f();

function f() {}

但是，如果采用 赋值语句 定义函数，JavaScript就会报错：

f();
var f = function (){};
// TypeError: undefined is not a function

1.5 不能在条件语句中声明函数

if (foo) {
  function x() {}
}

try {
  function x() {}
} catch(e) {
  console.log(e);
}

按照语言规范，这是不合法的。但是，实际情况是各家浏览器往往并不报错，能够运行。

但是由于存在函数名的提升，所以在条件语句中声明函数，可能是无效的。

要达到在条件语句中定义函数的目的，只有使用函数表达式。

if (false) {
  var f = function () {};
}

f() // undefined

1.6 函数的属性和方法

1.6.1 name属性

name 属性返回紧跟在 function 关键字之后的那个函数名。

1.6.2 length属性

length 属性返回 函数预期传入的 参数个数，即函数定义之中的参数个数。

function f(a, b) {}
f.length // 2

上述函数不管调用时输入了多少个参数， length 属性始终等于2。

1.6.3 toString()

函数的 toString 方法返回函数的源码

function f() {
  a();
  b();
  c();
}

f.toString()
// function f() {
//  a();
//  b();
//  c();
// }

函数内部的注释也可以返回

function f() {/*
  这是一个
  多行注释
*/}

f.toString()
// "function f(){/*
//   这是一个
//   多行注释
// */}"

三函数作用域

3.1 定义

类似于java，在函数外声明就是全局变量（global variable），在函数内声明就是“局部变量”（local variable）。局部定义的变量，会覆盖同名全局变量。

注意：对于 var 命令来说，只有在函数内部声明的才是局部变量，由于存在变量提升，所以在其他区块中声明，一律都是全局变量：

if (true) {
  var x = 5;
}
console.log(x);  // 5

上面代码中，变量 x 在条件判断区块之中声明，结果就是一个全局变量，可以在区块之外读取。

ES6中的let命令可以避免这一点

3.2 函数内部的变量提升

与全局作用域一样，函数作用域内部也会产生“变量提升”现象。 var 命令声明的变量，不管在什么位置，变量声明都会被提升到函数体的头部。

function foo(x) {
  if (x > 100) {
    var tmp = x - 100;
  }
}

上面的代码等同于

function foo(x) {
  var tmp;
  if (x > 100) {
    tmp = x - 100;
  };
}

3.3 函数本身的作用域

函数本身也是一个值，也有自己的作用域，它的作用域绑定其声明时所在的作用域。函数内部访问的变量和该函数具有相同的作用域

下面的函数x的作用域绑定外层，x的内部变量a不会到函数f体内取值，所以输出1，而不是2

var a = 1;
var x = function () {
  console.log(a);
};

function f() {
  var a = 2;
  x();
}

f() // 1

下面的外部作用域的x函数希望访问到y的内部变量，显然是不可以的：

var x = function (){
  console.log(a);
};

function y(f){
  var a = 2;
  f();
}

y(x)
// ReferenceError: a is not defined

四参数

4.1 参数的省略

JS中函数参数不是必需的，允许省略参数，甚至一个都不传：

function f(a, b) {
  return a;
}

f(1, 2, 3) // 1
f(1) // 1
f() // undefined

f.length // 2

上面的三种调用都不会报错。被省略的参数的值就变为 undefined 。

需要注意的是，函数的 length 属性与实际传入的参数个数无关，只反映函数预期传入的参数个数。

但是无法只省略靠前的参数。如果一定要省略靠前的参数，只有显式传入 undefined ：

function f(a, b) {
  return a;
}

f( , 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined

4.2 默认值的写法

function f(a){
  a = a || 1;
  return a;
}

f('') // 1
f(0) // 1

上面代码的 || 表示“或运算”，即如果 a 有值，则返回 a ，否则返回事先设定的默认值（上例为1）。

这种写法会对 a 进行一次布尔运算，只有为 true 时，才会返回 a 。

但是，除了 undefined 以外， 0 、空字符、 null 等的布尔值也是 false 。也就是说，如果外部传入了0或者空字符，也会返回默认值，为了避免这个问题，可以采用下面更精确的写法：

function f(a) {
  (a !== undefined && a !== null) ? a = a : a = 1;
  return a;
}

f() // 1
f('') // ""
f(0) // 0

4.3 传递方式

函数参数为原始类型的值（数值、字符串、布尔值）的，传递方式是值传递

函数参数是复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference），因此在函数内部修改参数，将会影响到原始值

4.3.1 如果替换整个参数，不会影响到原始值

var obj = [1, 2, 3];

function f(o){
  o = [2, 3, 4];
}
f(obj);

obj // [1, 2, 3]

上面代码中，在函数 f 内部，参数对象 obj 被整个替换成另一个值，而不是参数对象的某个属性，这时不会影响到原始值。这是因为，形式参数（ o ）与实际参数 obj 存在一个赋值关系。

// 函数f内部
o = obj;

上面代码中，对 o 的修改都会反映在 obj 身上。

但是，如果对 o 赋予一个新的值，就等于切断了 o 与 obj 的联系，导致此后的修改都不会影响到 obj 了。

4.3.2 通过全局对象的属性实现原始类型的地址传递效果

某些情况下，如果需要对某个原始类型的变量，获取传址传递的效果，可以将它写成全局对象的属性。

var a = 1;

function f(p) {
  window[p] = 2;
}
f('a');

a // 2

上面代码中，变量 a 本来是传值传递，但是写成 window 对象的属性，就达到了传址传递的效果。

4.4 同名参数

如果有同名的参数，则取最后出现的那个值，即使后面的 a 没有值或被省略，也是以其为准：

function f(a, a) {
  console.log(a);
}

f(1, 2) // 2

但调用函数 f 的时候，没有提供第二个参数， a 的取值就变成了 undefined ：

function f(a, a){
  console.log(a);
}

f(1) // undefined

如果要获得第一个 a 的值，可以使用 arguments 对象

function f(a, a){
  console.log(arguments[0]);
}

f(1) // 1

4.5 arguments对象

4.5.1 定义

由于JS允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。这就是 arguments 对象的由来。

arguments 对象包含了函数运行时的所有参数，这个对象只有在函数体内部，才可以使用

var f = function(one) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}

f(1, 2, 3)
// 1
// 2
// 3

arguments 可以为参数赋值（严格模式不允许这种用法）：

var f = function(a, b) {
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1)
// 5

可以通过 arguments 对象的 length 属性，判断函数调用时到底带几个参数

function f() {
  return arguments.length;
}

f(1, 2, 3) // 3
f(1) // 1
f() // 0

4.5.2与数组的关系

虽然 arguments 很像数组，但它是一个对象。数组专有的方法（比如 slice 和 forEach ），不能在 arguments 对象上直接使用。

apply方法

可以通过 apply 方法，把 arguments 作为参数传进去，这样就可以让 arguments 使用数组方法了：

// 用于apply方法
myfunction.apply(obj, arguments).

// 使用与另一个数组合并
Array.prototype.concat.apply([1,2,3], arguments)

将arguments转为真正的数组

要让arguments对象使用数组方法，真正的解决方法是将arguments转为真正的数组。

下面是两种常用的转换方法：slice方法和逐一填入新数组
```
var args = Array.prototype.slice.call(arguments);

// or

var args = [];
for (var i = 0; i < arguments.length; i++) {
  args.push(arguments[i]);
}
```

4.5.3callee属性

arguments 对象带有一个 callee 属性，返回它所对应的原函数，可以通过 arguments.callee ，达到调用函数自身的目的。

var f = function(one) {
  console.log(arguments.callee === f);
}

f() // true

五函数其它知识点

5.1 闭包

function f1() {
  var n = 999;
  function f2() {
　　console.log(n); // 999
  }
}

闭包简单理解成“定义在一个函数内部的函数”。

上述代码中，闭包就是函数 f2 ，即能够读取其他函数内部变量的函数。由于在JavaScript语言中，只有函数内部的子函数才能读取内部变量，所以定义了这样的一种概念。

闭包最大的特点，就是它可以“记住”诞生的环境。本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

把 f2 作为返回值，达到在 f1 外部读取它的内部变量的目的：

function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999

闭包的最大用处有两个：

可以读取函数内部的变量（可以封装对象的私有属性和方法）

和Java开发中的javabean的概念类似：

function Person(name) {
  var _age;
  function setAge(n) {
    _age = n;
  }
  function getAge() {
    return _age;
  }

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = person('张三');
p1.setAge(25);
p1.getAge() // 25

上面代码中，函数 Person 的内部变量 _age ，通过闭包 getAge 和 setAge ，变成了返回对象 p1 的私有变量。

让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在

闭包使得内部变量记住上一次调用时的运算结果：
```
function createIncrementor(start) {
  return function () {
    return start++;
  };
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7
```
上面代码中， start 是函数 createIncrementor 的内部变量。通过闭包， start 的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中可以看到，闭包 inc 使得函数 createIncrementor 的内部环境，一直存在。所以，闭包可以看作是函数内部作用域的一个接口。

为什么会这样呢？原因就在于 inc 始终在内存中，而 inc 的存在依赖于 createIncrementor ，因此也始终在内存中，不会在调用结束后，被垃圾回收机制回收。

闭包比较耗内存

注意，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。因此不能滥用闭包，否则会造成网页的性能问题。

5.2 立即调用的函数表达式（IIFE）

有时在定义函数之后，希望立即调用该函数。但不能在函数的定义之后加上圆括号，这会产生语法错误。

function(){ /* code */ }();
// SyntaxError: Unexpected token (

产生这个错误的原因是， function 这个关键字即可以当作语句，也可以当作表达式

// 语句
function f() {}

// 表达式
var f = function f() {}

因此，JavaScript引擎规定，如果 function 关键字出现在行首，一律解释成语句。因此，JavaScript引擎看到行首是 function 关键字会解析成函数的定义，函数不应该以圆括号结尾，所以就报错了。

解决方法

不要让 function 出现在行首，让引擎将其理解成一个表达式，将其放在一个圆括号里面：

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();

上面两种写法都是以圆括号开头，引擎就会认为后面跟的是一个表示式，而不是函数定义语句，所以就避免了错误。这就叫做 “立即调用的函数表达式”（Immediately-Invoked Function Expression），简称 IIFE 。

5.3 eval命令

eval 命令的作用是，将字符串当作语句执行：

eval('var a = 1;');
a // 1

上面代码将字符串当作语句运行，生成了变量 a 。

eval 命令可以修改了外部变量a的值，存在安全风险

由于这个原因，如果无法做到作用域隔离，最好不要使用
```
var a = 1;
eval('a = 2');

a // 2
```
eval 的命令字符串不会得到JavaScript引擎的优化，运行速度较慢，尽量少用

ECMAScript 5将 eval 的使用分成两种情况：

“直接使用”，这种情况下 eval 的作用域就是当前作用域（即全局作用域或函数作用域）

“间接调用”，此时eval的作用域总是全局作用域

var a = 1;

function f(){
  var a = 2;
  var e = eval;
  e('console.log(a)');
}

f() // 1

参考资料

JavaScript 标准参考教程

原文 http://www.lightskystreet.com/2016/06/08/js-func/

正文到此结束

所属分类：编程技术

本文标签： cat 参数 tar SyntaxError 解析 bean js App JavaScript ip 注释 http 源码代码性能问题 java 数据开发安全解决方法
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流