每日前端手写题--day18

如果你最近想要换工作或者巩固一下自己的前端知识基础，不妨和我一起参与到每日刷题的过程中来，如何？

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

1. 实现extends操作符

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

3. 实现redux中的compose功能

下面是我的一些理解：

1. 实现extends操作符

分为以下几个步骤：

• 创建构造函数

• 设置构造函数的prototype的值并使之不可写

• 设置子类和父类之间的关系

• 设置子类原型上的方法

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的方法。

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方法完成此功能尤为合适

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)));
}

最后

如果你现在正在找工作，可以私信“web”进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。