高阶JavaScript笔记（二）

四、纯函数与柯里化

理解JavaScript纯函数

• 确定的输入，一定会产生确定的输出；

• 函数在执行过程中，不能产生副作用；

  那么这里又有一个概念，叫做副作用，什么又是副作用呢？

  副作用（side effect） 其实本身是医学的一个概念，比如我们经常说吃什么药本来是为了治病，可能会产生一

  些其他的副作用，在计算机科学中，也引用了副作用的概念，表示在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响，比如修改了全局变量，修改参数或者改变外部的存储；

案例

我们来看一个对数组操作的两个函数：

• slice：slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组；

  slice就是一个纯函数，不会修改传入的参数；

• splice：splice截取数组, 会返回一个新的数组, 也会对原数组进行修改；

  splice修改掉调用的数组对象本身,

var names = ["abc", "cba", "nba", "dna"]
​
// slice只要给它传入一个start/end, 那么对于同一个数组来说, 它会给我们返回确定的值
// slice函数本身它是不会修改原来的数组
// slice -> this
// slice函数本身就是一个纯函数
var newNames1 = names.slice(0, 3)
console.log(newNames1)
console.log(names)
​
// ["abc", "cba", "nba", "dna"]
// splice在执行时, 有修改掉调用的数组对象本身, 修改的这个操作就是产生的副作用
// splice不是一个纯函数
var newNames2 = names.splice(2)
console.log(newNames2)
console.log(names)

纯函数在函数式编程中的重要性

• 因为你可以安心的编写和安心的使用；
• 你在写的时候保证了函数的纯度，只是单纯实现自己的业务逻辑即可，不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改；
• 你在用的时候，你确定你的输入内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出；

JavaScript柯里化

柯里化也是属于函数式编程里面一个非常重要的概念

• 只传递给函数一部分参数来调用它，让它返回一个函数去处理剩余的参数；
• 这个过程就称之为柯里化；

function add(x, y, z) {
  return x + y + z
}
​
var result = add(10, 20, 30)
console.log(result)
​
//柯里化代码
function sum1(x) {
  return function(y) {
    return function(z) {
      return x + y + z
    }
  }
}
​
var result1 = sum1(10)(20)(30)
console.log(result1)
​
// 简化柯里化的代码
var sum2 = x => y => z => {
  return x + y + z
}
​
console.log(sum2(10)(20)(30))
​
var sum3 = x => y => z => x + y + z
console.log(sum3(10)(20)(30))

柯里化让函数的职责单一

那么为什么需要有柯里化呢？

• 在函数式编程中，我们其实往往希望一个函数处理的问题尽可能的单一，而不是将一大堆的处理过程交给一个函数来处理；
• 那么我们是否就可以将每次传入的参数在单一的函数中进行处理，处理完后在下一个函数中再使用处理后的结 果

function add(x, y, z) {
  x = x + 2
  y = y * 2
  z = z * z
  return x + y + z
}
​
console.log(add(10, 20, 30))
​
//职责单一
function sum(x) {
  x = x + 2
​
  return function(y) {
    y = y * 2
​
    return function(z) {
      z = z * z
​
      return x + y + z
    }
  }
}
​
console.log(sum(10)(20)(30))

柯里化帮助我们参数逻辑复用

function makeAdder(count) {
  count = count * count
​
  return function(num) {
    return count + num
  }
}
​
// var result = makeAdder(5)(10)
// console.log(result)
var adder5 = makeAdder(5)
adder5(10)
adder5(14)
adder5(1100)
adder5(555)

打印日志案例

