js中__proto__和prototype的区别和关系？这样好理解多了

原型的概念

真正理解什么是原型是学习原型理论的关键。很多人在此产生了混淆，没有真正理解，自然后续疑惑更多。

首先，我们明确原型是一个对象，其次，最重要的是，
Every function has a prototype property and it contains an object
这句话就是说，每个函数都有一个属性叫做原型，这个属性指向一个对象。
也就是说，原型是函数对象的属性，不是所有对象的属性，对象经过构造函数new出来，那么这个new出来的对象的构造函数有一个属性叫原型。明确这一点很重要。

The prototype property is a property that is available to you as soon as you define the function. Its initial value is an "empty" object.
每次你定义一个函数的时候，这个函数的原型属性也就被定义出来了，也就可以使用了，如果不对它进行显示赋值的话，那么它的初始值就是一个空的对象Object。
所以，综上我们知道我们讨论原型的时候，都是基于函数的，有了一个函数对象，就有了原型。切记这一点，讨论原型，不能脱离了函数，它是原型真正归属的地方， 原型只是函数的一个属性 ！

function foo(a,b) {

    return a+b;

}

foo.prototype

foo.constructor

chrome控制台测试结果

Paste_Image.png

我们可以看到函数foo的原型是空对象Object，所有函数的构造函数都是Function。

使用原型给对象添加方法和属性

不使用原型，使用构造函数给对象添加属性和方法的是通过this，像下面这样。

function Gadget(name, color) {

    this.name = name;

    this.color = color;

    this.whatAreYou = function() {

        return 'I am ' + this.color + '  ' + this.name;

    }

}

Gadget是一个构造函数，作为一个函数，它有一个属性，这个属性是原型，它指向一个对象，目前我们没有设置这个属性，所以它是一个空的对象。 Adding methods and properties to the prototype property of the constructor function is another way to add functionality to the objects this constructor produces 当我们有了原型之后，我们可以给构造函数的原型对象添加属性和方法来。像下面这样

Gadget.prototype.price = 100;

Gadget.prototype.rating = 3;

Gadget.prototype.getInfo = function() {

    return 'Rating: ' + this.rating +', price: ' + this.price;

}

给原型添加了属性和方法后，原型所指的对象也会更新

Paste_Image.png

使用原型对象的属性和方法

我们使用原型的对象和方法不会在直接在构造函数上使用，而是通过构造函数new出一个对象，那么new出来的对象就会有构造函数原型里的属性和方法。

Paste_Image.png

这里很容易造成误解，我们需要强调newtoy这个new出来的对象是没有原型的，原型只是函数对象的一个属性，newtoy是通过构造函数new出来的对象，所以他不是函数对象，也没有prototype属性，我们在chrome的控制台里自然也无法访问他的prototype属性。但我们可以通过构造函数访问。我们知道每个对象都有constructor属性，newtoy的constructor属性就指向Gadget，那么我们通过constructor可以访问到prototype。

Paste_Image.png

到这里，我们对为什么要通过constructor.protptype访问属性应该清楚了。（笔者第一次接触原型就没看懂这个），切记，原型是函数对象的属性，只有函数对象才有原型就容易理解了。

原型的实时性

这里特别需要提出，原型是实时的，意思就是原型对象的属性和方法会实时更新。其实很好理解，javascript中对象是通过引用传递的，原型对象只有一份，不是new出一个对象就复制一份，所以我们对原型的操作和更新，会影响到所有的对象。这就是原型对象的实时性。

Paste_Image.png

自身属性与原型属性

这里涉及到javascript是如何搜索属性和方法的，javascript会先在对象的自身属性里寻找，如果找到了就输出，如果在自身属性里没有找到，那么接着到构造函数的原型属性里去找，如果找到了就输出，如果没找到，就null。所以，如果碰到了自身属性和原型属性里有同名属性，那么根据javascript寻找属性的过程，显然，如果我们直接访问的话，会得到自身属性里面的值。

Paste_Image.png

我们加下来做一个小实验，寻找toString方法是谁的属性，一步步寻找

Paste_Image.png

通过实验我们可以发现，原来toString方法是object的原型对象的方法。

isPrototypeOf()

Object的原型里还有这样一个方法isPrototypeOf(),这个方法可以返回一个特定的对象是不是另一个对象的原型，实际这里不准确，因为我们知道只有函数对象有原型属性，普通对象通过构造函数new出来，自动继承了构造的函数原型的属性方法。但这个方法是可以直接判断，而不需要先取出constructor对象再访问prototype。看下面的例子：

function Human(name) {

    this.name = name;

}

var monkey = {

    hair:true,

    feeds:'banana',

}

Human.prototype = monkey;

var chi = new Human('chi');

神秘的proto链接

我们之前访问对象的原型，都要先取得构造函数然后访问prototype

chi.constructor.prototype;

newtoy.constructor.prototype;

这样是不是特别别扭，所以各个浏览器一般都会给出一个proto属性，前后分别有双下划线，对象的这个属性可以直接访问到构造函数的原型。这就很方便了。所以proto与prototype是有很大区别的。区别就在此。proto是实例对象用来直接访问构造函数的属性，prototype是函数对象的原型属性。

Paste_Image.png

chi.constructor.prototype == chi.__proto__

Paste_Image.png

显然现在已经很容易弄清楚了proto和prototype的区别了。

原型的陷阱

原型在使用的时候有一个陷阱： 在我们完全替换掉原型对象的时候，原型会失去实时性，同时原型的构造函数属性不可靠，不是理论上应该的值。 这个陷进说的是什么呢？好像不太明白举个例子我们就懂了

function Dog() {

    this.tail = true;

}

var benji = new Dog();

var rusty = new Dog();

Dog.prototype.say = function () {

    return 'Woof!';

};

我们进行测试：

Paste_Image.png

直到这里一切都是正常的接下来我们将原型对象整个替换掉

Dog.prototype = {

    paws: 4,

    hair: true

};

Paste_Image.png

通过测试我们发现，我们没法访问刚刚更新的原型对象，却能访问之前的原型对象，这说明没有实现实时性。

我们继续测试

Paste_Image.png

我们发现这时新建的对象可以访问更新后的原型，但是构造方法又不对了，本来constructor属性应该指向dog，结果却指向了Object。这就是javascript中的原型陷阱。

我们很容易解决这个问题，只要在更新原型对象后面，重新指定构造函数即可。

Dog.prototype.constructor = Dog;

Paste_Image.png

这样所有就按正常的运行了

所以我们切记在替换掉原型对象之后，切记重新设置constructor.prototype