JavaScript面向对象与原型详解

篇首语：本文由编程笔记#小编为大家整理，主要介绍了 Javascript 中面向对象编程的相关知识，希望对你有所帮助。

### 创建对象

在 Javascript 中，可以通过多种方式创建对象。最基础的方法是使用对象字面量或 new Object()。

```Javascript var box = new Object(); // 创建一个 Object 对象 box.name = 'Lee'; // 创建一个 name 属性并赋值 box.age = 100; // 创建一个 age 属性并赋值 box.run = function () { // 创建一个 run() 方法并返回值 return this.name + this.age + '运行中...'; }; alert(box.run()); // 输出属性和方法的值 ```

在这个例子中，this 关键字代表 box 对象本身。这种方法虽然简单，但在创建多个类似对象时会重复大量代码。

### 工厂模式

为了解决重复实例化的问题，可以使用工厂模式。工厂模式通过一个函数来集中创建对象实例。

```Javascript function createObject(name, age) { var obj = new Object(); obj.name = name; obj.age = age; obj.run = function () { return this.name + this.age + '运行中...'; }; return obj; } var box1 = createObject('Lee', 100); // 第一个实例 var box2 = createObject('Jack', 200); // 第二个实例 alert(box1.run()); alert(box2.run()); // 保持独立 ```

工厂模式解决了重复实例化的问题，但无法识别对象的具体类型。

### 构造函数

构造函数是一种特殊的函数，用于创建特定类型的对象。构造函数通过 new 关键字调用。

```Javascript function Box(name, age) { this.name = name; this.age = age; this.run = function () { return this.name + this.age + '运行中...'; }; } var box1 = new Box('Lee', 100); var box2 = new Box('Jack', 200); alert(box1.run()); alert(box1 instanceof Box); // 清晰地识别对象类型 ```

构造函数不仅解决了重复实例化的问题，还解决了对象识别的问题。构造函数的规范包括：函数名首字母大写，必须使用 new 关键字调用。

### 原型

每个函数都有一个 prototype 属性，用于包含可以由特定类型的所有实例共享的属性和方法。使用原型可以实现属性和方法的共享。

```Javascript function Box() {} Box.prototype.name = 'Lee'; Box.prototype.age = 100; Box.prototype.run = function () { return this.name + this.age + '运行中...'; }; var box1 = new Box(); var box2 = new Box(); alert(box1.run == box2.run); // true，方法的引用地址保持一致 ```

使用原型可以减少内存占用，但需要注意的是，原型中的属性是共享的，对于引用类型的数据可能会导致意外的结果。

### 继承

Javascript 中的继承主要通过原型链实现。原型链允许一个对象继承另一个对象的属性和方法。

```Javascript function Box() { this.name = 'Lee'; } function Desk() { this.age = 100; } Desk.prototype = new Box(); // Desk 继承了 Box var desk = new Desk(); alert(desk.age); alert(desk.name); // 得到被继承的属性 ```

为了更好地解决引用共享和超类型无法传参的问题，可以使用组合继承（原型链 + 借用构造函数）。

```Javascript function Box(age) { this.name = ['Lee', 'Jack', 'Hello']; this.age = age; } Box.prototype.run = function () { return this.name + this.age; }; function Desk(age) { Box.call(this, age); // 借用构造函数 } Desk.prototype = new Box(); // 原型链继承 var desk = new Desk(100); alert(desk.run()); ```

### 寄生组合继承

寄生组合继承是 Javascript 中最常用的继承模式，它解决了组合继承中构造函数被调用两次的问题。

```Javascript function obj(o) { function F() {} F.prototype = o; return new F(); } function create(box, desk) { var f = obj(box.prototype); f.cOnstructor= desk; desk.prototype = f; } function Box(name) { this.name = name; this.arr = ['哥哥', '妹妹', '父母']; } Box.prototype.run = function () { return this.name; }; function Desk(name, age) { Box.call(this, name); this.age = age; } inPrototype(Box, Desk); // 实现继承 var desk = new Desk('Lee', 100); desk.arr.push('姐姐'); alert(desk.arr); alert(desk.run()); // 只共享了方法 var desk2 = new Desk('Jack', 200); alert(desk2.arr); // 引用问题解决 ```