chrome - javascript中为什么不能用原型对象继承属性？

问题描述

问 题

《JavaScript面向对象精要》第五章的总结上说不能用原型对象继承属性，于是测试了下，越测试越混乱，后来看了https://segmentfault.com/a/11...这篇文章，又看了http://www.ruanyifeng.com/blo...这个，评论里有个小例子，尝试根据需要改了下，在谷歌浏览器控制台直接输入的代码如下：

function A(var1){
  this.var1 = var1;
}
A.prototype = {
   var1:1
}
var b=new A();
b.var1 = 2;
var c = new A();
console.log(b.var1); //输出2
console.log(c.var1); //输出undefined

function A(){
 //do noting
}
A.prototype = {
  var1:1
}
var b=new A();
b.var1 = 2;
var c = new A();
console.log(b.var1); //输出2
console.log(c.var1); //输出1

想问这两个结果为什么输出不同？还有var1不是原型对象上加的属性么？第二段程序能输出c.var1为1不是说明还是能通过原型对象继承属性么？

解决方案

给你说一下实例化对象的过程中发生了什么；

例如 var a = new A;
1.创造了一个空对象{}；
2.A中的this指向{}；
3.{}.__proto__ = A.prototype;
4.执行A中的例如 this.属性=***；
5.a = {}(前面创造的对象)

顺序可能有点乱，但大体流程是对的。

---

补充：
关于你的第二段代码
console.log(b.var1); 这输出的是b自身的var1属性值，因为你前面有修改操作。
console.log(c.var1); 这输出的是构造函数原型中的var属性值。
再举个例子说明读取和写入的不同。
比如做了a.b.c = 1 ;会先去a自身和原型链上找b属性，无则报错，有则在b属性本身找是否有c属性，无则添加。
而console.log(a.b.c);会先去a的原型链上找b属性，无则报错，有则在b的本身和原型链上找是否有c属性，无则undefined;

---

可以等看完原型链的相关知识和构造函数部分。等全看完了你应该会理解的更好一些。

这篇关于chrome - javascript中为什么不能用原型对象继承属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！