Javascript语言精粹学习笔记之函数

- JavaScript中的函数

• JavaScript中最好的特性就是它对函数的实现。它几乎无所不能。 但是,想必你也能预料到,函数在JavaScript里也并非万能药。
• 函数包含一组语句，它们是JavaScript 的基础模块单元， 用于代码复用、信息隐藏和组合调用。函数用于指定对象的行为。 一般来说，所谓编程就是将一组需求分解成一组函数与数据结构的技能。

1. 函数对象

函数的定义

• 函数是第一类对象（first-class object），被称为一等公民。函数与对象共存，我们也可以认为函数就是其他任意类的对象。由此可见，对象有的功能，函数也会拥有。
• 函数是程序执行过程中的主要模块单元，除了全局JavaScript是在页面构建阶段执行的，我们编写的所有脚本代码都将在一个函数内执行。
• 既然我们把函数看作是一类对象，那么我们在编写函数的时候就应该利用对象拥有的一些功能特性，并从中获益，编写出更高性能、更健壮的JavaScript代码。

函数是第一类对象

• 在JavaScript中，对象所拥有的功能，函数一样拥有。
• 函数也是对象，唯一不同的地方在于，函数是可以调用的（invokable），也就是说函数会被调用以便执行某项动作。
• 函数式编程更易测试、扩展和模块化。
• 函数可以通过字面量来创建
  函数可以赋值给变量、数组项，或是其他对象的属性
  函数可以作为参数传递给参数
  函数可以作为函数的返回值
  函数能够具有动态创建和分配的属性

2. 函数字面量

函数字面量由4部分组成。

//创建一个名为add的变量，并用来把两个数字相加的函数赋值给它。
var add = function (a, b) {
   
    return a + b;
}

• 第一部分，关键词 function
• 第二部分，函数名，但是可有可无。
• 第三部分，包含在括号内的参数，当然参数也是可有可无的，括号不能少。
• 第四部分，是一组包裹在大括号的语句块，也就是函数要执行的具体代码，当然不写代码也没问题，{} 是必须要的。

乍一看，这个不就是函数的定义么，怎么说是函数字面量呢？

• 其实，当函数做为表达式的时候，可以分成这四部分。第二部分，函数名，但是可有可无。 如果是函数声明，少了函数名会报错的。 所以说函数表达式才是这里所说的函数字面量。

例如：

function () {
   }

• 这个写法符合上面4条，但却不是表达式，运行会报语法错误。
  只有当作表达式的时候才能正常执行。

(function () {
   }); 
let a = function () {
   }; 
let obj = {
   fn: function () {
   }};

• 这样写都没问题

let fn = function test() {
   };

• 这个也是函数字面量，test是函数名，但是在这里只对函数体内可见，外部是不可调用的。

console.log(test); //报 test 未定义

• 这里的函数名可用于内部使用，比如一些递归调用的时候，这样会很方便。

3. 调用

什么是函数的调用

• 调用一个函数将暂停当前函数的执行，传递控制权和参数给新函数。除了声明时定义的形式参数，每个函数接收两个附加的参数:this和arguments。
• 参数this在面向对象编程中非常重要，它的值取决于调用的模式。在JavaScript中一共有四种调用模式:方法调用模式、函数调用模式、构造器调用模式和 apply调用模式。
• 这些模式在如何初始化关键参数this上存在差异。调用运算符是跟在任何产生一个函数值的表达式之后的一对圆括号。圆括号内可包含零个或多个用逗号隔开的表达式。每个表达式产生一个参数值。每个参数值被赋予函数声明时定义的形式参数名。
• 当实际参数（arguments)的个数与形式参数(parameters)的个数不匹配时不会导致运行时错误。如果实际参数值过多了，超出的参数值将被忽略。如果实际参数值过少，缺失的值将会被替换为undefined。对参数值不会进行类型检查:任何类型的值都可以被传递给参数。

函数的调用模式

(1) 基本函数调用模式

function basfn (){
   
	console.log("----");
}
basfn(); // ----

• 1.每个参数作为实参传递给声明函数时定义的形参；
• 2.this被绑定到全局变量（直接调用一般指的是window）

var object1 = {
    value: 1 };
var value = 2;
object1.printProps = function () {
   
    let printValue = function () {
   
        console.log(this.value); // 2
    };
    printValue();
    console.log(this.value); // 1
}
object1.printProps();

• 在printValue()函数在执行时，this.value值为2，也就是说，this指向的是全局对象，而不是对象object。
• 3.返回值：函数的返回值成为调用表达式的值。
  I. 如果函数返回是解释器到达结尾，也就是没有执行到return xxx的语句。返回值为undefined。
  II. 如果函数返回是因为接受器执行到return xxx语句， 返回return之后的值。
  III. 如果return语句后没有值，即return，则返回undefined。

(2) 方法调用模式

• 当一个函数被保存为对象的一个属性时，称为方法。当一个方法被调用时,this被绑定到该对象。如果一个调用表达式包含一个属性存取表达式(即一个﹒点表达式或[subscript]下标表达式)，那么它被当作一个方法来调用。
• 1.参数和返回值的处理与函数调用一致
• 2.执行上下文this为该对象

function print() {
   
    console.log(this.value);
}
var value = 1;
var object = {
    value: 2 };
object.m = print;
// 作为函数调用
print();  // 1
// 作为方法调用
object.m(); // 2

• 当调用print时，this绑定的是全局对象，打印全局变量value值1。
  但是当调用object.m()时，this绑定的是方法m所属的对象Object，所以打印的值为Object.value，即2。

(3) 构造器调用模式

• 函数或方法调用之前带有关键字new，它就构成构造函数调用。
• 如果在一个函数前面带上new来调用，那么将创建一个隐藏连接到该函数prototype成员的新对象，同时this将会被绑定到那个新对象上。new前缀也会改变return语句的行为。

function fn() {
    
	console.log('------');
}
var obj = new fn(); //------

• 1.参数处理：一般情况构造器参数处理和函数调用模式一致。但如果构造函数没用形参，JavaScript构造函数调用语法是允许省略实参列表和圆括号的。

var obj = new Object();
var obj = new Object;  // 这两段代码是等价的

• 2.函数的执行上下文为新创建的对象。

function fn(value) {
   
    this.value = value;
}
var value = 1;
var obj = new fn(2);
console.log(value); // 1
console.log(obj.value); // 2
fn(3