JavaScript(5)--- 面向对象 + 原型
雨点的名字 人气:2
# 面向对象 + 原型
面向对象这个概念并不陌生,如 **C++、Java** 都是面向对象语言。面向对象而言都会现有一个类的概念 ，先有类再有对象。类是实例的类型模板。
比如人类 是一个类 张三 李四 就是一个个对象，他们都是人类创建出的对象 所以都有人类的共同特性，比如 人类都会吃饭 人类都会走路 所以张三李四也会吃饭和走路。
JavaScript 没有类的概念，是**基于原型的面向对象方式**。它们的区别在于：
```
在基于类的面向对象方式中，对象（object）依靠类（class）来产生。
在基于原型的面向对象方式中，对象（object）则是依靠构造函数（constructor）和原型（prototype）构造出来的。
```
面向对象语言的第一个特性毫无疑问是封装，在 JS 中，封装的过程就是把一些 **属性** 和 **方法** 放到对象中“包裹”起来。
## 一、创建对象三种方式
#### 1、原始方式创建对象
**1) 字面量的方式**
`示例`
```javascript
var per = {
name: "张三",
age: 20,
sex: "男",
say: function () {
console.log("说话");
}
};
```
**2) Object实例添加属性方法**
`示例`
```javascript
var per2=new Object();
per2.name="李四";
per2.age=30;
per2.sex="男";
per2.say=function () {
console.log("说话");
};
```
**优点**：代码简单。
**缺点**： 创建多个对象会产生大量的代码，编写麻烦，且并没有实例与原型的概念。
**解决办法**：工厂模式。
#### 2、工厂模式
`概念` 工厂模式是非常常见的一种设计模式，它抽象了创建具体对象的过程。JS 中创建一个函数，把创建新对象、添加对象属性、返回对象的过程放到这个函数中，
用户只需调用函数来生成对象而无需关注对象创建细节。
`示例`
```javascript
function createObject(name,age) {
this.name=name;
this.age=age;
this.say=function () {
console.log("说话");
};
}
var per1=createObject("张三",20);
var per2=createObject("李四",30);
```
**优点**：工厂模式解决了对象字面量创建对象代码重复问题，创建相似对象可以使用同一API。
**缺点**：因为是调用函创建对象，无法识别对象的类型。
**解决办法**：构造函数
#### 3、构造函数
JS 中构造函数与其他函数的唯一区别，就在于调用它的方式不同。任何函数，只要通过`new` 操作符来调用，那它就可以作为构造函数。
`示例`
```javascript
//自定义构造函数----->实例化对象
function Person(name,age,sex) {
this.name=name;
this.age=age;
this.sex=sex;
this.say=function () {
console.log("说话");
};
}
//构造函数---->创建对象
var per1=new Person("张三",20,"女");
var per2=new Person("李四",30,"女");
```
通过构造函数`new`一个实例经历了四步：
```
1. 创建一个新对象；
2. 将构造函数内的 this 绑定到新对象上；
3. 为新对象添加属性和方法；
4. 返回新对象（JS 引擎会默认添加 return this;）。
```
而通过构造函数创建的对象都有一个`constructor`属性，它是一个指向构造函数本身的指针，因此就可以检测对象的类型。
```javascript
alert(per1.constructor === Person) //true
alert(per1 instanceof Person) // true
```
但是仍然存在问题：
```javascript
alert(per1.say == per2.say) //false
```
同一个构造函数中定义了`say()`，而不同对象的同名函数却是不相等的，意味着这两个同名函数的内存空间不一致，也就是**构造函数中的方法**要在每个实例上重新创建一次。
这显然增加不必要内存空间。
**优点**：解决了类似对象创建问题，且可以检测对象类型。
**缺点**：构造函数方法要在每个实例上新建一次。
**解决办法**：原型模式。
## 二、原型模式 #### 1、概念 在JS中，创建对象的方式有工厂模式和构造函数模式等； 而构造函数模式最大的问题在于：`构造函数中的每个方法都需要在实例对象中重新创建一遍，不能复用`， 所以为了解决这一个问题，就需要使用原型模式来创建对象。原型模式是把所有实例共享的方法和属性放在一个叫做 `prototype(原型)`的属性中 ，在创建一个函数 时都会有个prototype属性， 这个属性是一个指针，指向一个对象，是通过调用构造函数而创建的那个对象实例的原型对象。 如果你学习过java，我们可以简单理解原型就好比我们的静态方法,任何对象都可以共享这个静态方法。 `作用` 共享数据,节省内存空间。 #### 2、举例 使用原型，就意味着我们可以把希望实例共享的属性和方法放到原型对象中去，而不是放在构造函数中，这样每一次通过构造函数`new`一个实例，原型对象中定义 的方法都不会重新创建一次。 `示例` ```javascript //原型的作用之一:共享数据,节省内存空间 function Person() { } //通过构造函数的原型添加属性和方法 Person.prototype.name = "张三"; Person.prototype.age = "20"; Person.prototype.say = function() { alert('通过原型创建吃饭方法'); }; var person1 = new Person(); var person2 = new Person(); alert(person1.name); //"张三" alert(person2.name); //"张三" alert(person1.say == person2.say); //true 通过原型创建的方法就为true ``` **优点**：与单纯使用构造函数不一样，原型对象中的方法不会在实例中重新创建一次，节约内存。 **缺点**：使用空构造函数，实例 person1 和 person2 的 `name`都一样了，我们显然不希望所有实例属性方法都一样，它们还是要有自己独有的属性方法。 并且如果原型中对象中有引用类型值，实例中获得的都是该值的引用，意味着一个实例修改了这个值，其他实例中的值都会相应改变。 **解决办法**：构造函数+原型模式组合使用。
## 三、构造函数+原型模式 最后一种方式就是组合使用构造函数和原型模式，构造函数用于定义实例属性，而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性， 同时又有对共享方法的引用，节省内存。 ```javascript //原型的作用之一:共享数据,节省内存空间 //构造函数 function Person(age,sex) { this.age=age; this.sex=sex; } //通过构造函数的原型添加一个方法 Person.prototype.eat=function () { console.log("通过原型创建吃饭方法"); }; var per1=new Person(20,"男"); var per2=new Person(20,"女"); alert(per1.eat == per2.eat); //通过原型创建的方法就为true ``` 这种构造函数与原型模式混成的模式，是目前在 JS 中使用最为广泛的一种创建对象的方法。
### 参考 1、[JS面向对象编程之封装](https://segmentfault.com/a/1190000015843072) 基本上参考这篇写的，因为我认为它写的非常通俗易懂，不需要我再去整理了。非常感谢 2、[js面向对象编程](https://zhuanlan.zhihu.com/p/41656666) 3、[JavaScript面向对象](https://www.jianshu.com/p/f9792fdd9915)
``` 别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。 攻我盾者，乃我内心之矛(2)。 ```
## 二、原型模式 #### 1、概念 在JS中，创建对象的方式有工厂模式和构造函数模式等； 而构造函数模式最大的问题在于：`构造函数中的每个方法都需要在实例对象中重新创建一遍，不能复用`， 所以为了解决这一个问题，就需要使用原型模式来创建对象。原型模式是把所有实例共享的方法和属性放在一个叫做 `prototype(原型)`的属性中 ，在创建一个函数 时都会有个prototype属性， 这个属性是一个指针，指向一个对象，是通过调用构造函数而创建的那个对象实例的原型对象。 如果你学习过java，我们可以简单理解原型就好比我们的静态方法,任何对象都可以共享这个静态方法。 `作用` 共享数据,节省内存空间。 #### 2、举例 使用原型，就意味着我们可以把希望实例共享的属性和方法放到原型对象中去，而不是放在构造函数中，这样每一次通过构造函数`new`一个实例，原型对象中定义 的方法都不会重新创建一次。 `示例` ```javascript //原型的作用之一:共享数据,节省内存空间 function Person() { } //通过构造函数的原型添加属性和方法 Person.prototype.name = "张三"; Person.prototype.age = "20"; Person.prototype.say = function() { alert('通过原型创建吃饭方法'); }; var person1 = new Person(); var person2 = new Person(); alert(person1.name); //"张三" alert(person2.name); //"张三" alert(person1.say == person2.say); //true 通过原型创建的方法就为true ``` **优点**：与单纯使用构造函数不一样，原型对象中的方法不会在实例中重新创建一次，节约内存。 **缺点**：使用空构造函数，实例 person1 和 person2 的 `name`都一样了，我们显然不希望所有实例属性方法都一样，它们还是要有自己独有的属性方法。 并且如果原型中对象中有引用类型值，实例中获得的都是该值的引用，意味着一个实例修改了这个值，其他实例中的值都会相应改变。 **解决办法**：构造函数+原型模式组合使用。
## 三、构造函数+原型模式 最后一种方式就是组合使用构造函数和原型模式，构造函数用于定义实例属性，而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性， 同时又有对共享方法的引用，节省内存。 ```javascript //原型的作用之一:共享数据,节省内存空间 //构造函数 function Person(age,sex) { this.age=age; this.sex=sex; } //通过构造函数的原型添加一个方法 Person.prototype.eat=function () { console.log("通过原型创建吃饭方法"); }; var per1=new Person(20,"男"); var per2=new Person(20,"女"); alert(per1.eat == per2.eat); //通过原型创建的方法就为true ``` 这种构造函数与原型模式混成的模式，是目前在 JS 中使用最为广泛的一种创建对象的方法。
### 参考 1、[JS面向对象编程之封装](https://segmentfault.com/a/1190000015843072) 基本上参考这篇写的，因为我认为它写的非常通俗易懂，不需要我再去整理了。非常感谢 2、[js面向对象编程](https://zhuanlan.zhihu.com/p/41656666) 3、[JavaScript面向对象](https://www.jianshu.com/p/f9792fdd9915)
``` 别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。 攻我盾者，乃我内心之矛(2)。 ```
加载全部内容