一、字符串操作类：这些老方法别再用了
1. String.prototype.substr()
废弃原因：属于非标准遗留特性，参数规则和substring、slice不一致，极易混淆，已被纳入ECMAScript附录B，仅为兼容旧代码保留，不推荐新代码使用。
❌ 错误写法（废弃）
const str = 'frontend';
// 第一个参数是起始索引，第二个是截取长度，极易和substring搞混
const res = str.substr(2, 3); // 输出 'ont'
✅ 替代方案：String.prototype.substring() 或 String.prototype.slice()
// substring(起始索引, 结束索引)
const res1 = str.substring(2, 5); // 输出 'ont'
// slice支持负数索引，更灵活，日常优先推荐
const res2 = str.slice(2, 5); // 输出 'ont'
2. String.prototype.trimLeft() / trimRight()
废弃原因：语义不统一，标准规范已推出语义更清晰的替代方法，部分新版浏览器已逐步移除支持。
❌ 错误写法（废弃）
const str = ' hello world ';
str.trimLeft(); // 去除左侧空格
str.trimRight(); // 去除右侧空格
✅ 替代方案：trimStart() / trimEnd()（语义一致，全现代浏览器支持）
str.trimStart(); // 替代trimLeft，语义更清晰
str.trimEnd(); // 替代trimRight
3. escape() / unescape()
废弃原因：编码规则不标准，无法正确处理Unicode字符，存在安全风险，已被完全废弃，随时可能失效。
❌ 错误写法（废弃）
escape('前端开发'); // 编码结果不标准，特殊字符处理异常
unescape('%u524D%u7AEF'); // 解码异常
✅ 替代方案：encodeURI() / encodeURIComponent()、decodeURI() / decodeURIComponent()
// 处理完整URL
encodeURI('https://xxx.com/前端');
// 处理URL参数，更常用
encodeURIComponent('前端开发');
// 对应解码
decodeURIComponent('%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91');
二、日期时间类：千年虫+兼容性坑太多
1. Date.prototype.getYear() / setYear()
废弃原因：千年虫问题，返回的是年份减去1900的值，比如2024年返回124，极易导致逻辑错误，已被标准废弃。
❌ 错误写法（废弃）
const date = new Date();
date.getYear(); // 2024年返回124，完全不符合预期
✅ 替代方案：getFullYear() / setFullYear()（返回完整4位年份，无bug）
date.getFullYear(); // 2024，正确返回
date.setFullYear(2025); // 正确设置年份
2. Date.prototype.toLocaleFormat()
废弃原因：非标准方法，仅Firefox旧版本支持，Chrome、Safari完全不兼容，已被移除。
✅ 替代方案：Intl.DateTimeFormat()（标准国际化API，全浏览器兼容，格式化更灵活）
// 格式化日期：2024-05-20
const formatter = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
formatter.format(new Date());
三、DOM与Web API类：安全+性能双坑
1. document.execCommand()
废弃原因：曾经用来做富文本、复制粘贴、文字加粗，但是兼容性极差，不同浏览器行为不一致，还存在XSS安全风险，现代浏览器已全面标记废弃，不再维护。
❌ 错误写法（废弃）
// 复制文本，老掉牙写法
document.execCommand('copy');
✅ 替代方案：Clipboard API（navigator.clipboard），异步、安全、标准化，现代浏览器全覆盖
// 异步复制文本，推荐写法
const copyText = async (text) => {
try {
await navigator.clipboard.writeText(text);
console.log('复制成功');
} catch (err) {
console.error('复制失败', err);
}
};
2. 同步XMLHttpRequest
废弃原因：同步请求会阻塞JS主线程，导致页面卡死、交互无响应，严重影响用户体验，官方强烈禁止使用，新版浏览器已抛出废弃警告。
❌ 错误写法（废弃）
// 第三个参数设为false，开启同步，卡死主线程
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', false);
xhr.send();
✅ 替代方案：fetch API（基于Promise，异步非阻塞，语法更简洁）
fetch('/api/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
// 异步async/await写法更优雅
const getData = async () => {
try {
const res = await fetch('/api/data');
const data = await res.json();
return data;
} catch (err) {}
};
3. event.srcElement / window.event
废弃原因：IE旧版本专属API，现代浏览器仅兼容保留，非标准写法，代码健壮性极差。
❌ 错误写法（废弃）
// IE旧版获取事件目标
dom.onclick = function(e) {
const target = e.srcElement || window.event.srcElement;
};
✅ 替代方案：event.target（W3C标准，全浏览器兼容）
dom.onclick = function(e) {
const target = e.target; // 标准写法，无兼容问题
};
4. element.attachEvent()
废弃原因：IE专属事件绑定方法，仅IE5-IE10支持，IE11及现代浏览器已完全废弃，无法解绑事件，易造成内存泄漏。
✅ 替代方案：addEventListener()（标准事件监听，支持多事件绑定、事件捕获/冒泡）
// 标准绑定
dom.addEventListener('click', handleClick, false);
// 解绑
dom.removeEventListener('click', handleClick);
四、对象与函数类：严格模式直接报错
1. arguments.callee / function.caller
废弃原因：严格模式下完全禁用，会泄漏函数调用上下文，破坏模块化，性能差，递归场景极易出现内存问题。
❌ 错误写法（废弃）
// 递归调用自身，严格模式报错
function factorial(num) {
if(num <=1) return 1;
return num * arguments.callee(num-1);
}
✅ 替代方案：具名函数递归、箭头函数，避免依赖arguments.callee
// 具名函数递归，标准写法
function factorial(num) {
if(num <=1) return 1;
return num * factorial(num-1);
}
2. Object.prototype.proto / defineGetter/defineSetter
废弃原因：非标准原型访问方式，破坏原型链规范，存在安全隐患，已被标准API替代。
✅ 替代方案：
- proto 替换为 Object.getPrototypeOf() / Object.setPrototypeOf()
- defineGetter 替换为 Object.defineProperty() / Object.getOwnPropertyDescriptor()
3. Object.observe() / Array.observe()
废弃原因：性能开销极大，API设计混乱，未进入正式标准，已被移除。
✅ 替代方案：Proxy（Vue3响应式核心，灵活度拉满，性能更优）
