函数的深入浅出

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行。

通俗来讲：函数就是把多行代码包起来成代码块，可以通过调用函数来重复使用代码块。（也就是把重复的代码封装起来，通过调用函数执行代码块）

JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()和花括号{}。

function 函数名(){} 

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中：{}

function (参数 1,funName 参数 2, 参数 3) {
    要执行的代码
}

在函数中，参数是局部变量。

函数声明

常用定义一个函数的方式有两种

function funName() {};

var funName = function () {};

这里给大家讲讲函数声明提升，和变量的提升

函数声明提升与变量提升

JS在编译阶段，函数声明和变量声明都会被先处理置于执行环境的顶部，且赋值会被留在原地，这个过程称之为提升。

举个简单例子：

console.log(fn);
console.log(i);
var i = 1;
function fn () {
  console.log(2)
}

实际上代码顺序是这样的：

 var fn = function () {
  console.log(2)
}
var i;
console.log(fn);
console.log(i);
i = 1;

变量提升

变量声明在编译阶段被处理，而变量赋值则留在原地等待执行。

console.log(i);   // undefined
var i = 1;
console.log(i);   // 1

相当于：

var i;
console.log(i);   // 由于i只是声明未赋值，输出undefined
i = 1;
console.log(i)    // i已赋值，输出1

一道测试题

 var age = 10;
  function person () {
      age = 100;
      console.log(age);  // 100
      var age;
      console.log(age)  // 100
  }
  person();
  console.log(age);   // 10

这里可以在页面上设置断点调试看看 局部作用域的age 和 全局作用域的age

函数提升

js解析器在解析时对函数声明与函数表达式有着不同的优先级，实际上编译阶段函数声明会先于变量被提升，并使其在执行任何代码之前可访问，函数表达式实际上是变量声明的一种，因此函数声明提升优于函数表达式

console.log(fn(1));    // 1
function fn (a) {
    return a;
}

如上面的代码，由于函数声明被置于执行环境顶部，即使调用函数的代码在声明函数之前也可以正确访问。再看函数表达式的例子：

console.log(fn(1));
var fn = function (a) {
    return a;
}
// fn is not a function

相当于

var fn;
console.log(fn(1));
fn = function (a) {
  return a;
}
// fn is not a function

上面的例子之所以报错，是因为变量fn声明后还未对函数引用(fn还没赋值)。

另外函数声明提升不会被变量声明覆盖，但会被变量赋值覆盖。

变量未赋值的例子：

function fn() {
	console.log(1);
}
var fn;
console.log(fn);    // 由于后一个fn只声明未负值，因此输出的是函数fn

变量赋值的例子：

function fn(){
    console.log(1);
  }
  var fn = function () {
      console.log(2)
  };
  fn();    // 2

相当于

function fn(){
	console.log(1);
}
var fn;
fn = function () {
	console.log(2)
};
fn();    // 2（因为声明的函数fn被后一个已引用函数的变量fn所覆盖，因此输出2）

再来点例子

fn();
var fn = function () {
	console.log(1);
}
fn();
function fn () {
	console.log(2);
}
var fn;
fn();
// 依次输出2,1,1

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

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

变量的作用域

变量在哪里声明，则那里就是它的有效区域

var scope = "global";		//定义全局变量
function checkscope(){		
	var scope = "local";		//定义局部变量
	console.log(scope);			
}
checkscope();				          //=>'local'		改变的只是局部变量scope
console.log(scope);						//=>'global'		全局变量scope并没有改变

在函数体内的参数和使用var定义的变量都是属于局部变量,一定要善于使用局部变量，防止污染全局变量

变量的声明提前

用了var定义的变量或函数的参数，都会被提前到函数体的顶部进行声明(但不涉及赋值,具体赋值还是需要运行到对应行数)

var scope = "global";
function f() {
	console.log(scope); // =>undefined 			输出"undefined"，而不是"global" 
	var scope = "local"; // 变量 在这里 赋 初始 值， 但 变量 本身 在函数体内任何地方均是有定义的
	console.log(scope);	 // =>"local"
}

这个特性跟全局变量的声明提前其实是一致的,所以编程时，要有个好习惯，尽量把函数所需要用到的变量在函数顶部声明好，这样可以使源代码非常真实的反映函数的变量作用域

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

这条语句：

carname="Volvo";

