JS中的prototype、proto与constructor，原型和原型链

女爷i 2021-08-19 19:14 458阅读 0赞

### **理解原型的几个关键点：** ###

1、所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）;

2、所有的**引用类型（对象）都有一个’\_ \_ proto\_ \_'属性(也叫隐式原型，它是一个普通的对象)**，指向原型对象；

3、所有的函数都有一个’prototype’属性(这也叫显式原型，它也**是一个普通的对象，该对象就是函数的原型对象**，对象中**包含所有实例对象可以共享的属性和方法**)。**’prototype’属性是函数独有的**，任何函数在创建的时候，其实会默认同时创建该函数的prototype对象;

4、所有引用类型，它的’\_ \_ proto\_ \_'属性指向它的构造函数的’prototype’属性（所以  函数.\_ \_ proto\_ \_ ===function.prototype）;

5、当试图得到一个对象的属性时，如果这个对象本身不存在这个属性，那么就会去它的’\_ \_ proto\_ \_'属性(也就是它的构造函数的’prototype’属性)中去寻找。

6、**`constructor`属性****也是对象才拥有的，指向该对象的构造函数**。函数创建的对象.\_\_proto\_\_ === 该函数.prototype，该函数.prototype.constructor===该函数本身，故通过函数创建的对象即使自己没有constructor属性，它也能通过\_\_proto\_\_找到对应的constructor，所以任何对象最终都可以找到其构造函数（null如果当成对象的话，将null除外）

### **原型：** ###

先来看一个**原型**的例子。

//这是一个构造函数
    		function Foo(name,age){
    			this.name=name;
    			this.age=age;
    		}
    		/*根据要点3，所有的函数都有一个prototype属性，这个属性是一个对象
    		再根据要点1，所有的对象可以自由扩展属性
    		于是就有了以下写法*/
    		Foo.prototype={
    			// prototype对象里面又有其他的属性
    			showName:function(){
    				console.log("I'm "+this.name);//this是什么要看执行的时候谁调用了这个函数
    			},
    			showAge:function(){
    				console.log("And I'm "+this.age);//this是什么要看执行的时候谁调用了这个函数
    			}
    		}
    		var fn=new Foo('小明',19)
    		/*当试图得到一个对象的属性时，如果这个对象本身不存在这个属性，那么就会去它
    		构造函数的'prototype'属性中去找*/
    		fn.showName(); //I'm 小明
    		fn.showAge(); //And I'm 19

这就是原型，很好理解。那为什么要使用原型呢？

试想如果我们要通过Foo()来创建**很多很多个**对象，如果我们是这样子写的话：

那么我们创建出来的每一个对象，里面都有showName和showAge方法，这样就会占用很多的资源。  
而通过原型来实现的话，只需要在构造函数里面给属性赋值，而把方法写在Foo.prototype属性(这个属性是唯一的)里面。这样每个对象都可以使用prototype属性里面的showName、showAge方法，并且节省了不少的资源。

--------------------

### 原型链 ###

理解了原型，那么原型链就更好理解了。

\#\#\#\#\#下面这段话可以帮助理解原型链  
根据要点5，当试图得到一个对象的属性时，如果这个对象本身不存在这个属性，那么就会去它构造函数的’prototype’属性中去寻找。那又因为’prototype’属性是一个对象，所以它也有一个’\_ \_ proto\_ \_'属性。

// 构造函数
    		function Foo(name,age){
    		 	this.name=name;
    		 	this.age=age;
    		}
    		Object.prototype.toString=function(){
    			//this是什么要看执行的时候谁调用了这个函数。
    			console.log("I'm "+this.name+" And I'm "+this.age);
    		}
    		var fn=new Foo('小明',19);
    		fn.toString(); //I'm 小明 And I'm 19
    		console.log(fn.toString===Foo.prototype.__proto__.toString); //true
    		
    		console.log(fn.__proto__ ===Foo.prototype)//true
    		console.log(Foo.prototype.__proto__===Object.prototype)//true
    		console.log(Object.prototype.__proto__===null)//true

是不是觉得有点奇怪？我们来分析一下。

![70][]

首先，fn的构造函数是Foo()。所以：  
**fn.\_ \_ proto \_ \_=== Foo.prototype**  
又因为Foo.prototype是一个普通的对象，它的构造函数是Object，所以：  
**Foo.prototype.\_ \_ proto \_ \_=== Object.prototype**  
通过上面的代码，我们知道这个toString()方法是在Object.prototype里面的，当调用这个对象的本身并不存在的方法时，它会一层一层地往上去找，一直到null为止。

所以当fn调用toString()时，JS发现fn中没有这个方法，于是它就去Foo.prototype中去找，发现还是没有这个方法，然后就去Object.prototype中去找，找到了，就调用Object.prototype中的toString()方法。

**\_\_proto\_\_属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的\_\_proto\_\_属性所指向的那个对象（父对象）里找，一直找，直到\_\_proto\_\_属性的终点null，再往上找就相当于在null上取值，会报错。通过\_\_proto\_\_属性将对象连接起来的这条链路即我们所谓的原型链。**

另外，在使用原型的时候，一般推荐将需要扩展的方法写在构造函数的prototype属性中，避免写在\_ \_ proto \_ \_属性里面。

> **总结：**
> 
>  *  当所有的实例对象都需要共享属性和方法时，通过原型来实现就是将属性方法放在实例对象的构造函数的prototype属性中（该属性值就是原型对象，包含共享属性和方法）；
>  *    访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着\_\_proto\_\_这条链向上找，这就是原型链。
>  *  根据原型链可以确定继承关系。由于所有的对象的原型链都会找到Object.prototype，因此所有的对象都会有Object.prototype的方法。这就是所谓的“继承”。
>  *  对象引用类型通过instanceof来判断。

--------------------

https://blog.csdn.net/qq\_36996271/article/details/82527256

https://blog.csdn.net/cc18868876837/article/details/81211729

[70]: /images/20210726/38cb1c26fc884df3a753874d8af9f5f1.png