在上一篇的理解原形中我们知道,每个实例可以访问其构造函数的原型对象的属性和方法,实例虽然可以访问其属性和方法,但是不能通过实例来修改原型对象的属性和方法。看下面的代码:
- <script type="text/javascript">
- function Student()
- {
- }
- //扩展原型
- Student.prototype.name = "张三";
- Student.prototype.score = 80;
- Student.prototype.sayName = function ()
- {
- alert('我的名字是:' + this.name);
- }
- //创建两个新实例对象
- var student1 = new Student();
- var student2 = new Student();
- student1.sayName();//我的名字是:张三
- student2.sayName();//我的名字是:张三
- //修改实例student1的name属性
- student1.name = "李四";
- student1.sayName();//我的名字是:李四
- student2.sayName();//我的名字是:张三
- </script>
上面的代码当我们修改student1的name属性时,并没有修改其构造函数的原型属性,其原因为实例可以访问其构造函数的原型属性和方法,是由于Javascript的作用域连向上查找机制,即先在自身查找,本身没有找到再在其指针指向的原型对象上查找。student1对象没有name属性,所以会到其指针指向的原型对象查找,就访问到name属性,当我们调用student1.name = "李四",根据JS的机制,对象自身没有name属性则会为对象添加name属性,如果自身存在则修改name属性的值,所以我们调用student1.name = "李四"时,则会为student1添加一个属性name,当下次访问时,按照查找机制,找到name='李四'就停止查找,对于student2呢还是以前的情况,本身没有,就会返回其[[Prototype]]指针指向的原型对象的name属性,即'张三'。其过程关系如下图:
为了更好的理解其过程,我们可以使用delete操作符删除其实例上的属性,那么实例应该可以访问到原型对象上的属性。看下面的代码:
- function Student()
- {
- }
- //扩展原型
- Student.prototype.name = "张三";
- Student.prototype.score = 80;
- Student.prototype.sayName = function ()
- {
- alert('我的名字是:' + this.name);
- }
- //创建两个新实例对象
- var student1 = new Student();
- var student2 = new Student();
- student1.sayName();//我的名字是:张三
- student2.sayName();//我的名字是:张三
- //修改实例student1的name属性
- student1.name = "李四";
- student1.sayName();//我的名字是:李四
- student2.sayName();//我的名字是:张三
- delete student1.name;
- student1.sayName();//我的名字是:张三
- student2.sayName();//我的名字是:张三
当实例和其指针指向的原型对象拥有相同对象时,则返回的会是实例本身属性的值(实例本身属性和方法优先),自动屏蔽其指针指向的原型的值。还有就是虽然实例可以访问到其指针指向的原型对象的值,但却无法修改其值。
管理员 世纪之光 : 2013年09月13日18:16:21 -49楼