面向对象编程

“世间万物皆为对象”，这是我们开始学习编程语言的时候，老师大都会讲的一句话，顾名思义，就是我们常说的面向对象编程。在现如今流行的编程语言中，大多数的编程语言都是面向对象编程的语言，还有一些面向过程的编程，如大学都会学的C语言。

虽然Javascript是一门脚本语言，但是它也不例外，也是一门面向对象的编程语言。从初期基于原型链的面向对象编程，到现在es6的class面向对象编程，越来越像Java、C#等强类型语言的面向对象。

函数式编程发展

Javascript经过多年的发展，衍生出了很多的类似Vue、React、Angular等优秀框架，这些框架经过多年的发展，进化得也比较快。它们都用相同的进化特点，都拥抱了函数式编程。

• 比如近些年React推出了Hook函数式编程

import React, { useState } from 'react';

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

如果使用传统的class方式，当业务变得复杂之后，组件之间共享状态变得频繁，此时组件将变得非常难以理解和维护，复用状态逻辑更是难上加难。使用hook之后，无论业务怎么变化，state只会存在自己的组件，对其它组件的影响非常的小。

• 再比如前不久Vue发布了3.0版本的源码，3.0源码也弃用了基于原型链的面向对象编程，全部采用函数式编程。

export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers
  )
}

// Return a reactive-copy of the original object, where only the root level
// properties are reactive, and does NOT unwrap refs nor recursively convert
// returned properties.
export function shallowReactive<T extends object>(target: T): T {
  return createReactiveObject(
    target,
    false,
    shallowReactiveHandlers,
    shallowCollectionHandlers
  )
}
...

从这两大框架的向函数式编程的靠拢，说明函数式编程肯定是有可取之处，要不然也不会拼命使用函数式编程的。下面就来说一下函数式编程的好处吧。

函数式编程的优点

• 复用性

这个优点是所有函数编程的优点，我们可以一个函数，多处调用。这也是尤雨溪在Vue3.0版本使用函数式编程的最重要的原因，使得Vue3.0版本的体积比Vue2.0版本的体积小很多，使得Vue3.0的性能也提升了不少。

• 防污染

这个优点也是函数式编程的一个比较重要的优点，函数与函数之间相互隔离，互不影响。其实这个早在Vue2.0就有所体现，如果你细心的话就应该发现为什么Vue2.0组件里面，通常data是一个函数，函数里面return出了一个对象。

<template>
	<div class="title">
		<h1>按钮被点击了{{ count }}次</h1>
		<button v-on:click="count++">点击</button>
	</div>
</template>
<script>
	export default {
	  name: 'BtnCount',
	  data () {
	    return {
	      count: 0
	    }
	  }
	}
</script>
<style scoped>
	.title {
		background-color: red
	}
</style>

那么当其它多个组件引用这个组件时，当某个引用这个组件的data数据发生变化时，其它引用这个组件的data数据是不会受任何影响的。

• 可维护性

由于每个函数只专注于它自己的功能，因此我们在后期的维护过程中也只是针对对应的功能函数，不会影响其它的功能。

此外，函数式编程的优点还有很多，这里就简单的举这几个例子，如果大家还有更好的想法，可以留言，大家互相的探讨，共同进步。