秋招前端面试题总结

1、this指向问题，以前总是迷糊，现在总算是一知半解了。应当遵循以下原则，应该就能做对题目了。

• 如果一个标准函数，也就是非箭头函数，作为某个对象的方法被调用时，那么这个this指向的就是这个对象。涉及到闭包函数时，非严格模式下，this指向window（ES module浏览器），严格模式指向undefined
• 箭头函数的this是继承上一个函数作用域，this在函数定义的那一刻才确定的，不能通过call、apply、bind改变this指向。

看这些文字可能会很迷糊，直接上例子吧！

例1

var arr = [4, 5, 6]
let obj = {
    arr: [1, 2],
    inArr() {
        this.arr.push(3);
    },
    outArr: () => {
        this.arr.pop();
    }, 
    resetArr() {
        () => { // 注意这个箭头函数并没有执行，容易被坑
            console.log(this)
            this.arr = [7, 8, 9]
        }
    }
}
 
obj.inArr()
obj.outArr()
obj.resetArr()
console.log(arr) // [4, 5]
console.log(obj.arr) // [1, 2, 3]

例2

var name = 'window';
var person1 = {
    name: 'person1',
    show1: function() {
        console.log(this.name)
    },
    show2: () => console.log(this.name),
    show3: function() {
        return function() {
            console.log(this);
        }
    },
    show4: function() {
        return () => console.log(this.name);
    }
}
var person2 = { name: 'person2' };
 
person1.show1(); // person1
person1.show1.call(person2); // person2
 
person1.show2() // window
person1.show2.call(person2); // window，箭头函数不能改变this指向
 
person1.show3()(); // window对象 {} 闭包情况，非严格模式下this指向window
person1.show3().call(person2); // person2对象 {}
person1.show3.call(person2)(); // window对象 {}
 
person1.show4()(); // person1
person1.show4().call(person2); // person1
person1.show4.call(person2)(); // person2
 
// 这个例子如果没看懂，可以看看这个视频 
// https://www.bilibili.com/video/BV1JL411P752/?spm_id_from=333.337.search-card.all.click&vd_source=121d5b82e74c8de735f9bfb588f1044b

2、对象字面量创建对象 与 Object.create(null) 创建对象有什么区别？     

• 对象字面量创建对象 ，new Object()  和  { }  效果是一样。
• 通过Object.create(null)创建的对象是非常纯净的，原型链的属性和方法都不会携带。这就非常适合数组对象开发的时候，从对象中取值，提高循环效率。

     var  obj  = Object.create(null) ;  

     console.log(obj);   // 打印可以发现，obj 没有__proto__ 属性

• 如果需要使用到对象的继承属性和方法，那就使用 obj = {}  或 obj = new Object() 这种方式。

3、哈夫曼树带权路径长度(WPL)计算，做笔试的时候经常碰到。参考这篇文章，很快就能学会。

哈夫曼树带权路径长度(WPL)计算 - 掘金