2011.01.11――― javascript new以及沿袭的理解 _JavaScript

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

建议读一读ECMAScript文档，它是JavaScript的实现标准

参照其中有关prototype chain(Types -> Object -> [[Get]])及construct(Function -> [[Construct]])部分的内容

3 楼 lipeng88213 2011-01-11

clue 写道

建议读一读ECMAScript文档，它是JavaScript的实现标准

参照其中有关prototype chain(Types -> Object -> [[Get]])及construct(Function -> [[Construct]])部分的内容

恩谢谢就怕没那个水平阅读。。。

4 楼 lipeng88213 2011-01-11

clue 写道

建议读一读ECMAScript文档，它是JavaScript的实现标准

参照其中有关prototype chain(Types -> Object -> [[Get]])及construct(Function -> [[Construct]])部分的内容

根据您说的我看了看但是不是太懂又写了一些您看下 http://lipeng88213.iteye.com/blog/868289

5 楼 kyfxbl 2011-01-17

为什么这个帖也有人隐藏？

6 楼 lipeng88213 2011-01-17

kyfxbl 写道

为什么这个帖也有人隐藏？

写的不好吧呵呵

7 楼 bigbird2444 2011-01-29

var p = new Person(123);

不赞同你的观点
我认为 Person 是继承于Object 同时又是Function的实例
p 是person的实例

不是先new了一个Object 又添加属性的
new是复制对象并添加原型地址到_proto_

关于prototype 你说两种情况其实是一种就是一个要最终应用的实例
这种情况不是没有prototype 而是没有赋值
如果你需要其作为引用类型创建新实例的时候可以添加原型

纯属个人观点