语言： js
js version: v10.15.1
时间： 2019.4.25 15:34
这里我不说太长的话，去解释，不然会晕。
js 里面的原型是真的有一点的绕。记住这几句话就行了，我就不画图了，不然我感觉看图更晕。
- 万物皆对象。
- js 对象分为 函数对象 和 普通对象。
- 只有函数对象有 prototype ，所有的对象都有 proto 内置属性。
- prototype 其实是函数对象的一个实例。
- proto 是构造函数的原型对象。
- Function.prototype 它既是函数对象也是不普通对象。
- Object.prototype.proto 是个 null。
什么是函数对象？什么是普通对象？
解释：
通过 new Function 创建出来的对象是函数对象， 函数对象的实例是普通对象。
Object 就是通过 new Function 创建出来的。
1
2
| console.log(typeof Object);
console.log(typeof Function);
|
什么是函数的原型(prototype)
原型(prototype)其实是函数对象的实例，前面说过.
在代码中的体现如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| function A(){}
A.prototype.walk = function() {
console.log("walk");
}
console.log(typeof A.prototype);
function B() {}
B.prototype = {
walk:function() {
console.log("walk");
}
}
new A().walk();
new B().walk();
|
其实函数对象A 和 函数对象 B 是拥有一样的功能的。
你其实就可以想象成他就是一个普通对象而已，确切的说是函数对象的一个实例。
怎么判断这个对象到底是 函数对象还是普通对象？
一个简单的判断如下：
1
2
3
4
|
console.log(typeof Object);
console.log(typeof new Object());
|
什么是proto?
proto 其实是函数对象的原型
举个例子解释这个是什么意思。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
console.log(Object.__proto__);
console.log(Object.__proto__ === Function.prototype);
console.log(Object.prototype);
console.log(Object.prototype === Object.__proto__);
console.log(Object.prototype.__proto__);
console.log(Function.prototype.__proto__);
console.log(Function.prototype)
let a = {};
console.log(a.prototype);
console.log(a.__proto__);
console.log(a.__proto__ === Object.prototype);
|
啊哈，上面的例子有点多呵，要想学习东西就自己多想，多看吧。
那么这些东西到底能干嘛？
proto 和 prototype 能用来干什么？
这里我理解就是为了继承吧。
举个例子吧。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| let a = {};
console.log(a.__proto__);
```
a 继承 Object 方法去哪里了 这个 __proto__ 内置属性可能是唯一可以追寻的 属性了。
所以我的理解就是 prototype 是个储存方法的容器，是函数对象储存方法的容器。
__proto__ 是连接 实例 和 函数对象之间的 桥梁
所以继承是靠 __proto__ 属性。
### 实现个继承的例子
验证一波上面的说法
```js
function A () {
console.log('A 对象构造');
}
A.prototype.walk = function() {
console.log('A walk');
}
A.hello = function() {
console.log('A static method hello method is called');
}
A.hello();
new A().walk();
function B() {
this.name = "hello";
console.log('B对象构造')
}
B.prototype.__proto__ = A.prototype;
B.hello = A.hello;
console.log(B.prototype.constructor === B);
new B().walk();
B.hello();
console.log(new B().name);
|
总结
不知不觉有些的有点长了，有些复杂的感念只有多打印，多想，才行。
描述的少了，就描述的不一定准确。哎～；
- 函数对象 => 类(class)
- 普通对象 => 类(class)的实例
- prototype => 类(class)的实例方法
- proto => 类(class) 与 类 之间继承的桥梁
- B 继承 A 通过 proto 将 A的实例方法注入到 B 中
- Object ， Function 函数对象
- 默认 prototype 中会被 js 注入一些默认的方法 constructor
解答疑惑
Object.prototype.proto
一切皆是对象，上面可以参考继承的例子 这就话就是 Object 继承与谁 那当然是 null；
它是一切对象的根本
哭笑不得这是啥东西
1
2
3
4
5
6
7
8
9
10
11
|
console.log(Function.prototype.__proto__ === Object.prototype)
console.log(Object.prototype.__proto__ === Function.prototype)
console.log(Object instanceof Function);
console.log(Function instanceof Object);
|
很奇怪， 所有东西继承 Object
Object 是通过 Function 创建出来的
Function 继承 Object
Function 是 Object 的实例
猜测内部实现
1
2
3
4
5
6
7
8
9
| let Object = new Function();
Object.prototype.__proto__ = null;
Object.prototype <= Function.prototype;
Function.prototype.__proto__ = Object.prototype;
|
至于 Function.prototype 为什么是 Function 这个可能有点特殊。 我暂时没有没有想到合理的解释，别的感觉，都能完全按这个理论解释清楚。
好了,下个月见.差点这个月没写文章.
啊哈.
