2011.01.11——— javascript new以及沿袭的理解-JavaSript-爱易网页

2011.01.11——— javascript new以及沿袭的理解

日期：2014-05-16　浏览次数：20487 次

2011.01.11——— javascript new以及继承的理解
2011.01.11——— javascript new以及继承的理解

一、new

function Person(age){
	this.age = age;
}

var p = new Person(123);

alert(p.age);//123

详细说一下这个过程：

首先 new 创建了一个空的对象也就是：

var o = new Object();

然后对象o被this关键字引用，来给新创建的对象o赋予相应的属性：

o.age = age;

o.age = 123;

最后返回对象o

return o;

var p = o;

二、关于继承

<html>
<head>
<script type="text/javascript">
function Person(){
	this.name = "123";
	this.sex = "f"
}

function XiaoDu(){
	this.name = "xiaodu";
	this.age = 22;
}


XiaoDu.prototype = new Person();


var o = new XiaoDu();

alert(o.name);
alert(XiaoDu.prototype.name);

alert(o.age);
alert(XiaoDu.prototype.age);

alert(o.sex);
alert(XiaoDu.prototype.sex);

XiaoDu.prototype.age = 33;
alert(o.age);


o.sex = "m";
alert(o.sex);
alert(XiaoDu.prototype.sex);

var o2 = new XiaoDu();
alert(o2.sex);
</script>
</head>
<body>
</body>
</html>

结果：

xiaodu
123
22
undefined
f
f
22
m
f
f

看上面的代码

我们一步一步来分析：

1、XiaoDu.prototype = new Person();

根据上面的关于new的理解流程应该是：

XiaoDu.prototype = {constructor: this};
var poo = new Object();
poo.name = "123"
poo.sex = "f";
XiaoDu.prototype = poo;

2、var o = new XiaoDu();

这里注意一句话：任何对象都有prototype属性，这个我个人感觉是针对通过构造函数生成的对象的，如new XX() 和 var o = {...},
这个两种是没有prototype属性的。

追加一句：虽然 new XXX()没有prototype属性，但是o有一个constructor属性，指向XiaoDu.prototype，如1的操作，则
o.constructor = function Person(){
this.name = "123";
this.sex = "f"
}
如果没有继承，则指向自己

var xoo = new Object();
xoo.name = "xiaodu";
xoo.age = 22;

3、
alert(o.name);
alert(XiaoDu.prototype.name);

注意：实际上是对属性的调用是沿着prototype的链来查找的，先找实例本身，再找其构造函数的prototype 依次向上直到Object.prototype

所以先查找对象o的本身有name属性所以就输出"xiaodu"，但是对象实例o并没有覆盖构造函数的name值依然是可以访问的

4、
alert(o.age);
alert(XiaoDu.prototype.age);

因为XiaoDu.prototype已经不是指向本身了而指向poo了，并且poo并没有age属性，所以构造函数有的属性对象实例有的属性，

XiaoDu.prototype不一定有了

5、
alert(o.sex);
alert(XiaoDu.prototype.sex);

这个就是o.sex是没有的所以向上从其构造函数的prototype里查找

6、
XiaoDu.prototype.age = 33;
alert(o.age);

也就是

poo.age = 33;

又给对象增加了一个属性而已，
但是因为对象实例o已经有age属性了所以直接输出；

7、
o.sex = "m";
alert(o.sex);
alert(XiaoDu.prototype.sex);

var o2 = new XiaoDu();
alert(o2.sex);

这个仅仅是给对象实例加了一个属性 sex，从而查找的时候不从构造函数的prototype里面找了

但是一个对象实例的属性改变并不会影响其他实例的属性值

根据 clue 的指点看了一下他说的又写了一点个人感觉忘了发到论坛了下面是连接

http://lipeng88213.iteye.com/blog/868289

以上是自己的粗浅理解有不对的地方欢迎斧正

1 楼 lipeng88213 2011-01-11

我总觉得自己理解的不是很对。。怎么没有人来说说啊。。。

2 楼 clue 2011-01-11

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

2011.01.11——— javascript new以及沿袭的理解

相关资料更多>

推荐阅读更多>