JS原型从0到深理解

JS原型与原型链

原型

1.什么是原型？究竟是个啥玩意。我giao，查来查去发现，原型其实是原型对象的简称。

我们创建的每一个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象（这个对象就是该函数的原型对象）。
打个比方，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说：constructor属性的值是函数A )。

我们来简单测试一下：

 <script>
    function fnA(){
    }
    console.log(fnA.prototype);
    </script>

我们创建一个空的函数fnA,并打印一下它的prototype.

呦西给给，是不是验证了我们所说的，这个prototytpe是在函数创建时自动生成的同时指向原型函数，它里面存在constructor属性，同时它又指向fnA。就是下面这幅图这样的指向关系。

2.显示原型和隐式原型
在了解了基本的什么是原型以后，我们再来看一下什么是显示原型和隐式原型。只需要分别理解以下几句话就可以了。
第一句话：每一个函数function都有一个prototyp，即显示原型，默认指向原型函数。这个与我们上面的没什么区别
第二句话：每个实例对象都有一个__proto__（注意是每个下划线是两个_构成）,可称为隐式原型，切记是实例化的对象。

 <script>
    function fnA(){  
    }
    console.log(fnA.__proto__);
    </script>

不难看出，如果没有实例化对象，这个属性是不存在的。

<script>
    function fnA(){  
    }
    var fn=new fnA();
    console.log(fn.__proto__);
</script>

而一旦实例化以后，实例化对象则会具有这个属性。
第三句话：对象的隐式原型的值为其对应的构造函数显示原型的值

 <script>
    function fnA(){  
    }
    var fn=new fnA();
    console.log(fn.__proto__===fnA.prototype);
    </script>

呦西，没有毛病。

最后最后，我们通过一段代码，去深入分析一下，内存中的具体操作

看懂这个图片，你的原型应该就理解的比较深入了，如果有看不到，欢迎关注我，一起交流。（随时在线）