每日一题：迷惑的 this

介绍

团队开发中为了解决变量相互覆盖的问题，会将相关的功能的涉及到变量收编到一个对象内。但使用对象收编变量后需要注意 this 合理使用。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
5
├── css
│   └── style.css
├── index.html
└── js
    └── index.js

其中:

  • index.html 是主页面。
  • css 是存放项目样式的文件夹。
  • js/index.js 是需要补充代码的 js 文件。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

1
2
cd /home/project
file="this" && wget "https://labfile.oss.aliyuncs.com/courses/19791/${file}.zip" && unzip "${file}.zip" && rm "${file}.zip"

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

初始效果

目标

完善 js/index.js 中的 handle 函数中的 TODO 部分，实现以下功能:

  1. 为输入框（即 this.inputEl）绑定 input 事件，当输入框的值发生变化时，调用已经提供的 handleInput 方法进行搜索处理，注意 handleInput 方法调用时的 this 指向应为 search 对象本身。

最终完成的效果如下：

效果图

规定

  1. 请勿修改文件路径，文件名，对象名和函数名
  2. 只能在规定区域进行代码编写
  3. 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 783 | 总提交次数: 832 | 通过率: 94.1%

难度: 简单 标签: 2023, 省模拟赛, Web 前端, JavaScript

题解

1
2
3
4
5
6
handle() {
    // TODO：待补充代码  
    this.inputEl.addEventListener('input',(e)=>{
      this.handleInput(e)
    })
  },