JavaScript ES5 简介与基础语法

### 1. 简介

JavaScript是一种广泛应用于网页开发的脚本语言，它的发展历史和规范版本不断更新。本章将介绍JavaScript的起源和发展，ES5规范的概述以及ES5在前端开发中的重要性。
### 2. 数据类型与变量

JavaScript作为一种动态类型语言，拥有丰富的数据类型和灵活的变量声明与赋值方式，本章将介绍JavaScript中数据类型与变量的相关知识。

#### 2.1 基本数据类型介绍

JavaScript中的基本数据类型包括：字符串（String）、数字（Number）、布尔值（Boolean）、空值（Null）、未定义（Undefined）。以下是基本数据类型的示例代码：

// 字符串
let message = "Hello, World!";
// 数字
let count = 10;
// 布尔值
let isTrue = true;
// 空值
let emptyValue = null;
// 未定义
let undefinedValue;

**代码说明：**
- 使用`let`关键字声明变量，并用等号进行赋值。
- JavaScript的字符串需要使用双引号或单引号来定义。
- 布尔值只有两个取值，`true`和`false`。
- `null`表示一个空值，`undefined`表示一个未定义的值。

**代码总结：**
JavaScript的基本数据类型包括字符串、数字、布尔值、空值和未定义，它们分别用于表示文本、数值、逻辑值以及特殊的空值和未定义值。

#### 2.2 变量的声明与赋值

在JavaScript中，变量的声明与赋值可以通过`var`、`let`和`const`来进行，具体使用取决于变量的作用域和可变性。以下是变量声明与赋值的示例代码：

// 使用var声明变量（存在变量提升效果）
var x = 5;
// 使用let声明变量（块级作用域）
let y = 10;
// 使用const声明常量
const PI = 3.14;

**代码说明：**
- `var`关键字声明的变量存在变量提升效果，可以在声明之前访问到变量。
- `let`关键字声明的变量具有块级作用域，在块级作用域外无法访问。
- `const`关键字声明的常量不能被重新赋值，但其属性或元素可以被修改。

**代码总结：**
JavaScript中，可以使用`var`、`let`和`const`来声明变量和常量，具体选择取决于变量的作用域和是否可变。

#### 2.3 变量的作用域与生命周期

变量的作用域指的是变量在代码中可以被访问的范围，而变量的生命周期指的是变量存在的有效时间段。JavaScript中的变量作用域分为全局作用域和局部作用域，变量的生命周期由变量的声明方式决定。

// 全局作用域变量
var globalVar = 5;

function testScope() {
  // 局部作用域变量
  let localVar = 10;
  console.log(globalVar); // 可以访问全局作用域变量
}

testScope();
console.log(globalVar); // 可以访问全局变量
console.log(localVar); // 报错，局部变量不可访问

**代码说明：**
- 全局作用域变量在整个代码中都可以被访问。
- 局部作用域变量只能在其声明的函数内部访问。
- 函数执行完毕后，局部作用域变量的生命周期结束。

**代码总结：**
JavaScript中的变量作用域分为全局作用域和局部作用域，变量的生命周期取决于变量的声明方式和所处的作用域。
### 3. 运算符与表达式

在JavaScript中，运算符和表达式是非常重要的基础知识，它们用于进行各种计算和逻辑操作。本章将介绍常见的运算符和表达式，以及它们的应用场景和注意事项。

#### 3.1 算数运算符

算数运算符用于执行基本的数学运算，包括加法、减法、乘法、除法和求余等操作。

// 加法
let sum = 10 + 5; // 结果为 15

// 减法
let difference = 10 - 5; // 结果为 5

// 乘法
let product = 10 * 5; // 结果为 50

// 除法
let quotient = 10 / 5; // 结果为 2

// 求余
let remainder = 10 % 3; // 结果为 1

**代码说明：** 上述代码演示了JavaScript中常见的算数运算符的使用。

#### 3.2 比较运算符

比较运算符用于比较两个值之间的关系，返回布尔值（true或false）。

let a = 10;
let b = 5;

// 相等
console.log(a === b); // false