function log(date, type, message) {
  console.log(`[${date.getHours()}:${date.getMinutes()}][${type}]: [${message}]`)
}
​
// log(new Date(), "DEBUG", "查找到轮播图的bug")
// log(new Date(), "DEBUG", "查询菜单的bug")
// log(new Date(), "DEBUG", "查询数据的bug")
​
// 柯里化的优化 每次函数逻辑可以拆分
var log = date => type => message => {
  console.log(`[${date.getHours()}:${date.getMinutes()}][${type}]: [${message}]`)
}
​
// 如果我现在打印的都是当前时间
var nowLog = log(new Date())
nowLog("DEBUG")("查找到轮播图的bug")
nowLog("FETURE")("新增了添加用户的功能")
​
var nowAndDebugLog = log(new Date())("DEBUG")
nowAndDebugLog("查找到轮播图的bug")
nowAndDebugLog("查找到轮播图的bug")
nowAndDebugLog("查找到轮播图的bug")
nowAndDebugLog("查找到轮播图的bug")
​
var nowAndFetureLog = log(new Date())("FETURE")
nowAndFetureLog("添加新功能~")

自动柯里化函数的实现

function add1(x, y, z) {
  return x + y + z
}
​
// 柯里化函数的实现hyCurrying
function hyCurrying(fn) {
  function curried(...args) {
    // 判断当前已经接收的参数的个数, 可以参数本身需要接受的参数是否已经一致了
    // 1.当已经传入的参数 大于等于 需要的参数时, 就执行函数
    if (args.length >= fn.length) {
      // fn(...args)
      // fn.call(this, ...args)
      return fn.apply(this, args)
    } else {
      // 没有达到个数时, 需要返回一个新的函数, 继续来接收的参数 递归
      function curried2(...args2) {
        // 接收到参数后, 需要递归调用curried来检查函数的个数是否达到
        return curried.apply(this, args.concat(args2))
      }
      return curried2
    }
  }
  return curried
}
​
var curryAdd = hyCurrying(add1)
​
​
console.log(curryAdd(10, 20, 30))
console.log(curryAdd(10, 20)(30))
console.log(curryAdd(10)(20)(30))

组合函数

组合（Compose）函数是在JavaScript开发过程中一种对函数的使用技巧、模式：

• 比如我们现在需要对某一个数据进行函数的调用，执行两个函数fn1和fn2，这两个函数是依次执行的；
• 那么如果每次我们都需要进行两个函数的调用，操作上就会显得重复；
• 那么是否可以将这两个函数组合起来，自动依次调用呢？
• 这个过程就是对函数的组合，我们称之为 组合函数（Compose Function）；

function double(num) {
  return num * 2
}
​
function square(num) {
  return num ** 2
}
​
var count = 10
var result = square(double(count))
console.log(result)
​
// 实现最简单的组合函数
function composeFn(m, n) {
  return function(count) {
    return n(m(count))
  }
}
​
var newFn = composeFn(double, square)
console.log(newFn(10))

实现组合函数

//实现组合函数
function hyCompose(...fns) {
  var length = fns.length
  //判断是否为函数
  for (var i = 0; i < length; i++) {
    if (typeof fns[i] !== 'function') {
      throw new TypeError("Expected arguments are functions")
    }
  }
​
  function compose(...args) {
    var index = 0
    //apply和call是为了保持this指向不变
    var result = length ? fns[index].apply(this, args): args
    //不断调用函数直到完成
    while(++index < length) {
      result = fns[index].call(this, result)
    }
    return result
  }
  return compose
}
​
function double(m) {
  return m * 2
}
​
function square(n) {
  return n ** 2
}
​
var newFn = hyCompose(double, square)
console.log(newFn(10))

五、JS额外知识补充

with语句

• with语句 扩展一个语句的作用域链。
• 不建议使用with语句，因为它可能是混淆错误和兼容性问题的根源。

"use strict";
​
var message = "Hello World"
// console.log(message)
​
// with语句: 可以形成自己的作用域
var obj = {name: "why", age: 18, message: "obj message"}
​
function foo() {
  function bar() {
    with(obj) {
      console.log(message)
      console.log("------")
    }
  }
  bar()
}
​
foo()
​
var info = {name: "kobe"}
with(info) {
  console.log(name)
}

eval函数

• eval是一个特殊的函数，它可以将传入的字符串当做JavaScript代码来运行。

