javascript - this在原型继承中的指向的问题
ringa_lee
ringa_lee 2017-04-11 12:31:26
[JavaScript讨论组]
          function Person(name){
                 this.name=name;
          }
          Person.prototype.getName=function(){
                 return this.name;
          }
          function Son(age){
                 this.age=age;
          }
          Son.prototype=new Person("Nicholas");
          Son.prototype.getAge=function(){
                 return this.age;
          }
          var son1=new Son(5);
          alert(son1.getName());//有疑问

在调用getName()方法时,对getName()函数名的查找会沿着原型链进行查找,最后在 Person的
原型中找到getName()方法(也就是Person.prototype.getName=function(){return this.name}),
该方法中的this,依照:谁调用方法,this指向谁;
从son1.getName()可以看出,其中的this应该指向new Son(5)对象的引用,而return this.name
可以理解为:返回Son实例的对象name属性,但是在Son函数定义中(function Son(){...})并没有name属性,所以我认为应该返回为空才对,事实是最后返回了Nicholas??为啥呢?

还请大神解惑!!

ringa_lee
ringa_lee

ringa_lee

全部回复(6)
怪我咯

关于原型链你理解的没有错,son1通过原型链既有getAge(),又有getName()方法,当他调用这个getName()方法时,引用的是Person的没错,但是在Son对象的原型上其实也继承了这个方法,所以Son.prototype.getName(),一样也会是"Nicholas",因为传入了参数所以得到的也就是这个name,而再通过原型链,son1就得到了这个方法,所以最后返回"Nicholas"
希望对你有用!

高洛峰

你上面写的继承方式 属于类式继承

你想的也是正确的,的确为空 不过由于 this 的指向问题, 它在当前域查找不到时 会往原型(prototype)寻找,直到到 Object.prototype 若是还找不到 则返回 undefined ,所以在 Son.prototype=new Person("Nicholas"); this.name 被赋值了,所以 才会是 Nicholas

天蓬老师

一张图。。解释。。

原型的关系就是 首先你调用getName方法,实例上没有,向上查找,son1.__proto__.__proto__ ,也就是Person.ptotoype才有getName方法,
而getName 需要的name ,也是同样的原理但是只需要__proto__就能找到,这样不就组合起来。
不相信你可以在Son的构造函数里面写一个this.name='ewr',console 绝对是'ewr',原型链是一层一层的往上的

PHPz

要深刻理解原型链的含义。当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止,直至找到达原型链的顶部。实例son1本身没有name属性,自然回往原型链上找,直到找到为止。

黄舟

关键就是在于 Son.prototype=new Person("Nicholas")这一语句。

我们给son的原型一个变量存着,person = new Person("Nicholas"), 那么person有啥属性和方法?

person {
    name: "Nicholas",
    _proto_ : {...}
}
//Son.prototype = person

new Son(5)之后,创建的对象自己没有name,按着原型链找,找到了name,再往上找,找到了getName方法,完成

ringa_lee

首先这个Son构造函数是继承自Person,然后你用Son.prototype = new Person("Nicholas"),这就相当于是每一个son对象都有一个名字,而且都是"Nicholas",大概就这样

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号