三、前端js进阶面试题

74 阅读1分钟

1 this指向

  // this指向上一个调用者
       var j = {
           a: 10,
           b: {
               a: 12,
               fn: function() {
                   console.log(this) // j.b
                   console.log(this.a) // 12
               }
           }
       }
       j.b.fn()

2 闭包

表现形式: 方法里返回一个方法;

作用: 延长局部变量的生命周期;实现数据私有化,避免变量被污染;

应用场景: 防抖、节流、vue2中data函数的设计;

具体: juejin.cn/post/720133…

插播一个阿里面试题

     Object.prototype.sg = 'xz'
       let obj = Object.create(null) // 没有__proto__。 只是存值,不需要原型链的方法,用这个效率更高
       let obj2 = {}
       for(let k in obj) {
           console.log(k)
       }
       for(let k in obj2) {
           console.log(k)
       }

3 new 关键字

先创建一个空对象,然后将空对象的__proto__指向构造函数的prototype;然后再将构造函数的this指向空对象;最后返回这个加工好的对象(this)。


  // 普通函数默认返回undefined, 构造函数返回新创建的对象
        function Person() {
            this.name = 'zs'
            this.fn = function() {
                console.log(`name is ${this.name}`)
            }
        }
        Person.prototype.newFn = function() {
            console.log('hh')
        }
        let p1 = new Person()
        p1.fn()
        p1.newFn()
        
        // ******* 下面是new关键字做了什么?******
        // 1 创建一个空对象
        let p2 = null
        let obj = new Object()
        // 2 更改它的原型链
        obj.__proto__ = Person.prototype;
        // 3 更改this指向
        let res = Person.call(obj)
        // 4 判断返回值类型
        if (typeof res === 'object') {
            p2 = res
        } else {
            p2 = obj
        }
        p2.fn()
        p2.newFn()
        

4 事件委托

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

通俗来讲,事件代理/事件委托是利用事件冒泡的特性,将本应该绑定在多个元素上的事件绑定在他们的祖先元素上,尤其在动态添加子元素的时候,可以非常方便的提高程序性能,减小内存空间。

<ul id="ul">
        <li>0</li>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        const ul = document.getElementById('ul')
        ul.onclick = function(event) {
            const target = event.target
            if (target.nodeName === 'LI') {
                alert(target.innerText)
            }
        }
    </script>