论坛首页 Web前端技术论坛

JS的prototype和__proto__

浏览 8027 次
精华帖 (0) :: 良好帖 (2) :: 新手帖 (1) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-06-24  
JS
终于弄明白了__proto__ 和 prototype。
阅读此文还有一个前提就是要很明确JS中new Function()的含义,不清楚的可以参考:http://rockyuse.iteye.com/blog/1426510

__proto__是JS内部使用寻找原型链的属性。
prototype是显示修改对象的原型的属性。

这两句很重要,以下我会详细说明,此文章就是为了说明上面的两句话的含义。

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。我再强调一遍__proto__是JS内部自己用来追溯用的,虽然FF把它的给暴露出来了,但是我们不能依赖于这个,浏览器各自的实现不一样,可见性不一样,甚至变量名称都不一样。

这样我们就很清楚了,我们使用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的继承。
第二个例子是一种错误的用法,希望引起大家的注意。
   发表时间:2012-06-25  
我前几天也在看这里,看的是JavaScript The Definitive Guide, 5th Edition.chm,其实你也可以用firebug去debug一下就可以很清楚地看到。
0 请登录后投票
   发表时间:2012-06-25  
这个倒是很少用,作者研究的很深入啊
0 请登录后投票
   发表时间:2012-06-26  
因为Programmer.prototype.__proto__ = Person.prototype;

Programmer自己的原型地址 改成 Person的了 当然找不到咯
0 请登录后投票
   发表时间:2012-06-26   最后修改:2012-06-26
楼主第二个例子其实错在了代码的顺序上。
你可以试试将Programmer.prototype = new Person();放在var Programmer = function(){}; 之后。
你会发现完美继承。
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;//②
//下面这句的new,直接就把你上面定义的都抹掉了。如果放到①之前,就完全没问题了。
Programmer.prototype = new Person();
var p = new Programmer();
0 请登录后投票
   发表时间:2012-06-26  
fwmlove 写道
楼主第二个例子其实错在了代码的顺序上。
你可以试试将Programmer.prototype = new Person();放在var Programmer = function(){}; 之后。
你会发现完美继承。
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;//②
//下面这句的new,直接就把你上面定义的都抹掉了。如果放到①之前,就完全没问题了。
Programmer.prototype = new Person();
var p = new Programmer();


那肯定没有问题啦。放到1之前,就等于是在对Person的操作了。
0 请登录后投票
   发表时间:2012-06-27   最后修改:2012-06-27
我认为的__proto__ 和 prototype也没有所谓什么区别的
__proto__存在于new function()产生的对象中
prototype存在于函数本身

function CPerson(){}
var p = new CPerson();
new Person()实际上产生了对象
{
   __proto__ : Person.prototype
}
0 请登录后投票
   发表时间:2012-06-27  
http://msdn.microsoft.com/zh-cn/magazine/cc163419.aspx
http://javascript.crockford.com/prototypal.html
这两篇文章不错的,楼主可以加深对javascript面向对象的理解
0 请登录后投票
   发表时间:2012-06-27  



 

顺便问下这是用什么工具截取到的?我用的最新版的FF和自动升级的firebug,什么都看不到,悲剧!!!
 

 

  • 大小: 78.3 KB
  • 大小: 26.7 KB
0 请登录后投票
   发表时间:2012-06-27  
FF点进去看啊,就在你刚刚那里,点那个function
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics