原型对象、原型链知识点总结

男娘i 2021-12-21 05:11 275阅读 0赞

## 1、扩展几个面向对象术语 ##

OOA 面向对象分析  
OOD 面向对象设计  
OOP 面向对象编程

## 2、对象创建的几种方式 ##

字面量方式创建对象(类似json格式)  
![字面量方式创建对象][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]  
上面创建对象的方式有一个共同的特点 ： 一次只能创建一个对象  
缺点 ： 多个同类的对象在创建时，代码会重复编写

## 4、工厂模式 （设计模式的一种）了解 ##

可以通过函数调用的方式创建对象  
工厂模式创建对象的过程 ：  
![工厂模式创建对象][20190627195727128.png]  
优点 ：  
解决了多个同类对象创建时代码重复的问题  
缺点 ：  
一般对象是通过new关键字创建的，而工厂模式只是通过函数调用的方式创建的，对象创建的方式不规范,不能确定某个对象属于哪一个类

使用instanceof确定某个对象属于哪一个类 (判断一个实例属于某个类)  
方法 ： 对象 instanceof 构造函数

![创建函数][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]  
5、构造函数  
构造函数 ：使用new 关键字创建对象的函数 比如 ：new Array() new String() 这里的Array 和 String 就是构造函数  
自定义构造函数 ：  
特点 ：构造函数的命名规范 大驼峰规范  
构造函数中 的this 指向构造函数new出来的对象  
构造函数中的属性叫做 实例属性  
构造函数中的方法叫做 实例方法

优点 ：对象是通过new关键字创建的,对象创建方式规范  
能够确定某个对象属于哪一个类

缺点 ：多个同类对象的方法在调用时，空间不共享

创建：创建一个新对象 new 对象  
改变this指向 构造函数中的this指向了new出来对象  
执行构造函数里的代码 调用对象的方法或属性  
返回一个对象  
![创建][20190627195854206.png]

6、构造函数中定义 原型方法和原型属性  
原型属性和原型方法 ： 都写在构造函数的外面  
优点 ： 多个同类对象的方法调用时，空间共享  
缺点 ： 原型属性的属性值 一改全改  
![原型方法][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]  
7、构造函数中 定义 混合写法  
属性写成 实例属性  
方法写成 原型方法

8、原型对象 prototype 也是一个属性，该属性后面可以添加方法  
每一个函数都有一个原型对象  
每一个构造函数都有一个原型对象  
原型对象上的属性和方法能被实例访问  
原型对象上的属性和方法不能直接被子类访问(继承中实现)  
Javascript的继承机制基于原型，而不是Class类  
凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象  
普通对象没有prototype,但有\_\_proto\_\_属性,  
构造函数.prototype 对象.**proto**  
构造函数没有 **proto** 但有 prototype属性  
prototype属性(对象)会默认获得一个constructor(构造函数)属性，这个属性是一个指向prototype属性所在函数的指针

所有的构造函数都有一个prototype属性，这个属性就称为原型对象  
所有的构造函数new出来的对象都有一个\_\_proto\_\_ 属性 ， 这个属性也对应着一个对象就是原型对象  
![原型对象详解图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 3]

**面试题 ：** **在Array的原型上实现数组去重**  
![在Array的原型上实现数组去重][Array]  
**在String的原型上实现去掉字符串两端的空白字符**  
![在String的原型上实现去掉字符串两端的空白字符][String]  
9、原型链  
实例对象和原型之间的连接 就称为原型链

原型模式的执行流程 ：  
首先在实例上查找 找到后就返回  
再去在构造函数的原型上查找 找到后就返回  
继续去 OBject.prototype 上查找 找到后就返回  
![原型模式的执行流程][20190627200120183.png]

原型链和作用域链的区别 ：  
原型链是作用在构造函数上,原型链操作的是构造函数的属性,实例属性 原型属性  
作用域链是作用在普通函数上,作用域链操作的数全局变量或局部变量  
![原型链和作用域链的区别][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 4]  
//  
![在这里插入图片描述][20190627200212231.png]  
10、扩展 原型中的几个关键字  
测试某个对象是否属于某个类的方法 isPrototypeOf()  
语法： 构造函数.prototype.isPrototypeOf(对象):判断一个对象是否指向了该构造函数的原型对象，可以使用isPrototypeOf()方法来测试 结果为boolean类型

delete ：删除实例属性  
语法 ： delete 对象.实例属性

hasOwnProperty() 是否包含该实例属性,包含返回true，否则返回false  
语法： 实例对象.hasOwnProperty(“实例属性”)

in 是否存在该属性（原型或实例中）  
语法： “属性” in 对象实例

![原型测试][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 5]  
扩展 使用 Object.defineProperty() 定义属性 （此内容了解）  
语法：Object.defineProperty(obj, prop, descriptor)  
参数说明：  
obj：必需。目标对象  
prop：必需。需定义或修改的属性的名字  
descriptor：必需。目标属性所拥有的特性  
例如 ：  
var obj = \{\}  
Object.defineProperty(obj,“newKey”,\{

\});  
console.log( obj.newKey ); //undefined

设置的特性总结：  
value: 设置属性的值  
writable: 值是否可以重写。true | false false是默认的  
enumerable: 目标属性是否可以被枚举。true | false 如果是枚举对象 可以使用for … in来遍历的  
configurable: 目标属性是否可以被删除 true | false  
![测试][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 6]

设计模式(了解)  
1、什么是设计模式？  
（单例 (抽象)工厂 代理 适配器 策略 观察者 组合等 MV\*—>MVC MVVM 不属于23种设计模式 ）

设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 设计模式就是一种 编程规范 架构层面的

2、设计模式之单例模式

单例：对象只能实例化一次就叫单例

单例模式：字面量的对象声明，其实在设计模式中可以看作是一种单例模式，所谓单例模式，就是永远保持对象的一个实例。  
var obj= new Object();  
var obj = \{\};  
obj = \{\} 一次只能创建一个对象 - 单例模式

//实现单利模式
     //  实现思路：  将第一次new出来的对象 this  保存到一个变量中 ，返回这个变量
     //再次创建对象时，判断  这个变量中是否含有值，如果有值，就直接将这个变量返回

3、设计模式之代理模式

代理模式: 为其他对象提供一种代理，并以控制对这个对象的访问。

4、设计模式之适配器模式

适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。

将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

//手机 ：打电话　　播放音乐  
//pad :只能播放音乐  
//模拟适配器 ： 既可以操作手机 又可以操作 pad ，判断这些产品有哪些功能

5、设计模式之工厂模式

让对象的调用者和对象创建过程分离，当对象调用者需要对象时，直接向工厂请求即可。从而避免了对象的调用者与对象的实现类似编码方式耦合，以提高系统的可维护性、可扩展性。

6、设计模式之观察者模式  
观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

7、策略模式  
定义一系列算法，把他们一个一个封装起来，并且使他们可以相互替换(具有相同的目标和意图)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20211221/1eaf2ef50f7c4dfcb4b5c8c78716e38f.png
[20190627195727128.png]: /images/20211221/a5774724b6bc4385855d0b10b914af6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20211221/ce3753b4cdee4a70b69250da550ee68d.png
[20190627195854206.png]: /images/20211221/e454add979214c0096457d243b7fdedb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]: /images/20211221/8b6c9cc85ee54780bcb8059744bc4233.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 3]: /images/20211221/99d7307dfbb04501acc7d85e63b08c16.png
[Array]: /images/20211221/e2baa1965fa74089b15e8f2edd5c547c.png
[String]: /images/20211221/0d68c0ddd9a14b66ae8cd860ba791513.png
[20190627200120183.png]: /images/20211221/554118ff510d4578b3822f0e7dc291b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 4]: /images/20211221/96ca2edd375b4074a2e1fa30172dadb7.png
[20190627200212231.png]: /images/20211221/a8af93daf2fc45a3b30f1ed309b5e3d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 5]: /images/20211221/c70fd51e2a2d44c3ab87d9cebe7b112b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 6]: /images/20211221/ddaca52a4f664fb3a029e9fe8048685a.png