头条前端实习面试
一面二面紧挨着，视频面试只把记住的几个题记下来了
其余的都是我的 project 相关，没有列出来的必要
这是我放在印象笔记的，所以还有当时实现的代码
也不知道对不对，大家看的时候还能帮我找找错 嘿嘿 :)
js实现继承
这是我当时实现的
function Animal(){
this.type = 'animal'
}
function dog(){
Animal.call(this)
dog.prototype = Animal.prototype
dog.prototype.constructor = dog
}
不应该把Animal的原型给dog，这样对于dog原型链操作会影响到父类
正确的实现应该是
/**
* 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
我当时的实现
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()
正确的实现
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')
给一段代码判断执行顺序
// 判断下面输出顺序
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指向
let a = {b: function() { console.log(this) }, c: () => {console.log(this)}}
a.b()
a.c()
let d = a.b
d()
html文件解析过程，浏览器的重排，重绘
浏览器的渲染机制，为什么使用Virtual DOM，直接操作DOM的弊端是什么？
补全下面代码
function repeat(func, times, wait) {
}
// 输入
const repeatFunc = repeat(alert, 4, 3000);
// 输出
// 会alert4次 helloworld, 每次间隔3秒
repeatFunc('hellworld');
// 会alert4次 worldhellp, 每次间隔3秒
repeatFunc('worldhello')
我当时的实现
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 被公用了
而且只能接受一个参数
当时更好的写法没有想出来
面试官到最后给了一个写法，但是有错误，
改完之后：
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')
输出
HelloWorld
WorldHello
HelloWorld
WorldHello
HelloWorld
WorldHello
HelloWorld
WorldHello
最初给的是
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
所以
return async function (...args) {
}
再者， async 函数返回值会被 Promise 包装
所以 async function repeat(){} 返回 Promise，并不是我们想要的 async function
所以这里去掉 async