// 不相等
console.log(a !== b); // true

// 大于
console.log(a > b); // true

// 小于
console.log(a < b); // false

// 大于等于
console.log(a >= b); // true

// 小于等于
console.log(a <= b); // false

**代码说明：** 上述代码展示了比较运算符的常见用法，以及每种比较运算符对应的返回值。

#### 3.3 逻辑运算符

逻辑运算符用于组合多个条件，常见的逻辑运算符包括与（&&）、或（||）、非（!）。

let x = 10;
let y = 5;
let z = 15;

// 与运算
console.log(x > y && y > z); // false

// 或运算
console.log(x > y || y > z); // true

// 非运算
console.log(!(x > y)); // false

**代码说明：** 上述代码展示了逻辑运算符的使用，以及组合条件之后的返回结果。

#### 3.4 条件运算符（三元运算符）

条件运算符，也称为三元运算符，是JavaScript中唯一的三元运算符，用于简洁地表示条件判断。

let age = 18;
let isAdult = (age >= 18) ? '成年人' : '未成年人';
console.log(isAdult); // 成年人

**代码说明：** 上述代码中通过条件运算符判断年龄，如果年龄大于等于18，则返回'成年人'，否则返回'未成年人'。

#### 3.5 运算符优先级

在复杂的表达式中，不同运算符的优先级决定了它们的计算顺序。可以使用括号来明确指定表达式的计算顺序。

let result = 10 + 5 * 2; // 结果为 20，因为乘法的优先级高于加法
let resultWithParentheses = (10 + 5) * 2; // 结果为 30，因为使用了括号指定加法先计算

**代码说明：** 上述代码展示了运算符优先级的影响，以及如何使用括号来改变计算顺序。

## 4. 控制流程

控制流程是编程语言中的重要概念，它决定了程序在不同条件下的执行路径。在JavaScript中，有几种控制流程的语句可供使用，包括条件语句、循环语句和循环控制语句。

### 4.1 条件语句（if-else、switch）

条件语句用于根据给定的条件来决定程序的执行路径。在JavaScript中，主要有两种类型的条件语句：if-else和switch。

#### 4.1.1 if-else语句

if-else语句通过判断给定的条件是否为真来选择不同的执行路径。

// 示例代码：判断一个数是正数、负数还是零
var num = 10;

if (num > 0) {
    console.log("该数是正数");
} else if (num < 0) {
    console.log("该数是负数");
} else {
    console.log("该数是零");
}

注释：通过if-else语句，根据给定的数判断它是正数、负数还是零。

代码总结：使用if-else语句可以根据条件选择不同的执行路径。

结果说明：该示例代码输出结果为"该数是正数"。

#### 4.1.2 switch语句

switch语句根据给定的表达式的值，选择匹配的case语句进行执行。

// 示例代码：根据星期几输出不同的提示信息
var day = "Sunday";
var message;

switch (day) {
    case "Monday":
        message = "今天是星期一";
        break;
    case "Tuesday":
        message = "今天是星期二";
        break;
    case "Wednesday":
        message = "今天是星期三";
        break;
    case "Thursday":
        message = "今天是星期四";
        break;
    case "Friday":
        message = "今天是星期五";
        break;
    case "Saturday":
        message = "今天是星期六";
        break;
    case "Sunday":
        message = "今天是星期日";
        break;
    default:
        message = "无效的输入";
}

console.log(message);

注释：通过switch语句，根据给定的星期几输出相应的提示信息。

代码总结：使用switch语句可以根据表达式的值选择匹配的case语句进行执行。

结果说明：该示例代码输出结果为"今天是星期日"。

### 4.2 循环语句（for、while、do-while）

循环语句用于重复执行一段代码，直到满足特定条件为止。在JavaScript中，主要有三种类型的循环语句：for、while和do-while。

#### 4.2.1 for循环

for循环在执行时，会先进行初始化，然后判断条件是否为真，如果为真，则执行循环体中的代码，并更新循环变量的值，重复该过程，直到条件为假。

// 示例代码：计算1到10的和
var sum = 0;

for (var i = 1; i <= 10; i++) {
    sum += i;
}

