常见的手写代码题集，字节跳动前端岗位面试分享

实现一个 1/4 圆、任意弧度的扇形

有多种实现方法，这里选几种简单方法（我看得懂的）实现。

水平垂直居中

实现子元素的水平垂直居中

清除浮动

要求：清除浮动

可以通过 clear:both 或 BFC 实现

弹出框

使用 CSS 写一个弹出框效果

页面内容

弹出框

导航栏

要求：一个 div 内部放很多水平 div ，并可以横向滚动。

item1

item2

item3

item4

item5

item6

item7

item8

item9

CSS 部分完，总结，Flex 无敌。

---

JavaScript 部分

---

手写 bind、call 和 apply

Function.prototype.bind = function(context, …bindArgs) {

// func 为调用 bind 的原函数

const func = this;

context = context || window;

if (typeof func !== ‘function’) {

throw new TypeError(‘Bind must be called on a function’);

}

// bind 返回一个绑定 this 的函数

return function(…callArgs) {

let args = bindArgs.concat(callArgs);

if (this instanceof func) {

// 意味着是通过 new 调用的 而 new 的优先级高于 bind

return new func(…args);

}

return func.call(context, …args);

}

}

// 通过隐式绑定实现

Function.prototype.call = function(context, …args) {

context = context || window;

context.func = this;

if (typeof context.func !== ‘function’) {

throw new TypeError(‘call must be called on a function’);

}

let res = context.func(…args);

delete context.func;

return res;

}

Function.prototype.apply = function(context, args) {

context = context || window;

context.func = this;

if (typeof context.func !== ‘function’) {

throw new TypeError(‘apply must be called on a function’);

}

let res = context.func(…args);

delete context.func;

return res;

}

实现一个继承

// 参考 You Dont Know JavaScript 上卷

// 基类

function Base() {

}

// 派生类

function Derived() {

Base.call(this);

}

// 将派生类的原型的原型链挂在基类的原型上

Obje