JS的prototype和__proto__-优快云博客

本文深入探讨了JavaScript中__proto__和prototype的区别及其作用。通过具体示例解释了如何使用这两种机制来实现对象间的继承，并指出了一些常见的使用误区。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

终于弄明白了__proto__ 和 prototype。
[color=blue]阅读此文还有一个前提就是要很明确JS中new Function()的含义，不清楚的可以参考：http://rockyuse.iteye.com/blog/1426510[/color]

[color=red]__proto__是JS内部使用寻找原型链的属性。
prototype是显示修改对象的原型的属性。[/color]
这两句很重要，以下我会详细说明，此文章就是为了说明上面的两句话的含义。

var Programmer = function(){};  
Programmer.prototype.WriteCode = function() {
    return "programmer writes code";
};
Programmer.prototype.Salary = 50000;
var p = new Programmer();

我们来看一下p, p是一个引用指向programmer对象。我们给programmer对象的prototype定义了一个属性Salary和一个方法WriteCode();
显然我们直接定义了Programmer.prototype属性和方法。
当我们执行p.Salary的时候，会先从p的this范围内查找，没有找到这时候会沿着原型链向上追溯，可是具体怎么向上的呢，那么就是使用了programmer.__proto__来找到programmer的prototype。[color=violet]我再强调一遍__proto__是JS内部自己用来追溯用的，虽然FF把它的给暴露出来了，但是我们不能依赖于这个，浏览器各自的实现不一样，可见性不一样，甚至变量名称都不一样。[/color]

这样我们就很清楚了，我们使用prototype修改我们自定义类的原型的属性和方法。
JS内部使用__proto__来追溯自己的原型。

再来看一个例子：

var Person = function(){};
Person.prototype.ask = function(){
    return "haha............";
}
Person.prototype.Say = function() {
    return "Person say";
}
Person.prototype.Salary = 50000;

var Programmer = function(){};
Programmer.prototype.WriteCode = function() {
    return "programmer writes code";
};
Programmer.prototype.Salary = 500;
Programmer.prototype = new Person();
var p = new Programmer();

执行p.WriteCode(), 会是什么结果？ //programmer writes code
NO, 应该是" ... has no method 'WriteCode' "

虽然我们定义了programmer.prototype.WriteCode, 但是在15行我们将programmer.prototype 设置为 Person了。person及它的prototype都没有WriteCode方法，所以“has no method 'WriteCode' ”。

使用这种方式便实现了JS的继承。
第二个例子是一种错误的用法，希望引起大家的注意。