• 不建议在开发中使用eval：

  • eval代码的可读性非常的差（代码的可读性是高质量代码的重要原则）；
  • eval是一个字符串，那么有可能在执行的过程中被刻意篡改，那么可能会造成被攻击的风险；
  • eval的执行必须经过JS解释器，不能被JS引擎优化；

var jsString = 'var message = "Hello World"; console.log(message);'
​
var message = "Hello World"
console.log(message)
​
eval(jsString)
​

认识严格模式

• 在ECMAScript5标准中，JavaScript提出了严格模式的概念（Strict Mode） ：

  • 严格模式很好理解，是一种具有限制性的JavaScript模式，从而使代码隐式的脱离了 ”懒散（sloppy）模式“；
  • 支持严格模式的浏览器在检测到代码中有严格模式时，会以更加严格的方式对代码进行检测和执行；

• 严格模式对正常的JavaScript语义进行了一些限制：

  • 严格模式通过 抛出错误 来消除一些原有的 静默（silent）错误；
  • 严格模式让JS引擎在执行代码时可以进行更多的优化（不需要对一些特殊的语法进行处理）；\
  • 严格模式禁用了在ECMAScript未来版本中可能会定义的一些语法；

那么如何开启严格模式呢？严格模式支持粒度话的迁移：

• 可以支持在js文件中开启严格模式；

  "use strict"
  ​
  var message = "Hello World"
  console.log(message)
  ​
  // 静默错误
  true.foo = "abc"
  

• 也支持对某一个函数开启严格模式；

  function foo() {
    "use strict";
  ​
    true.foo = "abc"
  }
  ​
  foo()
  

严格模式限制

这里我们来说几个严格模式下的严格语法限制：

• JavaScript被设计为新手开发者更容易上手，所以有时候本来错误语法，被认为也是可以正常被解析的；
• 但是这种方式可能给带来留下来安全隐患；
• 在严格模式下，这种失误就会被当做错误，以便可以快速的发现和修正；

1. 无法意外的创建全局变量

2. 严格模式会使引起静默失败(silently fail,注:不报错也没有任何效果)的赋值操作抛出异常

3. 严格模式下试图删除不可删除的属性

4.严格模式不允许函数参数有相同的名称

5. 不允许0的八进制语法

6. 在严格模式下，不允许使用with

7. 在严格模式下，eval不再为上层引用变量

8. 严格模式下，this绑定不会默认转成对象

"use strict"
​
// 1. 禁止意外创建全局变量
message = "Hello World"
console.log(message)
​
function foo() {
  age = 20
}
​
foo()
console.log(age)
​
// 2.不允许函数有相同的参数名称
function foo(x, y, x) {
  console.log(x, y, x)
}
​
foo(10, 20, 30)
​
​
// 3.静默错误
true.name = "abc"
NaN = 123
var obj = {}
Object.defineProperty(obj, "name", {
  configurable: false,
  writable: false,
  value: "why"
})
console.log(obj.name)
obj.name = "kobe"
​
delete obj.name
​
// 4.不允许使用原先的八进制格式 0123
var num = 0o123 // 八进制
var num2 = 0x123 // 十六进制
var num3 = 0b100 // 二进制
console.log(num, num2, num3)
​
// 5.with语句不允许使用
​
// 6.eval函数不会向上引用变量了
var jsString = '"use strict"; var message = "Hello World"; console.log(message);'
eval(jsString)
​
console.log(message)

严格模式下的this

在严格模式下, 自执行函数(默认绑定)会指向undefined

"use strict"
​
// 在严格模式下, 自执行函数(默认绑定)会指向undefined
// 之前编写的代码中, 自执行函数我们是没有使用过this直接去引用window
function foo() {
  console.log(this)
}
​
var obj = {
  name: "why",
  foo: foo
}
​
foo()
​
obj.foo()
var bar = obj.foo
bar()
​
​
// setTimeout的this
// fn.apply(this = window)
setTimeout(function() {
  console.log(this)
}, 1000);