[toc]

新手的第一堂函数课：定义与参数

函数式的不同点到底是什么

Javascript中对象有以下几种常用功能：

• 对象可以通过字面量来创建
• 对象可以赋值给变量，数组项，或其他对象的属性。

    let ninjia = {};// 创建一个对象
    ninjiaArray.push({});// 数组增加新对象
    ninjia.data = {};//对象属性赋值

• 对象可以通过函数参数传递给函数

const fun = (obj) => {
   console.log(obj); 
}
fun({});

• 对象可以作为函数返回值

const fun = () => {
   return {};
}

• 对象具有动态创建和分配的属性

let ninjia = {};
ninjia.name = 'hello';//分配新属性

函数是第一类对象

函数拥有对象的所有能力，因此，函数也能够像刚刚楼上写法一样

• 通过字面量创建
• 赋值给变量，数组项或者其他对象的属性
• 作为函数的参数传递
• 作为函数的返回值
• 具有动态创建和分配的属性

对象能做的任何一件事，函数也能做。函数也是对象，唯一的特殊之处在于它可调用的（invokable）,即函数会被调用以便执行某项动作。

回调函数

image.png

sort 排序

let values = [0,3,2,5,7,8,4];
values.sort((v1,v2) => {
    return v1 - v2;
})

函数作为对象的乐趣

image.png

• 在集合中存储函数使我们轻易管理相关联的函数
• 记忆让函数能记住上次计算得到的值，从而提高后续调用性能

存储函数

如下面代码，可以通过一为函数直接添加属性ID来判断改函数是否已经被处理加入到cache中，加入则断言函数会输出false。

image.png

另外一种有用的技巧是使用函数属性时，可以通过该属性修改函数的自身。

自记忆函数

image.png

在楼上该代码isPrime函数中isPrime.answers = {},则是用来创建缓存对象，来记忆传入的值，只要函数还在，值就会还在

函数的定义

可分为四类

// 第一种 函数定义和函数表达式
function myFun() {
    return 1;
}
// 第二种 箭头函数
myArg => myArg * 2;
// 第三种 函数构造函数
new Function('a','b','return a + b');
// 第四种 生成器函数
function* myGen() {
    yield 1;
}

函数声明和函数表达式

• 函数声明

  
  image.png

• 函数声明示例

  
  image.png
• 函数表达式

函数表达式即像普通创建变量一样，把函数声明赋值给定义好的变量

let a = function () {}
let b = () => {}

• 函数声明和函数表达式示例

  
  image.png

IIFE 立即调用函数表达式

• 还有一件可能困扰你的是上面例子中我们立即调用的函数表达式方式：函数表达式被包裹在一对括号内。为什么这样做呢？其原因是纯语法层面的。JavaScript解析器必须能够轻易区分函数声明和函数表达式之间的区别。如果去掉包裹函数表达式的括号，把立即调用作为一个独立语句function() {}(3), JavaScript开始解析时便会结束，因为这个独立语句以function开头，那么解析器就会认为它在处理一个函数声明。每个函数声明必须有一个名字（然而这里并没有指定名字），所以程序执行到这里会报错。为了避免错误，函数表达式要放在括号内，为JavaScript解析器指明它正在处理一个函数表达式而不是语句。
• 还有一种相对简单的替代方案(function(){}(3))也能达到相同目标（然而这种方案有些奇怪，故不常使用）。把立即函数的定义和调用都放在括号内，同样可以为JavaScript解析器指明它正在处理函数表达式。

(function() {})(3);
(function() {}(3));

箭头函数

image.png

函数的实参和形参

• 形参是我们定义函数时所列举的变量
• 实参是我们调用函数时传递给函数的值

image.png

函数形参是在函数定义时指定的，而且所有类型的函数都能有形参

1. 函数声明
2. 函数表达式
3. 箭头函数

实参传递与形参定义相联系

实参的数量大于形参的数量时并不会抛出错误。这种问题JavaScript处理得很好，它会用以下步骤解决。如果实参的数量大于形参，那么额外的实参不会赋值给任何形参

image.png

剩余参数

ES6版本使用剩余参数,通过下面的扩展运行符，在旧版本还可能用到的arguments这一伪数组的形参来拿取函数传递进来的参数
最后一位写扩展运算符才不会报错

image.png

函数的默认参数

const fun = (a = 1) => {
    console.log(a)
}
fun(2);//传递进去的2则会覆盖默认参数1，ES6的新写法