将声明 window 的一个属性 carname。

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var a = 1;
function fn () {
    b = 2;
}
fn();
console.log(a);
console.log(b);
console.log(this.a);
console.log(this.b);
console.log(this === window);
console.log(delete a); // false 无法删除
console.log(a); //1
console.log(delete b); // false 无法删除
console.log(b); //1

函数调用

函数可以通过其名字加上括号进行调用，有参数的就括号里面写参数，多个参数就英文逗号隔开

function fn(a, b){
  console.log(a);
  console.log(b);
}

//通过函数名加()调用函数
fn();
fn(1);
fn(1, 2);

为何使用函数？

您能够对代码进行复用：只要定义一次代码，就可以多次使用它。

您能够多次向同一函数传递不同的参数，以产生不同的结果。

function fn (a) {
  var num = 0;
  for (var i = 0; i < a; i ++) {
    num += i;
  }
  console.log(num);
  return num;
}
fn(10);

细心的同学就看到我上面的例子函数里面，写了个return num; 这个return是什么呢？

return 语句

当 JavaScript 到达 return 语句，函数将停止执行。(函数体内没有写return的时候，默认在函数体最后有个return;)

函数通常会计算出返回值。这个返回值会返回给调用者：

return 语句 只能 在 函数 体内 出现， 如果不 是的 话 会 报 语法 错误。 当 执行 到 return 语句 的 时候， 函数 终止 执行， 并 返回 expression 的 值 给 调用 程序。

看下面例子 ，计算两个数的乘积，并返回结果：

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

console.log(x);

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

JavaScript 函数参数

javascript函数的参数与大多数其他语言的函数的参数有所不同。函数不介意传递进来多少个参数，也不在乎传进来的参数是什么数据类型，甚至可以不传参数。

Javascript的参数分为实参和形参两种类型：

实参：从字面意义我们可以理解为“实际存在的参数”，是在函数调用时传给函数的变量，该变量在函数执行时必须存在。实参可以为变量、常量、函数、表达式等。

形参：从字面意义我们可以理解为“形式上存在的参数”，由此我们可以看出它并不是真实存在的参数，又称为虚拟变量。它在函数定义时使用，作用为接收函数调用时的实参。

在JavaScript中实参与形参数量并不需要像JAVA一样必须在数量上严格保持一致，具有很大的灵活性。如下：

function test(str1, str2, str3) {
    console.log(str1);
    console.log(str2);
    console.log(str3);
}
test();                             // str1: undefined, str2: undefined, str3: undefined
test('hello');                      // str1: 'hello', str2: undefined, str3: undefined
test('hello', 'world');             // str1: 'hello', str2: 'world', str3: undefined
test('hello', 'world', '!');        // str1: 'hello', str2: 'world', str3: '!'

在JavaScript代码运行过程中，形参的作用为接收实参，它们两个分别位于不同的内存地址中，大致可以分为两种情况：

1. 实参为原始值。当实参为原始值时,此时形参为实参的拷贝。因此，函数体内形参值的改变并不会影响实参。

function test(str) {
    str = 'chinese';
    return str;
}
const str1 = 'china';
const str2 = test(str1);
console.log(str1);      // china
console.log(str2);      // chinese

2. 实参为引用值。当实参为引用值时，此时形参为实参内存地址的拷贝。因此，函数体内形参值的变化在一定情况下将会影响实参。

function test(obj) {
    // 形参obj的值实际上为实参obj的内存引用，及形参与实参同时指向同一个内存地址。
    obj.name = 'typeScript';    // 此时改变的为形参与实参同时指向的那个内存地址中的值
                                // 所以此时也导致实参的name属性发生了变化
    obj = {                     // 此时对形参obj进行重新赋值，给予了它一个新的内存地址
        name: 'react',          // 从此之后的形参将于实参完全解绑，两者之前不再存在联系
        star: 13000,
    }
    obj.star = 20000;           // 所以这里仅仅是改变了形参的star属性
    return obj;
}
const obj1 = {
    name: 'javaScript',
    star: 100000,
}
const obj2 = test(obj1);
console.log(obj1);      // name: 'typeScript', star: 100000
console.log(obj2);      // name: 'react', star: 20000

同名形参

在非严格模式下，函数中可以出现同名形参，且只能访问最后出现的该名称的形参。

