javascript 基础篇3 类，回调函数，内置对象，事件处理

让我来为你详细讲解 JavaScript 基础篇3：类、回调函数、内置对象和事件处理的完整攻略。

类

在面向对象编程中，类是一种定义行为和数据的蓝图，从这个蓝图可以创建具体的对象。JavaScript 中的类是通过构造函数来实现的。

定义类

定义类时，需要使用 class 关键字，然后在大括号内定义类的字段和方法。例如，下面是定义一个 Person 类的语法：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getDetails() {
    return `${this.name} is ${this.age} years old`;
  }
}

在上面的例子中，我们定义了一个 Person 类，它有一个构造函数和一个 getDetails 方法。构造函数接受 name 和 age 两个参数，并将它们保存在实例的 name 和 age 属性中。getDetails 方法返回一个字符串，描述人名和年龄的细节。

创建实例

创建实例时，需要使用 new 关键字加上类的名称，然后在括号中传入构造函数的参数。例如，下面是创建一个 Person 类的实例的语法：

const john = new Person('John', 30);

在上面的例子中，我们创建了一个 Person 类的实例，名称为 john，年龄为 30。

示例

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

在上面的示例中，我们定义了一个 Animal 类和一个子类 Dog。Animal 类有一个 speak 方法，输出一句话描述动物的叫声。Dog 类继承自 Animal 类，并且重写了 speak 方法，描述狗的叫声。我们创建了一个名字为 Rex 的 Dog 类实例，并调用它的 speak 方法。

回调函数

回调函数是一种在函数内部传递并在函数执行完成后执行的函数。回调函数通常用于异步操作，例如异步请求或定时器。

定义回调函数

定义回调函数时，只需要编写一个函数并将它传递给另一个函数即可。例如，下面是定义一个回调函数的语法：

function callback() {
  console.log('Callback function executed.');
}

function mainFunction(callbackFunction) {
  console.log('Main function executed.');
  callbackFunction();
}

mainFunction(callback);

在上面的例子中，我们定义了一个回调函数 callback 和一个主函数 mainFunction，mainFunction 接受一个回调函数作为参数。当 mainFunction 执行完毕后，它会执行传递给它的回调函数。

示例

function mainFunction(callbackFunction) {
  console.log('Main function executed.');
  setTimeout(callbackFunction, 2000);
}

function callback() {
  console.log('Callback function executed after 2 seconds.');
}

mainFunction(callback);

在上面的示例中，我们使用 setTimeout 函数模拟一个 2 秒钟的异步操作。我们定义了一个主函数 mainFunction，它会等待 2 秒钟后执行传递给它的回调函数。我们定义了一个回调函数 callback，它会在 2 秒钟后被执行，输出一句话。

内置对象

JavaScript 中有许多内置对象，例如 Array、Object、String、Number 等。

示例

const myArray = [1, 2, 3, 4, 5];
console.log(myArray);
console.log(myArray.length);
console.log(myArray.reverse());
console.log(myArray.join(' - '));

在上面的示例中，我们使用 Array 内置对象创建了一个数组。我们使用 console.log 输出了数组的值和长度。然后，我们调用了 reverse 方法以反转数组，调用了 join 方法以按照指定的分隔符组合数组元素。

事件处理

事件处理是一种响应用户交互的方式，例如鼠标点击、键盘按键、窗口大小调整等。

绑定事件处理器

绑定事件处理器需要使用 addEventListener 方法。例如，下面是绑定一个鼠标点击事件处理器的语法：

document.addEventListener('click', function() {
  console.log('Mouse clicked.');
});

在上面的例子中，我们使用 addEventListener 方法绑定了一个鼠标点击事件处理器。当用户点击鼠标时，事件处理器会被执行，输出一句话。

事件对象

事件对象包含与事件有关的信息，例如事件类型、事件目标等。事件处理器可以通过参数来访问事件对象。例如，下面是输出鼠标点击事件目标元素的语法：

document.addEventListener('click', function(event) {
  console.log('Mouse clicked on:', event.target);
});

在上面的例子中，我们输出了鼠标点击事件的目标元素。

示例

const myButton = document.querySelector('#myButton');

myButton.addEventListener('click', function(event) {
  console.log('Button clicked.');
  event.target.style.backgroundColor = 'red';
});

在上面的示例中，我们获取了一个 ID 为 myButton 的按钮元素，并使用 addEventListener 方法绑定了一个鼠标点击事件处理器。当用户点击按钮时，事件处理器会被执行，输出一句话，并将按钮的背景色改为红色。