js中的proto和prototype

r囧r小猫 2022-06-02 07:10 188阅读 0赞

这两天想看看 jquery的源代码。可是一开始就懵逼了。什么是js的原型链呢?于是在网上寻找答案，发现还挺多的。于是就来这里总结一番。

想弄清原型链其实就是弄清楚\_\_proto\_\_和prototype的关系。

**任何对象都有一个\_\_proto\_\_属性**  
**任何方法都有一个prototype属性和\_\_proto\_\_属性，prototype也是一个对象 ，所以其中也有一个\_\_\_proto\_\_**

我们先来看prototype属性

var fn=function(){ 
    
        };
        console.log(fn.prototype);

![这里写图片描述][format_png]

可以看见prototype中有两个属性constructor和\_\_proto\_\_。constructor指向函数自己。同时可以看见prototype中也有\_\_proto\_\_。因为prototype也是一个对象。

prototype是拿来干什么的呢。它的作用很像java中的静态属性/方法。其中的对象可以给所有实例使用，如

var fn =function (){ 
    
        };
        fn.prototype.name='wen';
        fn.prototype.age='18';
        
        var obj1=new fn();
        var obj2=new fn();
    
    
        console.log(obj1.name);
        console.log(obj2.age);

输出

wen
    18

那么\_\_proto\_\_是什么呢？像要弄清这点我们想要知道js中创建对象的一些细节。js创建对象我们有如下三种方法

1 通过构造函数创建对象

var obj=new Object();

2通过Object.create创建对象

var obj1={ };
    var obj2= Object.create(obj1);

3 通过花括号创建，如

var obj={ };

其实上述三种方法都是通过构造函数创建的。而第三种其实调用的时Object()方法创建的。所以我们可以怎么认为

**js中的对象都是new +构造函数创建的。而这个构造函数就是我们定义的函数。**

而所有的对象中都有\_\_proto\_\_属性，这个属性就是一个指针，指向构造函数中的prototype属性。

我们可以做一个简单的验证

var obj1={ };
        console.log(obj1.__proto__===Object.prototype);

//输出

true

通过上面的分析，我们知道js中声明的方法其实就是一个类，它的构造函数就是自己。我们可以向其中的prototype塞入各种对象。这些对象会被所有实例继承。而所有的实例都有一个\_\_proto\_\_指针指向着构造函数的prototype属性。

tips：

遵循ECMAScript标准，someObject.\[\[Prototype\]\] 符号是用于指向 someObject的原型。从 ECMAScript 6 开始，\[\[Prototype\]\] 可以用Object.getPrototypeOf()和Object.setPrototypeOf()访问器来访问。这个等同于 JavaScript 的非标准但许多浏览器实现的属性 \_\_proto\_\_。

\-------------------------------------分割线----------------------------------------------------  
下面是深入的分析。

# 非函数对象的创建 #

非函数对象只有\_\_proto\_\_,它指向构造函数的prototype属性。我们知道prototype的属性中也有\_\_proto\_\_。那么该\_\_proto\_\_指向谁呢。回忆下一我之前说的所有对象的\_\_proto\_\_指向创建它们的构造函数的prototype。那么谁创建的prototype的呢？。那当然是Object构造函数了。  
所以函数中的prototype属性中的\_\_proto\_\_指向的是Object构造函数的prototype属性。但是问题又来了，这个prototype中也有\_\_proto\_\_，这不死循环了。很高兴的告诉你这个prototype中\_\_proto\_\_等于null的。所以不会死循环的，除非你把它改了。

如下图  
![这里写图片描述][format_png 1]

**图片是我之前存下来的，忘了出自哪里了。如果侵害了别人的别人的著作。希望告诉我，我会主动下架的。**

我们来验证一下

var obj1={ };
        
    
        console.log(obj1.__proto__.__proto__===null);

//输出

true

好我们接着思考

# 函数对象的创建 #

函数对象有prototype和\_\_proto\_\_属性。prototype中的\_\_proto\_\_指向的是Object构造函数，这就不用多说了。我们来看\_\_proto\_\_。

函数对象的\_\_proto\_\_指向构造函数的prototype。而函数的构造函数是Function构造函数。接着  
Function的prototype中的\_\_proto\_\_指向谁呢？前面已经说了指向Object构造函数。那么Function函数的\_\_proto\_\_指向谁呢。答案是指向自己，因为Function函数也是一个函数。来给大家上一张神图。

![这里写图片描述][format_png 2]

接着我们拿出点佐证出来。

var fn =function (){ 
    
        };
        //fn.prototype.__proto__->Object.prototype
        //Object.prototype.__proto__===null?
        console.log(fn.prototype.__proto__.__proto__===null);
        //fn.__proto__->Function.prototype
        //Function.prototype.__proto__->Object.prototype
        //Object.prototype.__proto__===null
        console.log(fn.__proto__.__proto__.__proto__===null);

从上图你可以看见其实Object构造函数的\_\_proto\_\_  
也是指向Function构造函数的。

# 总结 #

通过上面的分析，我们可以发现js代码的设计是非常巧妙的。

总结一下，当你需要理清js中的\_\_proto\_\_和prototype的链接顺序，你只需记住。

1.  \_\_proto\_\_ 指向构造函数的prototype属性
2.  函数对象有\_\_proto\_\_和prototype属性
3.  非函数对象只有\_\_proto\_\_属性
4.  prototype中有\_\_proto\_\_属性。且是Object构造函数创建的
5.  函数对象\_\_proto\_\_指向它的创建者的prototype属性及Function构造函数的prototype属性  
    2
6.  Function构造函数\_\_proto\_\_指向它自己prototype属性
7.  Object对象的prototype中的\_\_proto\_\_指向null

如果您仔细看了这篇文章并且思考过，以上这几点刚好可以线程完美的闭环

[format_png]: /images/20220602/91deb315e75d4e809cd6c55e52271389.png
[format_png 1]: /images/20220602/d25fbebd1b4b459884c62de913826267.png
[format_png 2]: /images/20220602/c6145244303442f4b0ead4afb09a1bb2.png