function add(x,x,x){
  return x;
}
console.log(add(1,2,3)); //3

而在严格模式下，出现同名形参会抛出语法错误

function add(x,x,x){
'use strict';
return x;
}
console.log(add(1,2,3));//SyntaxError: Duplicate parameter name not allowed in this context

参数个数

当实参比函数声明指定的形参个数要少，剩下的形参都将设置为undefined值

function add(x, y){
  console.log(x, y); //1 undefined
}
add(1);

常常使用逻辑或运算符给省略的参数设置一个合理的默认值

function add(x, y){
  y = y || 2;
  console.log(x, y); //1 2
}
add(1);

更多设置默认参数的方法：ES5和ES6中对函数设置默认参数的方法总结

当实参比形参个数要多时，剩下的实参没有办法直接获得，需要使用即将提到的arguments对象

arguments对象

javascript中的参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数。在函数体内可以通过arguments对象来访问这个参数数组，从而获取传递给函数的每一个参数。arguments对象并不是Array的实例，它是一个类数组对象，可以使用方括号语法访问它的每一个元素

function add(x){
  console.log(arguments[0], arguments[1], arguments[2]) //1 2 3
  return x + 1;
}
console.log(add(1,2,3)); //2

arguments对象的length属性显示实参的个数，函数的length属性显示形参的个数

function add(x, y){
  console.log(arguments.length); //3
  return x + 1;
}
add(1, 2, 3);
console.log(add.length); //2

形参只是提供便利，但不是必需的

function add(){
  return arguments[0] + arguments[1];
}
console.log(add(1, 2)); //3

当形参与实参的个数相同时，arguments对象的值和对应形参的值保持同步

function test(num1, num2){
  console.log(num1, arguments[0]); //1 1
  arguments[0] = 2;
  console.log(num1, arguments[0]); //2 2
  num1 = 10;
  console.log(num1, arguments[0]); //10 10
}
test(1);

[注意]虽然命名参数和对应arguments对象的值相同，但并不是说读取两个值会访问相同的内存空间。它们的内存空间是独立的，但值是同步的

但在严格模式下，arguments对象的值和形参的值是独立的

function test(num1, num2){
  'use strict';
  console.log(num1, arguments[0]); //1 1
  arguments[0] = 2;
  console.log(num1, arguments[0]); //1 2
  num1 = 10;
  console.log(num1, arguments[0]); //10 2
}
test(1);

当形参并没有对应的实参时，arguments对象的值与形参的值并不对应

function test(num1,num2){
  console.log(num1, arguments[0]); //undefined,undefined
  num1 = 10;
  arguments[0] = 5;
  console.log(num1, arguments[0]); //10,5
}
test(); 

arguments对象的属性callee

arguments对象有一个名为callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数

下面是经典的阶乘函数

function factorial(num){
  if(num <=1){
    return 1;
  }else{
    return num* factorial(num-1);
  }
} 
console.log(factorial(5)); //120

但是，上面这个函数的执行与函数名紧紧耦合在了一起，可以使用arguments.callee可以消除函数解耦

function factorial(num){
  if(num <= 1){
    return 1;
  }else{
    return num * arguments.callee(num - 1);
  }
} 
console.log(factorial(5)); //120

但在严格模式下，访问这个属性会抛出TypeError错误

function factorial(num){
  'use strict';
  if(num <=1){
   return 1;
  }else{
    return num * arguments.callee(num - 1);
  }
} 
//TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
console.log(factorial(5));

对象参数

当一个函数包含超过3个形参时，要记住调用函数中实参的正确顺序实在让人头疼

通过键/值对的形式来传入参数，这样参数的顺序就无关紧要了。定义函数的时候，传入的实参都写入一个单独的对象之中，在调用的时候传入一个对象，对象中的键/值对是真正需要的实参数据

function fn(args){
  args.a && console.log(args.a);
  args.b && console.log(args.b);
  args.c && console.log(args.c);
}
fn({
  a: 1,
  b: [1,2]
});

函数重载

javascript函数不能像传统意义上那样实现重载。而在其他语言中，可以为一个函数编写两个定义，只要这两个定义的签名(接受的参数的类型和数量)不同即可

javascript函数没有签名，因为其参数是由包含0或多个值的数组来表示的。而没有函数签名，真正的重载是不可能做到的

