当前位置：首页 > ds >正文

前端笔记-JavaScript（下）

ds 2025/7/17 12:58:41

JavaScript学习目标

JavaScript	1、变量、数据类型与运算符
	2、函数与作用域
	3、对象与原型链
	4、ES6语法概览
	5、学习了解DOM以及相关的DOM操作
	6、js事件循环
	7、Promise
	8、async/await
	9、解构赋值与扩展运算符
	10、箭头函数与this绑定
	11、xhr基础（基本了解即可）

1-3 前端笔记-JavaScript部分（上）-CSDN博客

4 前端笔记-ECMAScript语法概览-CSDN博客

6 前端笔记-JS的事件循环机制-CSDN博客

789 前端笔记-JavaScript部分（中）-CSDN博客

箭头函数与this绑定

具体的实例可以进这个网站的试炼场查看一下JavaScript 箭头函数

接下来将对项目过程中需要背诵牢记的部分进行总结

与普通函数的区别

特性	普通函数	箭头函数
`this` 指向	动态绑定（由调用者决定）	静态绑定（继承外层 `this`）
能否修改 `this`	✅ 可修改（`call/apply/bind`）	❌ 不可修改
适用场景	对象方法、构造函数	回调函数、需要固定 `this`

重点总结

箭头函数的 this 是定义时确定的，继承外层作用域的 this
普通函数的 this 是调用时确定的，取决于谁调用它
箭头函数不能用作构造函数（没有自己的 this 和 arguments）

经典示例

1. 回调函数中的 `this`（箭头函数优势）

const timer = {seconds: 3,start() {// 箭头函数继承外层 this（timer 对象）setInterval(() => {this.seconds--; // ✅ 正确指向 timerconsole.log(this.seconds);}, 1000);}
};
timer.start(); // 输出: 2, 1, 0

2. 对象方法中的 `this`（普通函数优势）

const person = {name: "Alice",greet: function() {console.log(`Hello, ${this.name}`); // ✅ 正确指向 person},badGreet: () => {console.log(`Hi, ${this.name}`); // ❌ this 指向 Window（外层作用域）}
};
person.greet();   // "Hello, Alice"
person.badGreet(); // "Hi, undefined"

3. 强制绑定 `this`（普通函数专属）

function sayHi() {console.log(`Hi, ${this.name}`);
}const user = { name: "Bob" };
sayHi.call(user); // "Hi, Bob"（普通函数可通过 call 修改 this）

一句话记忆

🔹 普通函数：this 看 谁调用我
🔹 箭头函数：this 看 我在哪定义

XHR基础

学习参考：JS XMLHttpRequest入门教程（非常详细） - C语言中文网

什么是xhr？

XHR（XMLHttpRequest），是浏览器提供的JavaScript API，用于在不刷新页面的情况下与服务器交互数据（如获取、提交数据）。它是Ajax技术的核心，现代开发中fetch和axios等工具的前身。

学习xhr之前你需要了解

HTML & CSS 基础（了解网页结构）
JavaScript 基础（变量、函数、事件、DOM 操作）
异步编程概念（回调函数、Promise）
HTTP 协议基础（GET/POST 请求、状态码、请求头/响应头）
JSON 数据格式（比 XML 更常用）

基本用法

// 1. 创建 XHR 对象
const xhr = new XMLHttpRequest();// 2. 配置请求（方法、URL、是否异步）
xhr.open('GET', 'https://api.example.com/data', true);// 3. 设置回调函数
xhr.onload = function() {if (xhr.status === 200) {console.log('成功:', xhr.responseText); // 响应数据} else {console.error('请求失败:', xhr.status);}
};// 4. 发送请求
xhr.send();