剖析javscript中类、prototype及new实例之间的关系
2011-12-21 18:12
176 查看
js的对象是一个包含属性、方法的 key/value 的Object,构造对象就是向一个Object中添加属性和方法,因此我们可以样来构造对象
var obj = {}
obj.title = "obj";
obj.getTitle = function(){ return this.title; }
显然这样构造对象的效率不高,难以维护,通过实例化“类”获取对象将更加优雅,js对类的支持与C++/Java等机制不同,js支持原型机制来完成类定义,其过程简单描述是将prototype定义的属性、方法复制到新对象中,并执行构造函数,直观描述如下:
1) 定义一个类,如ClassA = function(){}; ClassA就是一个对象,但是这个对象由js关联到一个原型对象prototype,并且将prototype的属性constructor默认设置为ClassA;
2) 向ClassA的原型对象prototype添加属性和方法
3) new 操作创建了一个新的对象,并把prototype对象所有的属性、方法复制到新对象,并执ClassA 函数完成构造
总结:
js的类-对象机制三个对象参与了过程,一个是Class,一个是关联到Class对象的原型对象prototype,最后是被new出来的Class的实例。
Class是一个函数(函数也是对象),其作用是构造函数,在new的时候将被执行,默认被赋值给prototype.constructor
prototype对象是一个模版,描述了将要添加给实例的属性和方法
被new出来的实例,一方面赋值了prototype中除开constructor所有的属性,以及在Class函数(构造函数)执行时添加的属性,并通过构造函数完成初始赋值。
js的new核心操作就是通过复制原型对象(prototype)到新实例完成class到object的过程,这也是js实现继承的核心思路。
测试代码如下,红色代码用于显示测试结果的:
运行的结果如下:
---------下面是class属性---
title=ClassA
getTitle=function () {
return this.title;
}
---------下面是ClassA.prototype属性---
name=_name_
getTitle=function () {
return this.title;
}
constructor=function () {
this.title = "ClassA Instance!";
}
---------下面是ClassA实例classObj的属性方法---
title=ClassA Instance!
name=_name_
getTitle=function () {
return this.title;
}
constructor=function () {
this.title = "ClassA Instance!";
}
---------下面是ClassA.getTitle的值---
ClassA.getTitle=ClassA
---------下面是classObj.getTitle的值---
classObj.getTitle=ClassA Instance!
var obj = {}
obj.title = "obj";
obj.getTitle = function(){ return this.title; }
显然这样构造对象的效率不高,难以维护,通过实例化“类”获取对象将更加优雅,js对类的支持与C++/Java等机制不同,js支持原型机制来完成类定义,其过程简单描述是将prototype定义的属性、方法复制到新对象中,并执行构造函数,直观描述如下:
1) 定义一个类,如ClassA = function(){}; ClassA就是一个对象,但是这个对象由js关联到一个原型对象prototype,并且将prototype的属性constructor默认设置为ClassA;
2) 向ClassA的原型对象prototype添加属性和方法
3) new 操作创建了一个新的对象,并把prototype对象所有的属性、方法复制到新对象,并执ClassA 函数完成构造
总结:
js的类-对象机制三个对象参与了过程,一个是Class,一个是关联到Class对象的原型对象prototype,最后是被new出来的Class的实例。
Class是一个函数(函数也是对象),其作用是构造函数,在new的时候将被执行,默认被赋值给prototype.constructor
prototype对象是一个模版,描述了将要添加给实例的属性和方法
被new出来的实例,一方面赋值了prototype中除开constructor所有的属性,以及在Class函数(构造函数)执行时添加的属性,并通过构造函数完成初始赋值。
js的new核心操作就是通过复制原型对象(prototype)到新实例完成class到object的过程,这也是js实现继承的核心思路。
测试代码如下,红色代码用于显示测试结果的:
(function(){ ClassA = function(){ this.title = "ClassA Instance!"; } ClassA.title = "ClassA"; //这个属性属于对象ClassA ClassA.getTitle = function(){ //这个方法属于对象ClassA return this.title; //属于ClassA的东西,与new出来的ClassA的实例没有一毛钱关系 } //为ClassA关联的prototype对象赋值,构造原型,这个原型将被复制到新对象; ClassA.prototype ={ getTitle:function(){ return this.title } } var allName = "---------下面是class属性---\n"; for (pname in ClassA){ allName += pname + "=" + ClassA[pname] + "\n" } allName += "---------下面是prototype属性---\n"; for (pname in ClassA.prototype){ allName += pname + "=" + ClassA.prototype[pname] + "\n" } var classObj = new ClassA(); allName += "---------下面是ClassA实例classObj的属性方法---\n"; for (pname in classObj){ allName += pname + "=" + classObj[pname] + "\n" } allName += "---------下面是ClassA.prototype.getTitle的值---\n"; allName += "ClassA.prototype.getTitle="+ClassA.prototype.getTitle(); allName += "\n---------下面是ClassA.getTitle的值---\n"; allName += "ClassA.getTitle="+ClassA.getTitle(); allName += "---------下面是classObj.getTitle的值---\n"; allName += "下面是classObj.getTitle="+classObj.getTitle(); alert(allName); })()
运行的结果如下:
---------下面是class属性---
title=ClassA
getTitle=function () {
return this.title;
}
---------下面是ClassA.prototype属性---
name=_name_
getTitle=function () {
return this.title;
}
constructor=function () {
this.title = "ClassA Instance!";
}
---------下面是ClassA实例classObj的属性方法---
title=ClassA Instance!
name=_name_
getTitle=function () {
return this.title;
}
constructor=function () {
this.title = "ClassA Instance!";
}
---------下面是ClassA.getTitle的值---
ClassA.getTitle=ClassA
---------下面是classObj.getTitle的值---
classObj.getTitle=ClassA Instance!
相关文章推荐
- 1:总结并剖析malloc/free和new/delete之间关系和差异。 2:剖析new/delete、new[]/delete[]到底做了些什么事情。 3:实现NEW_ARRAY/DE
- 总结并剖析malloc/free和new/delete之间关系和差异
- prototype详解及prototype、new之间的关系
- 基础概念:Oracle数据库、实例、用户、表空间、表之间的关系
- C++头文件和类实例的大小之间的关系
- 成员变量、实例变量、属性之间的关系
- Oracle - 数据库的实例、表空间、用户、表之间关系
- 确定实例与原型之间的关系
- 三、Oracle - 数据库的实例、表空间、用户、表之间关系
- [转]Oracle - 数据库的实例、表空间、用户、表之间关系
- Python中类、实例、方法之间的关系
- Oracle - 数据库的实例、表空间、用户、表之间关系
- 基础概念:Oracle数据库、实例、用户、表空间、表之间的关系
- Oracle数据库实例、用户、表、表空间之间关系
- Oracle - 数据库的实例、表空间、用户、表之间关系
- Python的实例方法,类方法,静态方法之间的区别及调用关系
- Python的实例方法,类方法,静态方法之间的区别及调用关系
- Oracle - 数据库的实例、表空间、用户、表之间关系
- __proto__、prototype、constructor 之间的关系
- Oracle - 数据库的实例、表空间、用户、表之间关系