JavaScript 高级教程

JavaScript 是一门功能强大的编程语言，它不仅能够为网页添加动态效果，还可以用于开发复杂的单页应用程序（SPA）和服务器端应用。本教程将介绍一些 JavaScript 高级特性。

高级特性概览

以下是一些 JavaScript 高级特性的列表：

原型链和继承
闭包
异步编程
模块化
现代 ES6+ 语法

原型链和继承

在 JavaScript 中，每个对象都有一个原型（prototype），它是一个对象。如果一个对象没有某个属性或方法，它会自动查找它的原型链，直到找到为止。

例如，以下是一个简单的原型链继承示例：

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log(this.name);
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = new Animal();

var myDog = new Dog('Buddy', 'Golden Retriever');
myDog.sayName(); // 输出: Buddy

闭包

闭包是一种特殊的对象，它允许你存储函数的状态，即使函数已经执行完毕。闭包可以捕获和访问定义时的词法作用域。

以下是一个闭包的示例：

function createCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1

异步编程

JavaScript 中处理异步操作有很多方法，例如回调函数、Promise 和异步/await 语法。

以下是一个使用 Promise 的异步编程示例：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    // 假设这里是发起 HTTP 请求的代码
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

模块化

随着 JavaScript 应用的复杂度增加，模块化变得越来越重要。ES6 引入了 import 和 export 语法，使得模块化变得更加容易。

以下是一个简单的模块化示例：

// module.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './module.js';
console.log(add(1, 2)); // 输出: 3

现代ES6+ 语法

ES6+ 引入了许多新的语法特性，如箭头函数、模板字符串、解构赋值等，使代码更加简洁易读。

例如，以下是一个使用箭头函数的示例：

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(number => number * number);
console.log(squares); // 输出: [1, 4, 9, 16, 25]