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
(inner.func, inner.func)()
:逗号运算符返回inner.func
,然后调用该函数。由于没有明确的调用对象,this
指向全局对象,因此返回全局变量out
的值 25。inner.func()
:直接调用inner
对象的func
方法,this
指向inner
对象,因此返回inner.out
的值 20。(inner.func)()
:括号只是改变了表达式的优先级,仍然是直接调用inner
对象的func
方法,this
指向inner
对象,因此返回inner.out
的值 20。(inner.func = inner.func)()
:赋值运算符返回赋值表达式的值,即inner.func
,然后调用该函数。由于没有明确的调用对象,this
指向全局对象,因此返回全局变量out
的值 25。
3.选择获取元素时
-
document.querySelector()
#id\
-
document.getElementById()
括号里直接是id本人,不要加#
4.CSS里面的outline
- outline(轮廓)在 CSS 中的确是绘制于元素周围的一条线 。比如给一个按钮元素设置 outline 属性,可以看到按钮周围出现一条线。
- outline 会占据空间位于边框边缘的外围,它不会影响元素的布局,但是可以起到突出元素的作用。
- 在 CSS 标准中,outline 的形状默认是矩形,无法将 outline 设置成非矩形形状。
5.在html中,定义一个空链接有几种方式
<a href="#">空链接</a>
<a href="javascript:void(0)">空链接</a>
<a>空链接</a>
6.Object.defineProperty()来进行数据劫持有什么缺点,如何优化
缺点
- 嵌套对象麻烦:要监听嵌套深的对象,得一层一层手动设置监听,要是新增了嵌套属性,还得重新设置,很麻烦。
- 数组监听不了:像给数组
push
个新元素,它察觉不到变化,没办法触发对应的处理。 - 性能不太好:对象属性多、层级深时,因为要一个一个属性去设置监听,会拖慢速度。
优化
可以用 Proxy
来替代。Proxy
能直接监听对象和数组变化,嵌套对象也不用一层一层手动设置监听,省事又高效 。