JavaScript技术更新换代很快。一些我们曾经熟悉的API，现在已经过时甚至被废弃了。继续使用它们，可能会给项目带来兼容性问题、安全漏洞或性能瓶颈。

这篇文章就来盘点一下那些应该避免使用的废弃JavaScript API。我们会说明为什么它们被废弃，以及应该用什么来替代。

什么是“废弃”

一个API被标记为“废弃”，通常意味着：

• 不再推荐使用：浏览器厂商和标准组织建议开发者停止使用它

• 未来会被移除：这个API可能会在未来的某个浏览器版本中被彻底删除

• 存在更好的替代品：有更现代、更安全、更高效的API可以完成同样的工作

• 可能存在缺陷：该API本身设计有缺陷，或者存在安全风险

识别并替换掉项目中的废弃API，是保持代码健康的重要一步。

已废弃的Web API

1. document.write()

这个函数可以直接向HTML文档流中写入内容。

// 不推荐的做法
document.write("<h1>Hello World</h1>");

为什么被废弃

• 阻塞渲染：如果在页面加载后调用（比如在异步脚本中），它会清空整个文档然后重写，导致糟糕的用户体验

• 性能问题：它会中断浏览器的解析和渲染过程

• 与现代开发模式不兼容：在单页应用或使用DOMContentLoaded事件的场景下，它的行为不可预测且具有破坏性

应该用什么替代

使用DOM操作方法，比如document.createElement()、element.innerHTML或element.textContent。

// 推荐的做法
const newHeading = document.createElement('h1');
newHeading.textContent = 'Hello World';
document.body.appendChild(newHeading);

// 或者使用 innerHTML（注意防范XSS攻击）
// document.body.innerHTML += '<h1>Hello World</h1>';

2. showModalDialog()

这个API曾经用于创建一个模态对话框窗口。

// 已废弃
window.showModalDialog("https://example.com", "Dialog Title", "width=300,height=200");

为什么被废弃

• 用户体验差：它会阻塞整个浏览器，用户无法与父页面交互

• 安全问题：它的安全模型复杂，容易产生漏洞

• 缺乏灵活性：样式和行为难以定制，与现代Web设计格格不入

应该用什么替代

使用<dialog> HTML元素，或者基于div和CSS自定义模态框。

<!-- 现代做法 -->
<dialog id="myDialog">
  <p>这里是模态框的内容。</p>
  <button onclick="document.getElementById('myDialog').close()">关闭</button>
</dialog>
<script>
  document.getElementById('myDialog').showModal();
</script>

3. 同步的XMLHttpRequest (XHR)

在XMLHttpRequest中，可以将第三个参数设置为false来发起同步请求。

// 非常不推荐
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', false); // 第三个参数 false 表示同步
xhr.send();
if (xhr.status === 200) {
  console.log(xhr.responseText);
}

为什么被废弃

• 阻塞主线程：同步请求会完全冻结页面直到请求完成，导致页面无响应

• 性能杀手：严重违背了JavaScript异步非阻塞的设计哲学

应该用什么替代

• 使用异步XHR：将open方法的第三个参数设为true（默认值），并使用onload或onreadystatechange事件处理回调

• 使用fetch() API：这是更现代、基于Promise的替代方案，语法更清晰

// 使用异步 XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data'); // 默认为 true，异步
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

// 更推荐使用 fetch API
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

已废弃的JavaScript语言/全局方法

4. escape() 和 unescape()

这两个函数用于对字符串进行编码和解码。

var encoded = escape("Hello World&"); // 输出 "Hello%20World%26"
var decoded = unescape(encoded); // 输出 "Hello World&"

为什么被废弃

• 不符合标准：它们基于一个非常古老的URI编码标准，与现代的encodeURI和encodeURIComponent标准不同

• 对非ASCII字符处理不佳：对于Unicode字符，它们的编码结果不可靠

应该用什么替代

• 使用encodeURI()对整个URI进行编码（不编码属于URI本身的字符，如/、?、&）

• 使用encodeURIComponent()对URI中的参数部分进行编码（编码几乎所有字符）

• 对应的解码函数是decodeURI()和decodeURIComponent()

var uri = "https://example.com/测试?name=值&age=20";
var encodedURI = encodeURI(uri);
console.log(encodedURI); // 正确编码中文字符

var param = "值&part";
var encodedParam = encodeURIComponent(param);
console.log(encodedParam); // 输出 "%E5%80%BC%26part"

5. var 与老式变量提升

虽然var关键字本身没有被完全废弃，但在let和const出现后，在新代码中继续使用var已被广泛认为是一种过时的做法。

// 不推荐的旧模式
function oldWay() {
  if (true) {
    var x = 10; // var 是函数作用域
  }
  console.log(x); // 输出 10，变量泄露到了整个函数作用域
}

为什么不推荐

• 函数作用域：var声明的变量作用域是整个函数，而不是其所在的代码块（如if、for），容易导致变量意外覆盖和泄露

• 变量提升：var声明的变量会被“提升”到函数顶部，但赋值不会，造成令人困惑的代码行为（在声明前访问变量得到undefined）

• 允许重复声明：同一个作用域内可以多次用var声明同一个变量，容易引入错误

应该用什么替代

• 默认使用const来声明不会被重新赋值的变量

• 需要重新赋值时，使用let

• 基本可以完全避免使用var

// 推荐的现代模式
function modernWay() {
  if (true) {
    let x = 10; // let 是块级作用域
    const y = 20; // const 也是块级作用域，且不可重新赋值
  }
  // console.log(x); // 这里会报错：ReferenceError: x is not defined
  // console.log(y); // 这里也会报错
}

已废弃的浏览器/环境特定API

6. alert(), confirm(), prompt()

这三个函数用于显示系统对话框。

alert("这是一个提示！");
var result = confirm("你确定吗？");
var name = prompt("请输入你的名字：", "默认名");

为什么不推荐频繁使用

严格来说，它们没有被标准废弃，但在生产环境的前端代码中应极其谨慎或避免使用。

• 糟糕的用户体验：它们会阻塞整个浏览器标签页，中断用户操作流

• 样式无法定制：外观由浏览器或操作系统决定，与网站设计风格不匹配

• 对无障碍访问不友好：屏幕阅读器等辅助工具可能无法正确处理这些原生对话框

应该用什么替代

使用自定义的模态框组件。几乎所有现代UI框架（如React、Vue、Angular）都有丰富的模态框/对话框组件，也可以用HTML/CSS/JavaScript自己实现。

注意：在调试或快速原型开发中，console.log()、debugger语句和浏览器开发者工具是比alert()更好的选择。

7. 过时的事件处理属性

例如onclick、onmouseover等以内联或DOM属性方式使用。

HTML内联方式（不推荐）：

<button onclick="handleClick()">点击我</button>

DOM属性方式（不推荐）：

element.onclick = function() { console.log('clicked'); };

为什么不推荐

• 只能绑定一个处理函数：使用onclick属性会覆盖之前绑定的任何点击事件

• 混合了结构和行为：内联方式将JavaScript代码混入HTML，不利于维护和分离关注点

• 作用域问题：内联方式中的this指向可能不符合预期

应该用什么替代

使用addEventListener()方法。

// 推荐的现代方式
element.addEventListener('click', handleClick);

// 可以添加多个监听器
element.addEventListener('click', anotherClickHandler);

function handleClick(event) {
  console.log('按钮被点击了！', event);
}

废弃API速查表

技术总是在向前发展。作为开发者，任务不仅仅是让代码运行起来，更要写出健壮、可维护、面向未来的代码。识别并替换掉那些废弃的API，就是这个过程中重要的一环。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13530