js的原型链

js原型

```
//构造函数
function Dog(name){
     this.name = name
     this.age = 1
}

//实例1

var example = new Dog()
example.name = "213"
example.age = 2
console.log(example.name,example.age)--> 213 2

//实例2

var test = new Dog()
console.log(test.name,test.age)--> undefined 1

//实例化之后的两个实例 example，test是独立的，相互之间互不影响。
//修改其中一个的age，不会影响到另一个。

//每一个实例对象，都有自己的属性和方法的副本。
//这不仅无法做到数据共享，也是极大的资源浪费。

//因此，原型应运而生。
//原型是构造函数的一个名为prototype的属性，也叫prototype对象。

//所有实例对象需要共享的属性和方法，都放在这个对象里面；
//那些不需要共享的属性和方法，就放在构造函数里面。
//实例对象一旦创建，将自动引用prototype对象的属性和方法。
//也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。

//现在把age放在原型中：

function Dog(name){
     this.name = name
}
Dog.prototype = {
    age: 1
}

var example = new Dog()
var test = new Dog()
Dog.prototype.age = 2

//修改了原型的属性值，对所有实例生效

console.log(example.age,test.age)--> 2 2
example.age = 3
console.log(example.age) --> 3
cosnole.log(test.age) --> 2

//由于所有的实例对象共享同一个prototype对象，
//那么从外界看起来，prototype对象就好像是实例对象的原型，
//而实例对象则好像"继承"了prototype对象一样。


```

没有原型的对象为数不多，Object.prototype就是其中之一，不继承任何属性。
其他的原型对象都是普通对象，都有原型。
所有的内置构造函数（以及大部分自定义的构造函数）都具有一个继承自Object.prototype的原型。

#### var A = function () {}
#### var B = new A();

这个代码说明了对象B是函数A生成的，函数和对象就是鸡和蛋的关系，
但是因为最终倒腾到根上的话，Object是祖师爷，所以函数属于对象。
JS里面所有的东西都是对象，对象就是属性的集合。

所有的对象上都有一个__proto__属性，
一个对象，首先你要知道它是谁new出来的，
对象的__proto__指向new它的函数的prototype属性；




```
var A = function () {};

var B = new A();

B.__proto__ === A.prototype;


```


那么函数A是谁new出来的？
函数也是对象，所以它也有__proto__属性
函数A是Function生成的，所有函数都是Function new出来的。



```
A.__proto__ === Function 
// true

```


下面是最核心的东西了：函数A的prototype是谁new出来的？？

A.prototype是一个对象，它有一个
```
__proto__
```
属性，它是由Object函数new出来的
所以
```
A.prototype.__proto__ === Object.prototype
```


Object.prototype是谁创建的??

```
Object.prototype.__proto__
// null 
```




so，这个链条是这样的

```
B.__proto__ === A.prototype
A.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null
```
```
__proto__
```
是串起来这个链条的一个隐形属性，有些浏览器是访问不到这个属性的
so，B可以调用A.prototype上的任何属性，同样可以调用Object.prototype上的任何属性

这就是原形链，这就是为什么B可以直接调用toString方法，因为toString是Object.prototype的方法

那么你可以在链条上的任何一个函数的prototype上添加东西，来测试一下B能不能访问

答案是可以的  比如 Object.prototype.me = "cute";
                   console.log(new Date().me)
                   // "cute";
                   console.log(toString().me)
                   // "cute"
                   
所以为了避免变量污染，实际用途中要避免修改原型链上的属性，而是在实例上做修改。

WEB前端学习交流群21 598399936