每日前端手写题--day18

慕仲卿2023-10-22 22:24

以下题目来自掘金等其它博客，但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础，不妨和我一起参与到每日刷题的过程中来，如何？

第18天要刷的手写题如下：

实现extends操作符
不使用a标签完成a标签的功能
实现redux中的compose功能

下面是我的一些理解：

1. 实现extends操作符

分为以下几个步骤：

创建构造函数
设置构造函数的prototype的值并使之不可写
设置子类和父类之间的关系
设置子类原型上的方法

js 复制代码

// 使用extends的继承
class F extends T {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  getAge(){
    return this.age;
  }
}

// 可以用下面的方法代替
function F(age, ...rest) {
  const _this = Object.getPrototypeOf(this).apply(this, rest);
  _this.age = age;
  return _this;  
}

F.prototype = Object.create(T.prototype, {
  constructor: {value: F, writable: true, configurable: true}
});

Object.defineProperty(F, "prototype", {writable: false});

Object.setPrototypeOf(F, T);
F.prototype.getAge = function getAge(){
  return this.age;
}

2. 不使用a标签完成a标签的功能

主要是考虑在本页签上打开还是在新的页签上打开；前者是改变window.location.href的值，而后者是调用window.open的方法。

js 复制代码

function enableLink (target, url, style='blank') {
  const clickCb = function (){
    if (style==='origin') {window.location.href = url;} else if (style === 'blank') {window.open(url, '_blank')};
  }
  target.addEventListener('click', clickCb);
  return () => target.removeEventListener('click', clickCb);
  }
}

3. 实现redux中的compose功能

本质上是将二维的函数数组映射成一个一维的复合函数，使用数组上面的reduce方法完成此功能尤为合适

js 复制代码

function myCompose(...funs) {
  if (funs.length === 0) return arg => arg;
  if (funs.length === 1) return funs[0];
  return funs.reduce((_composed, _current)=>(...args)=>_composed(_current(...args)));
}