1. 简介

什么是ES5？

ES5（ECMAScript 5）是JavaScript的第5个版本，是一种由ECMA国际标准化组织发布的标准。它是JavaScript的一个重要版本，引入了许多新的语言特性和改进，被广泛支持和应用。

ES5的主要特性

ES5引入了许多新的语言特性和改进，包括严格模式（strict mode）、函数绑定、数组迭代器、JSON对象等。它还对语法和标准库进行了修正和扩展，提供了更好的开发体验和性能。

2. 变量和数据类型

变量声明

在ES5中，可以使用var关键字来声明变量。变量声明会提升到当前作用域的顶部。

var x = 5;

数据类型

ES5有几种基本数据类型，包括数字、字符串、布尔值、对象和函数。

var num = 10;
var str = "Hello";
var bool = true;
var obj = { name: "John" };
var func = function() {
    console.log("Hello");
};

3. 函数

函数声明和函数表达式

在ES5中，可以使用函数声明或函数表达式创建函数。函数声明提升到当前作用域的顶部，可以在声明之前调用。

// 函数声明
function sayHello() {
    console.log("Hello");
}
​
// 函数表达式
var sayHi = function() {
    console.log("Hi");
};

作用域和闭包

ES5使用函数作用域，函数内部声明的变量在函数外部不可访问。闭包是指函数可以访问并保存其词法作用域，即使函数外部的词法作用域已经销毁。

function outer() {
    var x = 10;
​
    function inner() {
        console.log(x); // 访问外部函数的变量
    }
​
    return inner;
}
​
var closure = outer(); // 获取inner函数的引用
closure(); // 输出 10

函数的高级特性

ES5引入了一些高级函数特性，如bind方法和自执行函数。

var obj = {
    x: 5,
    getX: function() {
        console.log(this.x);
    }
};
​
var getX = obj.getX;
getX(); // 输出 undefined
​
var boundGetX = getX.bind(obj);
boundGetX(); // 输出 5
​
(function() {
    console.log("IIFE");
})(); // 自执行函数

4. 对象和原型

创建对象

ES5中可以使用对象字面量或构造函数来创建对象。

var obj = {
    name: "John",
    age: 30
};
​
function Person(name, age) {
    this.name = name;
    this.age = age;
}
​
var person = new Person("John", 30);

原型和原型链

对象在创建时会关联一个原型对象，可以通过原型对象共享属性和方法。原型对象也可以拥有自己的原型，形成原型链。

Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};
​
person.greet(); // 输出 "Hello, John"

继承

ES5中可以使用原型链来实现对象间的继承。

function Student(name, age, school) {
    Person.call(this, name, age);
    this.school = school;
}
​
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
​
var student = new Student("John", 18, "XYZ School");

5. 数组和迭代器

数组的基本操作

ES5中数组提供了一些常用的操作方法，如push、pop、shift、unshift等。

var numbers = [1, 2, 3];

numbers.push(4); // 在数组末尾添加元素
numbers.pop(); // 删除数组末尾的元素
numbers.shift(); // 删除数组首位的元素
numbers.unshift(0); // 在数组首位添加元素

console.log(numbers); // 输出 [0, 1, 2]

迭代器方法

ES5提供了一些用于迭代数组的方法，如forEach、map、filter等。

var numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(num) {
    console.log(num); // 遍历数组并输出每个元素
});

var doubled = numbers.map(function(num) {
    return num * 2; // 对每个元素进行操作并返回新数组
});

var evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0; // 返回满足条件的元素组成的新数组
});

6. 错误处理

异常处理

ES5使用try和catch来捕获和处理异常。

try {
    // 可能会引发异常的代码
} catch (error) {
    // 异常处理代码
    console.log(error);
}

自定义错误

可以通过throw关键字抛出自定义错误。

function divide(a, b) {
    if (b === 0) {
        throw new Error("除数不能为0");
    }

    return a / b;
}

try {
    var result = divide(10, 0);
    console.log(result);
} catch (error) {
    console.log(error.message);
}

7. 实战案例

表单验证

var form = document.getElementById("myForm");
​
form.addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单提交
​
    var username = form.username.value;
    var password = form.password.value;
​
    if (username === "" || password === "") {
        alert("用户名和密码不能为空");
    } else {
        // 执行表单提交操作
        form.submit();
    }
});

图片轮播

var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentIndex = 0;
var imageElement = document.getElementById("sliderImage");
​
function showNextImage() {
    currentIndex++;
​
    if (currentIndex === images.length) {
        currentIndex = 0;
    }
​
    var imageUrl = "images/" + images[currentIndex];
    imageElement.src = imageUrl;
}
​
setInterval(showNextImage, 3000);