黑马程序员技术交流社区

标题: 【成都校区】JS原型原型链 [打印本页]
作者: 小刀葛小伦    时间: 2019-4-30 16:44
标题: 【成都校区】JS原型原型链
一、原型概念
1.原型是一个函数的prototype所指向的对象，（这儿就叫它原型对象），同时也是实例化出来的对象的原型
2.任何构造函数都有一个prototype属性，这个prototype属性指向一个prototype对象，每个prototype对象有一个constructor 属性，指向它的（constructor ）的构造函数
即：
```
Cat.prototype.constructor=Cat;//原型对象的contructor属性指向它的构造函数
```
每个实例（对象）有一个constructor属性，默认调用prototype对象的constructor属性。
即：
```
cat1.constructor == Cat.prototype.constructor;
```
说明原型链到Object.prototype终止。
```
Object.prototype.__proto__ === null
```
每一个JavaScript对象(除了null)都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。
二、原型与原型链的理解（如下图所示）
js中每个对象都有一个__proto__属性指向它的原型（这个原型就是生成这个实例化对象的构造函数的==prototype==所指向的对象）,而这个原型对象又是由Object 构造函数生成的，所以这个（原型对象）的__proto__指向的就是Object.prototype，而Object.prototype.__proto__==null,即Object.prototype没有原型。所以查找属性的时候查到 Object.prototype 就可以停止查找了。这就是原型链。
```
Person.prototype=person.__proto__;
Person.prototype.__proto__=Object.prototype
Object.prototype.__proto__=null//原型链的顶端，没有原型
```
图中蓝色部分的线路就是原型链
![image]()
三、Object和Function
首先Object和Function都是构造函数，而所有的构造函数的都是Function的实例对象. 因此Object是Function的实例对象
即:
```
//实例对象的原型指向构造函数的prototype属性，prototype属性指向一个原型对象
Object.__proto__ = Function.prototype;
Function.__proto__ = Function.prototype;
//原型对象又是由Object构造函数生成
Function.prototype.__proto__=OBject.prototype
```
Object是Function的实例对象, Function.prototype是Object的实例对象。

关于instanceof的结果不要仅从字面上理解, 它的计算规则是: 如果右侧构造函数的prototype属性能在左侧的对象的原型链中找到, 那么就返回true, 否则就返回false
```javascript
Object intanceof Function: Object.__proto__ === Function.prototype, 因为结果为true
Function instanceof Object: Function.__proto__.__proto__ === Object.prototype, 因为结果也为true
```
实例对象的constructor属性指向其构造函数
```javascript
因此Object.constructor === Function, Function.constructor === Function.
```
四、构造器函数（Object、Function、String、Number、Array、Boolean、Date、Error、Event、RegExp）

JSON和Math不属于10个构造器函数，但他们12个共同属于Javascript的内置对象。

JSON和Math已经是对象

所有typeof返回“function”的对象都是函数对象。也称这样的对象为构造器（constructor），因而，所有的构造器都是对象

```
//一下所有的对象返回都是function
console.dir(typeof Function)
console.dir(typeof Object)
console.dir(typeof Date)
console.dir(typeof String)
console.dir(typeof Number)
console.dir(typeof Boolean)
console.dir(typeof Array)
console.dir(typeof RegExp)
```
五、JS三大对象
分别是本地对象、内置对象和宿主对象

1.本地对象
- 与宿主无关，独立于宿主环境的ECMAScript实现提供的对象。
- 简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。
- 这些引用类型在运行过程中需要通过new来创建所需的实例对象。
- 包含：Object、Array、Date、RegExp、Function、Boolean、Number、String等。
2.内置对象
- 与宿主无关，独立于宿主环境的ECMAScript实现提供的对象。
- 在 ECMAScript 程序开始执行前就存在，本身就是实例化内置对象，开发者无需再去实例化。
- 内置对象是本地对象的子集。
- 包含：Global和Math。
- ECMAScript5中增添了JSON这个存在于全局的内置对象。

3.宿主对象
- 由 ECMAScript 实现的宿主环境提供的对象，包含两大类，一个是宿主提供，一个是自定义类对象。
- 所有非本地对象都属于宿主对象。
- 对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，浏览器对象有很多，如Window和Document等。
- 所有的DOM和BOM对象都属于宿主对象。

4.本地对象和内置对象统称为“内置对象”

Object、Array、Date、RegExp、Function、Boolean、Number、String、Global、
Math、JSON

六、总结：1、函数的__proto__ 指向Function.protoype，原型对象的__proto__指向Object.prototype。字面量 和 new出来的实例对象 ，指向其构造函数（谁 new 出来的）的prototype， Object.create 创建的对象呢，你给它谁，它就指向谁。
这里需要注意所有构造器的prototype都是对象(object)类型，只有Function.prototype是函数(function)类型，这是为了保证函数构造器们的__proto__指向的都是函数。




2019011617391125.png (171.35 KB, 下载次数: 9)

2019011617391125.png




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2