//后面的声明覆盖了前面的声明
function addSomeNumber(num){
  return num + 100;
}
function addSomeNumber(num){
  return num + 200;
}
var result = addSomeNumber(100); //300

只能通过检查传入函数中参数的类型和数量并作出不同的反应，来模仿方法的重载

function doAdd(){
  if(arguments.length == 1){
    alert(arguments[0] + 10);
  }else if(arguments.length == 2){
    alert(arguments[0] + arguments[1]);
  }
}
doAdd(10); //20
doAdd(30, 20); //50

es6函数的扩展

函数参数的默认值

在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

上面代码检查函数log的参数y有没有赋值，如果没有，则指定默认值为World。这种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用。就像上面代码的最后一行，参数y等于空字符，结果被改为默认值。

为了避免这个问题，通常需要先判断一下参数y是否被赋值，如果没有，再等于默认值。

if (typeof y === 'undefined') {
  y = 'World';
}

ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

可以看到，ES6的写法比ES5简洁许多，而且非常自然。下面是另一个例子。

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}

var p = new Point();
p // { x: 0, y: 0 }

除了简洁，ES6的写法还有两个好处：首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；其次，有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

参数变量是默认声明的，所以不能用let或const再次声明。

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

上面代码中，参数变量x是默认声明的，在函数体中，不能用let或const再次声明，否则会报错。

与解构赋值默认值结合使用

参数默认值可以与解构赋值的默认值，结合起来使用。

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined

上面代码使用了对象的解构赋值默认值，而没有使用函数参数的默认值。只有当函数foo的参数是一个对象时，变量x和y才会通过解构赋值而生成。如果函数foo调用时参数不是对象，变量x和y就不会生成，从而报错。如果参数对象没有y属性，y的默认值5才会生效。

下面是另一个对象的解构赋值默认值的例子。

function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}

fetch('http://example.com', {})
// "GET"

fetch('http://example.com')
// 报错

上面代码中，如果函数fetch的第二个参数是一个对象，就可以为它的三个属性设置默认值。

上面的写法不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数。这时，就出现了双重默认值。

function fetch(url, { method = 'GET' } = {}) {
  console.log(method);
}

fetch('http://example.com')
// "GET"

上面代码中，函数fetch没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET。

参数默认值的位置

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

// 例一
function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1]

// 例二
function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

上面代码中，有默认值的参数都不是尾参数。这时，无法只省略该参数，而不省略它后面的参数，除非显式输入undefined。

如果传入undefined，将触发该参数等于默认值，null则没有这个效果。

function foo(x = 5, y = 6) {
  console.log(x, y);
}

foo(undefined, null)
// 5 null

上面代码中，x参数对应undefined，结果触发了默认值，y参数等于null，就没有触发默认值。

函数的length属性

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

上面代码中，length属性的返回值，等于函数的参数个数减去指定了默认值的参数个数。比如，上面最后一个函数，定义了3个参数，其中有一个参数c指定了默认值，因此length属性等于3减去1，最后得到2。

这是因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，rest参数也不会计入length属性。

(function(...args) {}).length // 0

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

rest参数

ES6引入rest参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面代码的add函数是一个求和函数，利用rest参数，可以向该函数传入任意数目的参数。

rest参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。下面是一个利用rest参数改写数组push方法的例子。

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}

var a = [];
push(a, 1, 2, 3)
console.log(a);

注意，rest参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

// 报错
function f(a, ...b, c) {
  // ...
}

函数的length属性，不包括rest参数。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

匿名函数

没有函数名的函数，叫做匿名函数

setTimeout(function(){
    console.log('我是匿名函数');
}, 1000);

上面例子中的 function(){}, 就叫做匿名函数

回调函数

setTimeout(function(){
    console.log('我是匿名函数');
}, 1000);

上面例子中的 function(){}, 就叫做匿名函数, 也可以叫回调函数，就是一个函数当作参数传入，给别人函数内来调用，也就是回调函数

立即执行函数

声明了函数后加括号，就立即执行

(function(){ console.log('我是立即执行函数') })();

递归函数

自己调用自己，就是递归函数了

let num = 0;
function add(){
    console.log(num++);
    add();
}

箭头函数

let fn = () => { console.log('我是箭头函数') }
fn();
let fn1 = res => console.log(res);
fn1(1)