关于前端:day9-深入理解继承Delegation和组合

如何让代码更加容易复用。
继承
在传统的 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")); // 返回 true
console.log(calendar.getName()); // 返回 "外围微件"

calendar.appName = "日历利用"
console.log(typeof calendar.getName); // 返回 function
console.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")); // 返回 true
console.log(calendar.getName()); // 返回 "日历利用"
console.log(typeof calendar.getName); // 返回 function
console.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;  // 2
p.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!" />
  );
}

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据