今日学习题

抽空搞个编程
74 阅读4分钟

日期：25.07.23

1.原型链回顾练习

函数对象prototype

原型对象__proto__

 // 定义了一个构造函数Foo
const Foo = function () {
    console.log("222");
}
//Foo的原型对象添加了一个方法a
Foo.prototype.a = function () {
    console.log("ww")
}
//创建了一个实例对象；obj是new Foo()创建的实例;
let obj = new Foo();
obj.a()

当用new操作符调用构造函数Foo时，会发生什么？ new的过程大概是：

  1. 创建一个新对象；
  2. 将新对象的__proto__指向构造函数的prototype；
  3. 执行构造函数，绑定this到新对象；
  4. 如果构造函数没有返回对象，就返回这个新对象。
  5. 所以当new Foo()的时候，构造函数里面的console.log("222")会执行，输出"222"。

然后，obj是new Foo()创建的实例，它的__proto__指向Foo.prototype。 所以当调用obj.a()时，会先在obj自身找a方法，没找到的话就去__proto__（也就是Foo.prototype）里找，找到了a方法，所以执行它，输出"ww"。

2.vue的通讯方式

  1. 父传子：Props

    子组件通过props选项（Vue2 选项式API）或defineProps（Vue3 组合式API）接收数据。

  2. 子传父：$emit触发自定义事件

    • 父组件通过v-on（或@简写）监听子组件触发的事件（如<Child @submit="handleSubmit" />）；

    • 子组件通过this.$emit``（Vue2）或defineEmits（Vue3）触发事件，并传递数据（如emit('submit', formData)`

  3. 兄弟组件：共同父组件协调（状态提升)

  4. 跨级组件：Context API

    适用场景：深层嵌套的组件（如祖父组件 → 孙子组件）之间传递数据，避免层层传递props（“props drilling”）。

    实现方式： - 祖先组件使用provide提供数据（Vue2 中是选项，Vue3 中是provide函数）； - 后代组件使用inject注入数据（Vue2 中是选项，Vue3 中是inject函数）。

  5. 非嵌套/全局状态：状态管理工具（Redux、MobX）vueX

    store

  6. 直接操作子组件：Refs

    适用场景：父组件需要直接访问子组件的实例或 DOM 元素（如调用子组件的方法、获取子组件的属性）。

    实现方式： - 父组件在子组件上添加ref属性（如<ChildComponent ref="childRef" />）；

    • 父组件通过this.$refs.childRef（Vue2）或const childRef = ref(null)（Vue3 组合式API）获取子组件实例。

  7. 无关组件：事件总线（EventBus）

  8. provide/inject:父组件用provide提供数据，子组件用inject注入数据

3.事件冒泡和事件捕获的区别以及应用

事件冒泡就是指从目标元素逐渐向上到最外层的祖先元素；

事件捕获就是指从最外层的祖先元素逐渐向下到目标元素；

  • 默认情况下，事件处理程序是在冒泡阶段被触发的。但是，我们可以通过addEventListener的第三个参数来指定事件是在捕获阶段还是冒泡阶段处理。
  • 例如：element.addEventListener('click', handler, true) 表示在捕获阶段处理，而false（默认值）表示在冒泡阶段处理。

应用：

  1. 事件委托（Event Delegation）：利用事件冒泡，我们可以将事件处理程序添加到父元素上，通过检查事件的目标（event.target）来处理子元素的事件。这样可以减少事件处理程序的数量，提高性能，尤其适合动态添加的子元素。
  2. 在捕获阶段处理事件：有些情况下我们希望在事件到达目标之前就处理它，比如在事件到达目标之前阻止其继续传播（例如，在捕获阶段调用event.stopPropagation()可以阻止事件继续向下传播，这样目标元素和后续的冒泡阶段都不会触发）。

4.什么是闭包

image.png

5.HTMLinput 有哪些type属性

  1. text：默认值，单行文本框。
  2. password：密码输入框，输入内容被掩码。
  3. email：用于输入电子邮件地址，浏览器可能会验证格式。
  4. url：用于输入URL，浏览器可能会验证格式。
  5. tel：用于输入电话号码，无特定格式验证（但可通过pattern属性自定义）。
  6. number：用于输入数字，可设置min、max、step等属性。
  7. range：滑动条，用于选择一定范围内的数值。
  8. date：日期选择器。
  9. time：时间选择器。
  10. datetime-local：日期和时间选择器（无时区）。
  11. month：月份选择器。
  12. week：周选择器。
  13. color：颜色选择器。
  14. checkbox：复选框。
  15. radio：单选按钮。
  16. file：文件上传控件。
  17. submit：提交按钮，用于提交表单。
  18. reset：重置按钮，用于重置表单内容。
  19. button：普通按钮，无默认行为。
  20. image：图像按钮，功能同submit但可显示图片。
  21. hidden：隐藏字段，用户不可见但数据会提交。
  22. search：搜索框，可能带清除按钮。

此外，HTML5还引入了：
23. datetime（已废弃）：不推荐使用，用datetime-local代替。
24. reset：重置按钮（已存在，但再次列出以保持完整）。

avatar
文章
阅读
粉丝