简明现代魔法 -> JavaScript -> JavaScript创建对象的内部机制

JavaScript创建对象的内部机制

2010-08-05

Javascript中可以使用new操作符来创建一个对象,那么系统是如何使用new操作符来创建对象的呢?我们来看下流程:

  1. 首先需要定义一个类。
  2. 使用new操作符紧跟你所定义的函数来创建一个新的类的实例。
  3. 一旦Javascript编译器碰到了new操作符,它就创建了一个空的实例变量,将类中prototype的所有属性和方法复制到这个实例中,并将成员函数中所有的this指向这个新创建的实例。
  4. 接下来,执行紧跟在new操作符后面的那个函数。
  5. 当你执行完这个函数时,如果你试图对一个不存在的属性进行赋值,Javascript编译器将自动为你在这个范围内新创建这个属性。
  6. 函数执行完毕后,将这个初始化完成的实例返回。

也就说:

JavaScript实际上在使用new时,执行了下列三个过程:

  1. 创建空对象。
  2. 将类的prototype中的属性和方法复制到实例中。
  3. 将第一步创建的空对象做为类的参数调用类的构造函数。

模拟new

描述:创建一个类person,然后创建两个变量p1和p,比较两个变量最终生成的结果。

<script type="text/javascript">
function person(name,age)
{
	this.name=name;
	this.age=age;
}
        
person.prototype = {
	ShowName:function(){
		alert(this.name);
	},
	ShowAge:function(){
		alert(this.age);
	}
}
        
var p1= new person("ss",20);
        
var p = {};
for(var v in person.prototype)
{
	p[v]=person.prototype[v];
}        
        
person.call(p,"www",'29');
        
p.ShowName();
</script>

重载

描述:定义类person.person类构造函数中有个ShowName方法,person.prototype上有个ShowName方法。实例究竟调用的是哪个方法呢?

答:调用的person类内部的ShowName方法。

定义类person如下:

function person(name,age)
{
	this.name=name;
	this.age=age;
	this.ShowName=function(){
		alert("这是构造函数中的ShowName:"+this.name);
	}
}
        
person.prototype={
	ShowName:function(){
		alert("这是Prototype中的ShowName:"+this.name);
	},
	ShowAge:function(){
		alert(this.age);
	}
}

实例化过程:

var p = {};
        
for(var v in person.prototype){
	p[v]=person.prototype[v];
}        
        
//执行完for语句,p已经具备了ShowName方法.可取消下述注释,测试结果
//执行输出:
//这是Prototype中的ShowName:undefined
//p.ShowName();
        
//因为person函数中存在下列代码:
//this.ShowName={}
//所以执行完此函数后
//变量p的ShowName变量被重新指向新的函数.原来的指向无处可寻
person.call(p,"www",29);
        
//输出:
//这是这是构造函数中的ShowName:www
p.ShowName();
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们