console.log("1到10的和为：" + sum);

注释：通过for循环，计算1到10的和。

代码总结：使用for循环可以重复执行一段代码，并对循环变量进行更新。

结果说明：该示例代码输出结果为"1到10的和为：55"。

#### 4.2.2 while循环

while循环在执行时，先判断条件是否为真，如果为真，则执行循环体中的代码，然后再次判断条件是否为真，重复该过程，直到条件为假。

// 示例代码：计算1到10的和
var sum = 0;
var i = 1;

while (i <= 10) {
    sum += i;
    i++;
}

console.log("1到10的和为：" + sum);

注释：通过while循环，计算1到10的和。

代码总结：使用while循环可以重复执行一段代码，直到条件为假。

结果说明：该示例代码输出结果为"1到10的和为：55"。

#### 4.2.3 do-while循环

do-while循环在执行时，先执行循环体中的代码，然后再判断条件是否为真，如果为真，则继续执行循环体中的代码，重复该过程，直到条件为假。

// 示例代码：计算1到10的和
var sum = 0;
var i = 1;

do {
    sum += i;
    i++;
} while (i <= 10);

console.log("1到10的和为：" + sum);

注释：通过do-while循环，计算1到10的和。

代码总结：使用do-while循环可以至少执行一次循环体中的代码，然后再判断条件是否为真。

结果说明：该示例代码输出结果为"1到10的和为：55"。

### 4.3 循环控制语句（break、continue）

循环控制语句用于在循环过程中控制循环的行为，可以提前结束循环或跳过当前迭代。

#### 4.3.1 break语句

break语句用于终止循环，即使循环条件仍为真，也会立即结束循环。

// 示例代码：找出数组中的第一个负数
var numbers = [1, 2, -1, 3, -2, 4];
var firstNegative;

for (var i = 0; i < numbers.length; i++) {
    if (numbers[i] < 0) {
        firstNegative = numbers[i];
        break;
    }
}

console.log("数组中第一个负数为：" + firstNegative);

注释：通过使用break语句，在循环中找到数组中的第一个负数。

代码总结：使用break语句可以提前结束循环。

结果说明：该示例代码输出结果为"数组中第一个负数为：-1"。

#### 4.3.2 continue语句

continue语句用于跳过当前迭代，直接进入下一次迭代。

// 示例代码：计算数组中正数的总和
var numbers = [1, -2, 3, -4, 5];
var sum = 0;

for (var i = 0; i < numbers.length; i++) {
    if (numbers[i] < 0) {
        continue;
    }
    
    sum += numbers[i];
}

console.log("正数的总和为：" + sum);

注释：通过使用continue语句，计算数组中正数的总和。

代码总结：使用continue语句可以跳过当前迭代，继续执行下一次迭代。

结果说明：该示例代码输出结果为"正数的总和为：9"。

### 4.4 空语句（empty statement）

空语句是一种不执行任何操作的语句，可以在编程中的某些场景下使用，例如占位符或占据一个代码块的位置。

// 示例代码：输出1到10的奇数
for (var i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        // 空语句
    } else {
        console.log(i);
    }
}

注释：通过使用空语句，输出1到10之间的奇数。

代码总结：空语句在某些情况下可以作为占位符或占据一个代码块的位置。

结果说明：该示例代码输出结果为"1, 3, 5, 7, 9"。
## 5. 函数与闭包

JavaScript中的函数是一种可执行的对象，可以通过声明或表达式来定义。函数可以被调用执行，并且可以接收参数和返回值。在JavaScript中，函数也是一种特殊的对象，可以作为值进行传递，赋值给变量或者作为参数传递给其他函数。

### 5.1 函数的定义与调用

在JavaScript中，函数可以通过 function 关键字来定义。

function sayHello() {
  console.log("Hello World!");
}

sayHello(); // 调用函数，输出 "Hello World!"

### 5.2 函数的参数与返回值

函数可以接收任意数量的参数，并且可以通过返回值来返回计算结果。

function add(a, b) {
  return a + b;
}

var result = add(3, 5);
console.log(result); // 输出 8

