Daily Question

1.React/Vue 列表渲染 key 的作用？

• key 是给每一个 vnode 的唯一 id
• 可以依靠 key,更准确, 更快的拿到 oldVnode 中对应的 vnode 节点.

2.ES5/ES6 继承除写法以外的区别？

1. class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。

const bar = new Bar() // it's ok
function Bar() {
  this.bar = 42
}
const foo = new Foo() // ReferenceError: Foo is not defined
class Foo {
  constructor() {
    this.foo = 42
  }
}

2. class 声明内部会启用严格模式。
3. class 的所有方法（包括静态方法和实例方法）都是不可枚举的。
4. class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。
5. 必须使用 new 调用 class。
6. class 内部无法重写类名

3.简单实现一个 eval

通过Function 构造函数 创建一个新的 Function 对象。 在 JavaScript 中, 每个函数实际上都是一个 Function 对象。

new Function ([arg1[, arg2[, ...argN]],] functionBody). MDN (opens new window)

function cEval(exp) {
  return new Function('return '+ exp).call(this)
}
const str = '1+1'
cEval(str)

4.parseInt 深入

parseInt(string, radix)

对于第一个参数 string：

• 如果参数不是一个字符串，则将其转换为字符串(使用 ToString 抽象操作)
• 字符串开头的空白符将会被忽略

对于第二个参数 radix:

• 一个介于 2 和 36 之间的整数(数学系统的基础)，表示上述字符串的基数

radix 为 undefined,0 或者没有指定的情况下:

• 以"0x"或者"0X"开头, 则基数是 16
• string 以"0"开头, 基数是 8（八进制）或者 10（十进制）
• string 以其它任何值开头，则基数是 10 (十进制)

如果被解析参数的第一个字符无法被转化成数值类型，则返回 NaN
radix 参数为 n 将会把第一个参数看作是一个数的 n 进制表示，而返回的值则是十进制的

注意：

• 使用 parseInt 去截取包含 e 字符数值部分会造成难以预料的结果
• 如果 parseInt 遇到了不属于 radix 参数所指定的基数中的字符那么该字符和其后的字符都将被忽略。接着返回已经解析的整数部分
• 基数是 1，返回 NaN

base 转换规则表

String	Base36	...	Base10	...	Base2
0	0	...	0	...	0
1	1	...	1	...	1
2	2	...	2	...	2
3	3	...	3	...	NaN
4	4	...	4	...	NaN
5	5	...	5	...	NaN
6	6	...	6	...	NaN
7	7	...	7	...	NaN
8	8	...	8	...	NaN
9	9	...	9	...	NaN
a	10	...	NaN	...	NaN
b	11	...	NaN	...	NaN
c	12	...	NaN	...	NaN
d	13	...	NaN	...	NaN
e	14	...	NaN	...	NaN
f	15	...	NaN	...	NaN
g	16	...	NaN	...	NaN
h	17	...	NaN	...	NaN
i	18	...	NaN	...	NaN
j	19	...	NaN	...	NaN
k	20	...	NaN	...	NaN
l	21	...	NaN	...	NaN
m	22	...	NaN	...	NaN
n	23	...	NaN	...	NaN
o	24	...	NaN	...	NaN
p	25	...	NaN	...	NaN
q	26	...	NaN	...	NaN
r	27	...	NaN	...	NaN
s	28	...	NaN	...	NaN
t	29	...	NaN	...	NaN
u	30	...	NaN	...	NaN
v	31	...	NaN	...	NaN
w	32	...	NaN	...	NaN
x	33	...	NaN	...	NaN
y	34	...	NaN	...	NaN
z	35	...	NaN	...	NaN

String
0
1
2
3
4
5
6
7
8
9
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z

console结果可能不准确，按F12打开控制台查看

5.position sticky ?

相对用户的滚动位置定位

6.call & apply & bind 实现

• call

Function.prototype._call = function(context, ...args) {
  context = context || window
  context.fn = this
  const result = context.fn(...args)
  delete context.fn
  return result
}

• apply

Function.prototype._apply = function(context, arg = []) {
  context = context || window
  context.fn = this
  const result = context.fn(...arg)
  delete context.fn
  return result
}

• bind

Function.prototype._bind = function(context, ...args) {
  return () => this.apply(context, args)
}