一面二面紧挨着,视频面试只把记住的几个题记下来了
其余的都是我的 project 相关,没有列出来的必要

js实现继承

这是我当时实现的

1
2
3
4
5
6
7
8
9
function Animal(){
this.type = 'animal'
}

function dog(){
Animal.call(this)
dog.prototype = Animal.prototype
dog.prototype.constructor = dog
}

不应该把Animal的原型给dog,这样对于dog原型链操作会影响到父类

正确的实现应该是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
* js 继承实现
*/

const log = console.log

;
(function () {
function Person() {
this.name = "ownNamePerson"
}
Person.prototype.move = function move(params) {
log('I am person, can move')
}

function Woman(n) {
// 如果 父类不需要参数初始化
Person.call(this)

//如果父类需要参数初始化
// super(arguments[2]) 翻译成
//Person.call(this,arguments[2])

this.name = "iamWoman"
this.actualName = n
}

Woman.prototype = Object.create(Person.prototype)

// 也可以这样写,不过多调用了一次Person的构造函数
// Woman.prototype = new Person()

Woman.prototype.inWomanPrototype = function inWomanPrototype(params) {

}

Woman.go = function go(params) {

}

Woman.prototype.constructor = Woman

// 不能这么写,Woman 也需要有自己的原型链,这样Woman直接使用了Person的 prototype
//当Woman.prototype.go = function name(params) {

// }
// 会影响Person的prototype
// Woman.prototype = Person.prototype

// ---------test-------------------------

let woman = new Woman("iam woman name")

})();

实现bind

我当时的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Function.prototype.bind = function bind(fn) {
let that = this
let args = arguments
return function () {
fn.call(that, args)
}
}

function test() {
let that = this
}

let obj = {
name: "wwc"
}

let newtest = test.bind(obj)
newtest()

正确的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let b = Function.prototype.bind
Function.prototype.bind = Function.prototype.bind || function bind(ctx) {
let that = this
let slice = Array.prototype.slice
let bindArgs = slice.call(arguments,1)
// bind可以传递参数,返回的被绑定的函数同样可以传参,所以这里先保存第一次bind的参数,忽略ctx,从 index 1 开始
// 后面将调用时的参数传递进去,concat成一个array
return function b(args) {
// slice.call 将 arguments 转换为 Array
that.apply(ctx,bindArgs.concat(slice.call(arguments)))
// From https://stackoverflow.com/a/960870/7529562
//NOTE: The slice function is intentionally generic; it does not require that its this value be an Array object.
//Therefore it can be transferred to other kinds of objects for use as a method.
// Whether the slice function can be applied successfully to a host object is implementation-dependent.

//Therefore, slice works on anything that has a length property, which arguments conveniently does.
}
}

function test (a,b) {
console.log(arguments)
}

let obj = {
name: "wwc"
}

let newtest = test.bind(obj,'1','2')
newtest('3','4')

给一段代码判断执行顺序

// 判断下面输出顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
console.log('begin');
setTimeout(() => {
console.log('setTimeout 1');
Promise.resolve()
.then(() => {
console.log('promise 1');
setTimeout(() => {
console.log('setTimeout2');
});
})
.then(() => {
console.log('promise 2');
});
new Promise(resolve => {
console.log('a');
resolve();
}).then(() => {
console.log('b');
});
}, 0);
console.log('end');

给出代码判断this指向

1
2
3
4
5
6
7
let a = {b: function() { console.log(this) }, c: () => {console.log(this)}}

a.b()
a.c()

let d = a.b
d()

html文件解析过程,浏览器的重排,重绘

浏览器的渲染机制,为什么使用Virtual DOM,直接操作DOM的弊端是什么?

补全下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
function repeat(func, times, wait) {

}


// 输入
const repeatFunc = repeat(alert, 4, 3000);

// 输出
// 会alert4次 helloworld, 每次间隔3秒
repeatFunc('hellworld');
// 会alert4次 worldhellp, 每次间隔3秒
repeatFunc('worldhello')

我当时的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function repeat(func, times, wait) {
let timer
let count = 1

function set(f) {
timer = setTimeout(() => {
func(f)
if (count >= times) {
clearTimeout(timer)
return
}
set(f)
count++

}, wait)
}

return set
}


// 输入
const repeatFunc = repeat(alert, 4, 3000);

// 输出
// 会alert4次 helloworld, 每次间隔3秒
repeatFunc('hellworld');

这种实现如果调用两次 repeatFunc
一共会输出4次,因为 count 被公用了

而且只能接受一个参数

当时更好的写法没有想出来
面试官到最后给了一个写法,但是有错误,

改完之后:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
async function wait(seconds) {
return new Promise((res) => {
setTimeout(res, seconds);
});
}

function repeat(func, times, s) {
return async function (...args) {
for (let i = 0; i < times; i++) {
func.apply(null, args);
await wait(s);
}
};
}

let log = console.log
let repeatFunc = repeat(log,4,3000)
repeatFunc('HelloWorld')
repeatFunc('WorldHello')

输出

1
2
3
4
5
6
7
8
HelloWorld
WorldHello
HelloWorld
WorldHello
HelloWorld
WorldHello
HelloWorld
WorldHello

最初给的是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
async function wait(seconds) {
return new Promise((res) => {
setTimeout(res, seconds);
});
}

async function repeat(func, times, s) {
return function (...args) {
for (let i = 0; i < times; i++) {
func.apply(null, args);
await wait(s);
}
};
}

首先, 必须在 async 中使用 await
所以

1
2
3
return async function (...args) {

}

再者, async 函数返回值会被 Promise 包装
所以 async function repeat(){} 返回 Promise,并不是我们想要的 async function
所以这里去掉 async

最后,我把我之前的实现完善了一下
用闭包解决,并且支持多个参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function repeat(func, times, wait) {
return function set(...args) {
let timer
let count = 1
let print = () => {
timer = setTimeout(() => {
func.apply(null,args)
if (count >= times) {
clearTimeout(timer)
return
}
print()
count++

}, wait)
}
print()
}
}


// 输入
let log = console.log
const repeatFunc = repeat(log, 4, 3000);

// 输出
// 会alert4次 helloworld, 每次间隔3秒
repeatFunc('hellworld');
repeatFunc('1111')