4月8日海康威视Web前端机试

4月8日海康威视Web前端机试

1.事件处理顺序

• 事件捕获：从DOM根节点由上向下到目标节点
• 事件处理：在目标节点处进行处理
• 事件冒泡：处理后，从目标节点由下至上到DOM根节点

2.判断输出

var out = 25;
    var inner = {
      out: 20,
      func: function () {
        var out = 20;
        return this.out;
      }
    }
    console.log((inner.func, inner.func)());
    console.log(inner.func());
    console.log((inner.func)());
    console.log((inner.func = inner.func)());

答案：25， 20， 20， 25

1. (inner.func, inner.func)()：逗号运算符返回 inner.func，然后调用该函数。由于没有明确的调用对象，this 指向全局对象，因此返回全局变量 out 的值 25。
2. inner.func()：直接调用 inner 对象的 func 方法，this 指向 inner 对象，因此返回 inner.out 的值 20。
3. (inner.func)()：括号只是改变了表达式的优先级，仍然是直接调用 inner 对象的 func 方法，this 指向 inner 对象，因此返回 inner.out 的值 20。
4. (inner.func = inner.func)()：赋值运算符返回赋值表达式的值，即 inner.func，然后调用该函数。由于没有明确的调用对象，this 指向全局对象，因此返回全局变量 out 的值 25。

3.选择获取元素时

• document.querySelector()

  #id\

• document.getElementById()括号里直接是id本人，不要加#

4.CSS里面的outline

1. outline（轮廓）在 CSS 中的确是绘制于元素周围的一条线 。比如给一个按钮元素设置 outline 属性，可以看到按钮周围出现一条线。
2. outline 会占据空间位于边框边缘的外围，它不会影响元素的布局，但是可以起到突出元素的作用。
3. 在 CSS 标准中，outline 的形状默认是矩形，无法将 outline 设置成非矩形形状。

5.在html中，定义一个空链接有几种方式

1. <a href="#">空链接</a>
2. <a href="javascript:void(0)">空链接</a>
3. <a>空链接</a>

6.Object.defineProperty()来进行数据劫持有什么缺点，如何优化

缺点

1. 嵌套对象麻烦：要监听嵌套深的对象，得一层一层手动设置监听，要是新增了嵌套属性，还得重新设置，很麻烦。
2. 数组监听不了：像给数组 push 个新元素，它察觉不到变化，没办法触发对应的处理。
3. 性能不太好：对象属性多、层级深时，因为要一个一个属性去设置监听，会拖慢速度。

优化

可以用 Proxy 来替代。Proxy 能直接监听对象和数组变化，嵌套对象也不用一层一层手动设置监听，省事又高效 。