头条前端实习面试

一面二面紧挨着，视频面试只把记住的几个题记下来了
其余的都是我的 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