小埋摸鱼学习法 - 设计模式
type: channel
link: https://topzhang.cn/tag/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/
items: JavaScript设计模式与开发实践读书笔记

JavaScript设计模式与开发实践读书笔记
type: item
date: 2022-04-25T02:45:00+00:00
description: 基础知识编程语言按照数据类型来区分的话是分为静态类型语言和动态类型语言。而JavaScript是一门典型的动态语言，我们对变量进行赋值的时候不用考虑其类型，所以JavaScript具有很大的灵活性。多态多态的含义： 同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果。其实在JavaScript中多态很容易实现，下面演示一段‘多态‘的代码：class Duck { } class Dog { } const dog = new Dog(); const duck = new Duck() function makeSound(animal) { if (animal instanceof Duck) { console.log('嘎嘎嘎'); } else if (animal instanceof Dog) { console.log('wangwangwang'); } } makeSound(duck); makeSound(dog) // 嘎嘎嘎 // wangwangwang上面的代码确实是体现了多态，传入不同的参数反应出不同的结果，但是其内部实现确实有点问题，当我们又添加了一个动物，我们需要修改makeSound中的代码，如果加了很多动物，那该函数内部的if else也会增加，所以我们可以把不变的保留，变得部分提取出去。优化后的代码：class Duck { sound() { console.log('gagaga'); } } class Dog { sound() { console.log('wangwangwang') } } const dog = new Dog(); const duck = new Duck() function makeSound(animal) { animal.sound() } makeSound(duck); makeSound(dog) // gagaga // wangwangwang将各个动物叫的方法封装到自身上，然后makeSound只会调用sound方法，只要有该方法的对象都可以穿入makeSound。这样我们只需要添加一个动物并实现sound方法，并不需要去修改makeSound了。这样就消除了分支语句。函数currying和uncurryingcurrying又称部分求值。一个currying的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。当我们需要对一个函数的参数做分步的处理就可以使用该方式。const currying = function (fn) { console.log(); const length = fn.length; return function (...args) { console.log(arguments); if (args.length < length) { return currying(fn.bind(this, ...args)); } else { return fn.apply(this, args) } } } function MyCurrying(fn) { function curried(...args) { // 判断接收参数个数 if (args.length >= fn.length) { return fn.apply(this, args) } else { // 没有达到参数个数要求就返回函数继续接收参数，递归调用 function curried2(...args2) { return curried.apply(this, [...args, ...args2]) } return curried2 } } return curried } function sum(a, b, c, d) { return `[${a}]-[${b}]:${c}:${d}` } const currySum = currying(sum); console.log(currySum(1, 2, 3)(4)); console.log(currySum(1, 2)(3, 4)); const waitSum = currySum('feat', 'zhangsan'); console.log(waitSum('添加功能', '添加了')); console.log(waitSum('修改字段')('修改失败'));在JavaScript中一个对象也未必只能使用它自身的方法，我们可以通过call/apply来实现这一功能functio…