Web前端JS-03-JS函数

函数是一个特殊的对象，函数对象，js中函数应该是核心基础，那么今天我们来聊聊函数

tmpdir__17_9_7_15_04_07.jpg
温馨提示：文章结构如下，阅读完可能需要花费5分钟

一、 函数的类型

1. 普通函数

2. 匿名函数 - 没有函数名称

3. 高阶函数

4. 构造函数

二、 函数的调用4种方式

三、 函数的特殊使用

1. 函数式编程

2. 函数柯里化

3. 函数的组合

4. 闭包

5. 箭头函数 - ES6语法

一、 函数的类型

1. 普通函数

特点：

• 同名覆盖

• 默认包含arguments对象, arguments 类似数组，但是不是数组[object Arguments]

• return默认返回值undefined

  function sum(a, b=2) {
       console.log(a, b);
       const list = arguments; 
       console.log('-----',list, Object.prototype.toString.call(arguments));
    }
  sum(1,2,3);
  

2. 匿名函数 - 没有函数名称

2.1 函数作为返回参数

const sum = function (a, b) {
   return a + b;
};
console.log(sum(1,2));    

2.1 立即执行函数 - 只是执行一次

 (function(message) {
   console.log('----',message);
 })(1);     

3. 高阶函数

定义:高阶函数指的是一个函数以函数为参数，或以函数为返回值，或者既以函数为参数又以函数为返回值

3.1 高阶函数格式

 function funA(x) {
      return  x * x;
 }
 function funcB(a, b, fn) {
     console.log(fn(a) + fn(b));
 }
 funcB(2, 3, funA); // 结果 13

3.2 常用的高阶函数 数组的方法 map filter every some find等

 const arrList = [1,2,3,4,5];
 const resultArray = arrList.filter(function (x) {
     return x > 4;
 });
 console.log('-------',resultArray);

4. 构造函数

定义： 用 new 关键字来调用的函数，称为构造函数

 function Person(age, name) {
     this.age = 10;
     this.name = "孙悟空";
 }
 console.log(new Person(12, '历史'));

二、 函数的调用4种方式

• 方式一： 函数模式 - 自运行函数

  (function sum() {
     console.log('自运行函数');
  })();
  

• 方式二： 方法模式 - 对象方法运行

  const obj = {
     sum: function (a, b) {
         console.log('我是一个对象函数',a + b);
     }
  };
  obj.sum(1,3)
  

• 方式三：上下文调用模式 -使用 call 和 apply 动态调用
  区别：

1. apply 只能接收一个数组或者伪类数组
2. call 方法可以接收多个参数列表

 function sum(x, y) {
     console.log('动态调用',x + y);
 }
 sum.call(this,'a','b');
 sum.apply(this,['a','b']);      

• 方式四：构造器模式 - 构造器new 调用

特点： 使用 new 引导构造函数, 创建了一个实例对象 默认return this

function func(x,y) {
     console.log(x, y);
}
console.log('====',new  func(10, 40));

三、 函数的特殊使用

1. 函数式编程

特点： 重点实现方案是点语法，执行A函数返回对象本身，又执行B函数返回本身，这样可以不断的... 串联多个函数求结果

const string = "wo  shi  yi  a";
console.log(string.toLocaleUpperCase().trim().slice(0,4));

2. 函数柯里化

特点：柯里化又称部分求值，柯里化函数会接收一些参数，然后不会立即求值，而是继续返回一个新函数，将传入的参数通过闭包的形式保存，等到被真正求值的时候，再一次性把所有传入的参数进行求值

 function sum(x) {
     return function (y) {
         return x + y;
     }
 }
 const sumResult = sum(1);
 console.log('柯里化结果:',sumResult(2));

3. 函数的组合

const compose = function(f, g) {
    return function(x) {
        return f(g(x));
    };
};
const result = compose(function (x) {
 return  x = x + 1;
},function (y) {
   return y = 2 + y;
})(2);
console.log('----',result);

4. 闭包

特点：

1.两层以上的函数

2.内层函数使用外层函数的变量

3.函数内部变量的值始终保存在内存中

function outFunc() {
    const param = 2;
    function innerFunc() {
        return param * 4;
    }
    return innerFunc;
}

const func = outFunc();
const result = func();
console.log('-----',result); 

5. 箭头函数 - ES6语法

// 语法一
// (参数1, 参数2, …, 参数N) => { 函数声明 }
// (参数1, 参数2, …, 参数N) => 表达式（单一）
// //相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

const  funcA = (a) => a + a;
console.log(funcA('B'));


// 语法二
// (参数1 = 默认值, 参数2, ...rest) => {函数声明}

const  funcB = (a = 1, b = 2, ...rest) => {
    return  a + b + rest;
};
console.log(funcB('B', 'a',1,2,3));