面向对象和原型

Posted 2020-08-15 &奋斗小青年

## javascript高级第二天

### 面向对象的三大特性
* 封装
* 继承
自己没有的，拿别人过来用，就是继承
* 多态
父类引用指向子类的对象（JavaScript中用不到）
### 创建对象的四种方式
* 使用字面量创建对象
```js
var o = {key:value, key:value...}
```
用一个创建一个，不能复用，造成代码冗余，资源浪费
* 使用内置构造函数创建对象
```js
var o = new Object();
var o = new Array();
```
创建出来的对象都是空的对象，要手动的去为对象添加属性。造成代码重复
* 封装简单的工厂函数（不推荐使用）
```js
function createObj(){
var obj = {};
obj.xx=xxx;
return obj;
}
```
* 自定义构造函数
```
function 构造函数名{
this.xxx=xxx;
//....
}
```
0.构造函数名首字母要大写
1.构造函数一般和new关键字一起使用
2.构造函数返回值默认为新创建好对象 如果手动返回基本数据类型，不影响默认返回值，如果返回的是对象，那么新创建出来的对象将不会返回，取而代之的是return后面的对象

构造函数（constructor）的执行步骤
1.使用new关键字创建对象
2.调用构造函数，将new创建出来的对象赋值给构造函数内的this
3.使用this给新创建出来的对象增加成员
4.默认返回新创建出来的这个对象

### 原型
#### 构造函数存在问题
构造函数中的方法，每新创建一个对象的时候，该对象都会重新的创建一次这个方法，每个独享独占一个方法
但是该方法内容完全相同，所以造成资源浪费

1.解决办法1
将构造函数内的方法，进行提取，放在构造函数外面，在构造函数内部进行引用赋值
那么创建出来的对象，都会指向构造函数外面的这个函数，达到共享的目的
问题：全局变量增多，造成全局变量污染，代码结构混乱，不容易维护

2.解决办法2
使用原型

### 原型

#### 原型是什么？
在构造函数创建出来的时候，系统会默认的创建并关联一个对象，这个对象就是原型，原型对象默认是空对象
默认的原型对象中会有一个属性constructor指向该构造函数

#### 原型的作用
原型对象中的成员，可以被使用和它关联的构造函数创建出来的所有对象共享

#### 原型对象的使用
1. 使用对象的动态特性，为原型对象添加成员
2. 直接替换原型对象

注意事项：
直接替换原型对象，会导致替换之前创建的对象的原型和替换之后创建的对象的原型不一致

#### 原型的使用该注意事项
1.使用对象访问属性的时候，会现在对象中查找，如果找到了就直接使用
如果没有找到，就去原型中查找
2.使用对象设置属性的时候，只会在对象本身中查找，不会去原型中查找，如果在对象本身中没有找到这个属性
则给该对象新增一个属性，如果在对象中有这个属性，修改这个属性
3.如果在原型对象中有引用类型的属性，那么使用对象进行修改该属性内容，则其他所有跟这个原型对象相关的对象都会受到影响
Person.prototype.car = {};
var p = new Person( );
p.car = {}; //这是修改属性
p.car.brand= ""; //这是修改属性的内容
4.一般情况下不会将属性添加到原型对象中
只会将需要共享的方法，添加到原型对象中

#### __proto__
1.这个属性不是标准属性，所以存在通用性问题
2.一般不推荐使用这个属性
3.调试的时候，可以使用这个属性
4.这个属性是原型中的属性

替换原型时候的注意事项：
在新替换的原型中，没有constructor属性，会影响三角结构关系的合理性
so，在新替换的原型中，手动添加constructor属性，以保证关系的合理性，赋值为关联的构造函数