JS面向对象教程

### JS面向对象教程详解 #### 一、JavaScript与面向对象编程基础 JavaScript作为一种脚本语言，自1995年诞生以来，不断发展完善，成为现代Web开发不可或缺的一部分。随着ES6标准的引入，JavaScript正式引入了类(class)的概念，使得其面向对象编程(OOP)更加直观和规范。但在ES6之前，JavaScript早已支持面向对象编程，尽管其方式更为灵活，也更依赖于原型链。 #### 二、使用函数定义类 在面向对象编程中，“类”是一种抽象的数据类型，用来描述具有相同属性和行为的对象集合。在JavaScript中，类的定义主要通过函数来实现。例如： ```javascript function Class1() { // 构造函数体，用于初始化类的成员变量 this.property = value; // 定义类的属性 this.method = function() { /* 方法定义 */ }; // 定义类的方法 } ``` 这里，`Class1`既是函数也是类，通过`this`关键字可以在构造函数中定义类的属性和方法。 #### 三、使用`new`操作符创建类的实例 在JavaScript中，`new`操作符用于基于构造函数创建新的实例。这实际上是在内存中分配空间，调用构造函数初始化新对象，并返回该对象的引用。例如： ```javascript function Class1() { this.message = "Hello, World!"; } var instance = new Class1(); console.log(instance.message); // 输出: Hello, World! ``` 这里，`new Class1()`创建了一个`Class1`类的实例，`instance`变量持有这个新对象的引用。 #### 四、JavaScript中的函数与类 在JavaScript中，函数和类实际上是同义词。每个函数都可以作为构造函数，通过`new`操作符来创建对象。如果没有明确地在函数内初始化类成员，那么使用`new`操作符会返回一个空对象。 #### 五、使用方括号引用对象属性和方法 JavaScript对象可以通过点(`.`)或方括号(`[]`)两种方式访问其属性和方法。方括号语法提供了一种动态引用属性和方法的方式，允许使用变量作为属性名或方法名。例如： ```javascript var obj = {}; obj["property"] = value; // 设置属性 console.log(obj["property"]); // 访问属性 obj["method"] = function() { console.log("Hello!"); }; // 设置方法 obj["method"](); // 调用方法 ``` 方括号语法尤其适用于属性名或方法名未知或动态变化的情况，提供了更大的灵活性和动态性。 #### 六、综合应用示例 考虑一个用户信息类(User)，包含年龄(age)和性别(sex)属性。通过下拉列表选择并显示用户的不同信息： ```html <script> function User() { this.age = 21; this.sex = "male"; } var user = new User(); function show(slt) { if (slt.selectedIndex != 0) { alert(user[slt.value]); } } </script> <select onchange="show(this)"> <option>请选择需要查看的信息：</option> <option value="age">年龄</option> <option value="sex">性别</option> </select> ``` 在这个例子中，方括号语法使得能够根据用户的选择动态地显示不同属性的值，展示了JavaScript面向对象编程的实用性和灵活性。 JavaScript的面向对象编程模型虽然与传统的编译型语言如Java或C#有所不同，但通过函数作为类、`new`操作符以及动态属性访问等方式，仍然能有效地构建复杂的应用程序，展现了其高度的灵活性和强大的功能。