如何让代码更加容易复用。
继承
在传统的 OOP 外面，咱们通常会提到继承（Inheritance）和多态（Polymorphism）。继承是用来在父类的根底上创立一个子类，来继承父类的属性和办法。多态则容许咱们在子类外面调用父类的构建者，并且笼罩父类里的办法。
Javascript 如何通过继承多态重用？
从 ES6 开始，通过 extends 的形式来做继承
class Widget { appName = "外围微件"; getName () { return this.appName; }}class Calendar extends Widget {}var calendar = new Calendar();console.log(calendar.hasOwnProperty("appName")); // 返回 trueconsole.log(calendar.getName()); // 返回 "外围微件"calendar.appName = "日历利用"console.log(typeof calendar.getName); // 返回 functionconsole.log(calendar.getName()); // 返回 “日历利用”从 ES6 开始，咱们能够通过 super 在子类构建者外面调用父类的构建者，并且笼罩父类里的属性。
class Widget { constructor() { this.appName = "外围微件"; } getName () { return this.appName; }}class Calendar extends Widget { constructor(){ super(); this.appName = "日历利用"; }}var calendar = new Calendar();console.log(calendar.hasOwnProperty("appName")); // 返回 trueconsole.log(calendar.getName()); // 返回 "日历利用"console.log(typeof calendar.getName); // 返回 functionconsole.log(calendar.getName()); // 返回 “日历利用”通过继承 React.Component 来创立一个 WelcomeMessage 的子类。
class WelcomeMessage extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}受权
作为个体对象能够受权给一个平台或者别人来一起做一件事。
如何通过受权做到重用？
通过原型自身来做受权会更合乎直觉。
Object.create() 实现
var Widget = { setCity : function(City) {this.city = City; }, outputCity : function() {return this.city;}};var Weather = Object.create(Widget);Weather.setWeather = function (City, Tempreture) { this.setCity(City); this.tempreture = Tempreture;};Weather.outputWeather = function() { console.log(this.outputCity()+ ", " + this.tempreture);}var weatherApp1 = Object.create(Weather);var weatherApp2 = Object.create(Weather);weatherApp1.setWeather("北京","26度");weatherApp2.setWeather("南京","28度");weatherApp1.outputWeather(); // 北京, 26度weatherApp2.outputWeather(); // 南京, 28度通过 class 来实现
class SetLikeMap { // 初始化字典 constructor() { this.map = new Map(); } // 自定义汇合接口 count(key) { /*...*/ } add(key) { /*...*/ } delete(key) { /*...*/ } // 迭代返回字典中的键 [Symbol.iterator]() { return this.map.keys(); } // 局部性能受权给字典 keys() { return this.map.keys(); } values() { return this.map.values(); } entries() { return this.map.entries(); }}组合
对于受权，狭义上其实就是一种组合。然而这种组合更像是“个体和平台的单干”；而另一种组合更像是“团队外部的单干”，它也有很多的利用和实现形式：
如何通过借用做到重用？
在 JavaScript 中，函数有自带的 apply 和 call 性能。咱们能够通过 apply 或 call 来“借用”一个性能。这种形式，也叫隐性混入（Implicit mixin）。
Array.slice()
如何通过拷贝赋予重用？
显性混入
通过Object.assign()
“浅度拷贝”和“深度拷贝”浅拷贝通过延展操作符
// 数组浅拷贝var a = [ 1, 2 ];var b = [ ...a ];b.push( 3 );a; // [1,2]b; // [1,2,3]// 对象浅拷贝var o = { x: 1, y: 2};var p = { ...o };p.y = 3; o.y; // 2p.y; // 3通过 for in 循环
function shallowCopy(parent, child) { var i; child = child || {}; for (i in parent) { if (parent.hasOwnProperty(i)) { child[i] = parent[i]; } } return child;}深拷贝通过JSON.stringify()其余办法：
function deepCopy(parent, child) { var i, toStr = Object.prototype.toString, astr = "[object Array]"; child = child || {}; for (i in parent) { if (parent.hasOwnProperty(i)) { if (typeof parent[i] === "object") { child[i] = (toStr.call(parent[i]) === astr) ? [] : {}; deepCopy(parent[i], child[i]); } else { child[i] = parent[i]; } } } return child;}如何通过组合做到重用？
React 中的组合优于继承
在 React 当中，咱们也能够看到组合优于继承的无处不在，并且它同样体现在咱们后面讲过的两个方面，一个是“团队外部的单干”，另一个是“个体与平台单干”。上面，咱们先看看“团队外部的单干”的例子。
团队外部的单干
function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> );}function WelcomeDialog() { return ( <FancyBorder color="blue"> <h1 className="Dialog-title"> Welcome </h1> <p className="Dialog-message"> Thank you for visiting our spacecraft! </p> </FancyBorder> );}个体与平台单干
function Dialog(props) { return ( <FancyBorder color="blue"> <h1 className="Dialog-title"> {props.title} </h1> <p className="Dialog-message"> {props.message} </p> </FancyBorder> );}function WelcomeDialog() { return ( <Dialog title="Welcome" message="Thank you for visiting our spacecraft!" /> );}