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));