对JS prototype的理解

Posted 2020-10-27 fengzw

1.什么是prototype？

function F() {}
f1 = new F();
f2 = new F();

以上的代码，F()是一个构造函数，f1和f2是由这个构造函数产生的对象。

prototype是构造函数的一个属性，它的值就是由这个构造函数构造出来的对象的原型对象。（换句话来说，prototype既是构造函数的属性，也是由这个构造函数构造出来的对象的原型对象）

原型对象的属性和方法都会被“继承”，换句话来说，F.prototype的属性和方法都会被f1和f2“继承”。

 

 

2.什么是__proto__？它与prototype有什么区别？

__proto__是某个对象的属性，它指向这个对象的原型对象。从上面的例子分析，f1.__proto__和f2.__proto__就等同于F.prototype。

但是，我们一般不会直接访问__proto__这个属性，而是采用以下的方法去访问：

Object.getPrototypeOf(f1)
Object.getPrototypeOf(f2)

先用一张图总结一下上面的东西吧：

 

 

3.原型链

每个对象都有自己的原型对象，那一层层地，就形成了原型链。原型链的最上端，就是Object.prototype（注意这里的Object是一个构造函数啊），它没有原型对象（为null）。原型链后面的对象，能够使用前面的属性和方法（假如没有覆盖掉的话）。因此，有着相同原型对象的两个对象，就可以使用与原型对象相同的方法和属性了，这也是使用prototype的好处了。

 

 

4.constructor

prototype对象有一个constructor属性，F.prototype.constructor的值就是F本身。用文字描述，一个函数对象的原型对象的constructor属性指向这个函数本身。

利用这一点，我们可以进行判断一个对象是否由某个构造函数产生的。（利用这个例子来理解constructor属性吧）

function A(){};
var a = new A();
console.log(a.constructor===A) //true

分析一下以上的代码，a原本是没有constructor这个属性的，但是它的原型对象有，所以它“继承”了下来，自己也能使用这个属性。即a.constructor，其实也等于a.__proto__.constructor和A.prototype.constructor，而A.prototype.constructor的值，就是A，因此返回true了。

关于constructor的作用还有很多，这里不详述了。

 

 

5.总结

这篇文章只是谈谈我对prototype这东西的理解，供日后回看，因此写得很不详尽。更为详细的分析，包括它的作用，更多的分析，请看下面的网页：

http://www.jb51.net/article/91826.htm

假如不理解prototype和__proto__，下面的网页会更好地帮助理解：

http://blog.csdn.net/ligang2585116/article/details/53522741