### 5.3 函数的作用域与闭包

在JavaScript中，每个函数都有自己的作用域。作用域决定了变量的可见性和生命周期。函数内部可以访问外部函数的变量，但外部函数不能访问内部函数的变量。

闭包是指内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。这种特性可以用来创建一些特定的函数，如计数器或私有变量。

function createCounter() {
  var count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

var counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2

### 5.4 高阶函数与回调函数

在JavaScript中，函数可以作为参数传递给其他函数，也可以作为返回值返回。

高阶函数是指接受一个或多个函数作为参数，并返回一个新函数的函数。常见的高阶函数有 `map`、`filter` 和 `reduce`。

回调函数是指作为参数传递给其他函数，并在特定事件发生时被调用的函数。

function doSomething(callback) {
  console.log("Do something...");
  callback();
}

function callback() {
  console.log("Callback function");
}

doSomething(callback); // 输出 "Do something..." 和 "Callback function"

## 6. 对象与面向对象编程

面向对象编程（Object-Oriented Programming，简称OOP）是一种常用的编程思想和方法论，它将程序中的数据和操作封装成对象，并通过对象之间的交互来实现程序的功能。

在JavaScript中，对象是一种复合数据类型，它由属性（property）和方法（method）组成。每个属性都由一个键（key）和一个值（value）组成，而方法则是一种特殊的函数。

### 6.1 对象的创建与属性访问

在JavaScript中，可以使用对象字面量的方式创建一个对象，例如：

// 对象字面量创建对象
var person = {
    name: "Tom",
    age: 20,
    sayHello: function() {
        console.log("Hello, my name is " + this.name);
    }
};

// 访问对象的属性
console.log(person.name); // 输出：Tom
console.log(person["age"]); // 输出：20

// 调用对象的方法
person.sayHello(); // 输出：Hello, my name is Tom

对象的属性可以通过两种方式进行访问：使用点运算符和方括号运算符。例如，`person.name`和`person["age"]`分别访问了对象`person`的`name`属性和`age`属性。

### 6.2 对象的方法与原型

在JavaScript中，对象的方法就是对象的属性，只不过该属性的值是一个函数。可以使用对象字面量的方式定义对象的方法，也可以通过构造函数的方式创建带有方法的对象。

// 对象字面量创建对象的方法
var obj = {
    method1: function() {
        console.log("This is method1.");
    },
    method2: function() {
        console.log("This is method2.");
    }
};

// 构造函数创建对象的方法
function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

var person = new Person("Tom");
person.sayHello(); // 输出：Hello, my name is Tom

在上面的示例中，`obj`和`person`对象都有自己的方法。使用对象字面量创建对象的方法是最简单的方式，但如果需要创建多个具有相同方法的对象，可以使用构造函数和原型来实现。

### 6.3 构造函数与实例化对象

在JavaScript中，可以使用构造函数来创建具有相同特性和行为的对象。

// 构造函数创建对象
function Rectangle(width, height) {
    this.width = width;
    this.height = height;
    this.getArea = function() {
        return this.width * this.height;
    };
}

var rect1 = new Rectangle(10, 5);
var rect2 = new Rectangle(8, 6);

console.log(rect1.getArea()); // 输出：50
console.log(rect2.getArea()); // 输出：48

在上面的示例中，`Rectangle`是一个构造函数，通过`new`关键字实例化了两个矩形对象`rect1`和`rect2`。每个对象都有自己的属性`width`和`height`，以及自己的方法`getArea`。

### 6.4 继承与多态

在面向对象编程中，继承是一种重要的特性，它允许子类继承父类的属性和方法，并可以根据需要重写或扩展父类的功能。

在JavaScript中，可以使用原型链来实现继承。通过将父类的原型指向子类的实例，子类就可以继承父类的属性和方法。

// 父类
function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log("This is " + this.name);
};

// 子类
function Dog(name) {
    Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
    console.log("Woof! " + this.name);
};

var animal = new Animal("animal");
var dog = new Dog("dog");

animal.speak(); // 输出：This is animal
dog.speak(); // 输出：Woof! dog