面试中的部分问题回答

1、CSS中浮动元素为什么会引起父元素高度的塌陷?

答:因为浮动元素的位置脱离了正常的文档流,而且浮动元素对父元素的高度计算没有直接影响。当一个元素浮动时,默认情况下,其他非浮动元素会忽略该浮动元素的位置,而紧密排列在浮动元素的下方。这会导致父元素无法正确计算包含浮动元素的高度,从而导致父元素的高度塌陷。

2、 box-sizing属性是做什么的?border-box是什么意思?

box-sizing属性用于指定元素的盒模型计算方式,它控制了元素的宽度和高度的计算方式。

box-sizing属性可以有两个值:

  • content-box:这是默认值。它表示元素的宽度和高度只包括内容区域,不包括内边距、边框和外边距。也就是说,当设置元素的宽度和高度时,这些值不包含内边距和边框,只包含内容的实际尺寸。
  • border-box:这个值表示元素的宽度和高度包括了内容区域、内边距和边框的尺寸。也就是说,当设置元素的宽度和高度时,这些值会包含内边距和边框的宽度,内容区域的尺寸则会自动调整以适应设置的宽度和高度。

总之,box-sizing属性用于控制元素的盒模型计算方式,而border-box值表示元素的宽度和高度包含了内容区域、内边距和边框的尺寸。

3、原型链可以用来做什么?

原型链是 JavaScript 中的一种机制,它允许对象通过继承来共享属性和方法。原型链可以用于以下几个方面:

  1. 实现继承:通过原型链,一个对象可以继承另一个对象的属性和方法。当访问一个对象的属性或方法时,如果对象本身没有被定义,则会去它的原型对象上查找,如果原型对象也没有定义,则继续向上查找。这样可以实现类似面向对象编程中的继承关系。

  2. 添加共享方法:在 JavaScript 中,对象可以通过原型链共享方法。当一个方法被添加到原型对象上时,所有通过该原型对象创建的实例都可以访问到这个方法。这样可以实现代码的复用,减少内存消耗。

总之,通过原型链可以实现继承功能,属性和方法的共享,减少代码冗余。 

4、 说说new运算符的执行过程?

new 运算符用于创建一个对象实例,它的执行过程如下:

  1. 创建一个空对象;
  2. 给空对象设置__proto__属性,指向构造函数的prototype对象;
  3. 将构造函数中的this指向新创建的对象实例;
  4. 执行构造函数中的代码,如果有返回值且其类型为对象,则将其作为new运算符的返回值,否则返回新创建的对象实例。

5、this关键字的几种用法?

在 JavaScript 中,`this` 是一个关键字,它用于指代当前执行上下文中的对象。`this` 的具体取值方式可以根据不同的情况有不同的用法:

1. 全局上下文中的 `this`:在全局作用域中,`this` 指代全局对象

2. 函数中的 `this`:`this` 的取值在函数的执行过程中由调用函数的方式决定。以下是常见的几种情况:

   - 作为函数调用时,`this` 指代全局对象(非严格模式下)或者 `undefined`(严格模式下)。
   - 作为对象方法调用时,`this` 指代调用方法的对象。
   - 使用 `call`、`apply` 或 `bind` 方法指定函数的 `this` 值。
   - 作为构造函数调用时,`this` 指代新创建的实例对象。
   - 箭头函数中的 `this` 指向定义箭头函数时所在作用域中的 `this`,不会根据调用方式变化。

3. DOM 事件处理函数中的 `this`:在 DOM 事件处理函数中,`this` 指代绑定事件的 DOM 元素。

6、vue2响应式对数组是怎么做的?

在Vue 2中,针对数组的响应式是通过封装数组的原型方法来实现的。当使用Vue的响应式系统来观察一个数组时,它会重写数组的原型方法(如push、pop、splice等),以便在修改数组时能够捕获变化并触发响应。

具体来说,Vue通过以下方式实现数组的响应式:

1. 通过Object.defineProperty()方法将数组的原型方法修改为能够触发更新的方法。例如,将push方法替换为一个包装函数,该函数会在添加新元素后触发更新。
2. 在修改数组时,Vue会执行以下操作:
   - 检测是否正在进行数组的依赖收集(即有地方正在访问数组),如果是,则会将该依赖更新到依赖列表中,以便在数组变化时触发更新。
   - 将修改操作应用到数组本身,确保数组与原始操作保持一致。
   - 触发更新,通知相关的视图进行更新。

需要注意的是,由于Vue的响应式机制遵循ES5的Object.defineProperty(),因此只能监听到具体的数组方法调用,而无法监听到通过索引直接修改数组元素的操作。

7、为什么数组和其它对象双向绑定不一样?

数组和其他对象之所以在双向绑定方面行为不同,是因为它们在内部实现上的不同。

当涉及到对象的双向绑定时,一般是通过监听对象的属性变化来实现的。当属性值发生变化时,相关的绑定会自动更新。对于普通对象,可以通过一些库或框架(如Vue、React等)提供的观察者模式来实现属性监听和更新。

然而,数组是一种特殊的对象,其内部数据的变化方式与普通对象不同。当使用数组的操作方法(如push、pop、splice等)改变数组的内容时,并不能直接通过监听属性变化的方式自动更新绑定。这是因为数组方法会直接修改数组对象本身,而不是修改数组的某个属性。

总之,数组和其他对象在双向绑定方面的差异主要是由于它们内部变化的方式不同,并需要采用不同的机制来实现双向绑定的功能。

8、vue2为什么不对每个数组元素做监听?

在 Vue 2 中,Vue 的响应式系统并不对每个数组元素进行监听的主要原因是性能方面的考虑。

对每个数组元素进行监听意味着需要为每个元素都创建一个独立的响应式实例,这对于大规模的数组来说开销是非常高的。考虑到数组可能包含大量的元素,对每个元素都进行监听可能导致内存占用和性能问题。

另外,数组的监听是在 Vue 2 中通过重写原型方法来实现的。这种方式在新增、删除元素时可以触发更新通知,但是对于直接通过索引修改元素值的操作无法进行监听。这会导致在这种情况下,数据的变化不会触发相应的更新操作。

猜你喜欢

转载自blog.csdn.net/weixin_53141315/article/details/132855491