js的原型链

Posted 噜噜修

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

 































































































































































以上是关于js的原型链的主要内容,如果未能解决你的问题,请参考以下文章

web前端:理解js原型链

理解js中是原型链? 如何实现继承?

如何更加简单的理解JS中的原型原型链概念

JS原型与原型链详细解释

js中原型和原型链理解

JS基础知识理解之一: 原型链