`
ylz4647
  • 浏览: 49814 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

Javascript 类的构建

阅读更多

本文转载于:http://ttitfly.iteye.com/blog/193663

 

 

javascript里构建类主要有4种方式
1.构造方式定义类
2.原型方式定义类
3.构造和原型结合方式创建类
4.动态的原型方式

各有优缺点,具体如下
1.构造方式定义类,优点:多个实例对象不共享类的属性值,缺点:每个实例对象都会产生出一个函数say

Java代码 复制代码
  1. //构造方式定义类,优点:多个实例对象不共享类的属性值,缺点:每个实例对象都会产生出一个函数say   
  2. function User(){   
  3.     this.username = "zhangsan";//this.不能丢   
  4.        
  5.     this.say = function(){//this.不能丢   
  6.         alert("username:" + this.username );//this.不能丢   
  7.     }   
  8.     //下面注释的这种写法不对   
  9. //  function say(){   
  10. //      alert("username:" + this.username );   
  11. //  }   
  12. }   
  13.   
  14. var user = new User();   
  15. user.username = "lisi";   
  16. user.say();//username:lisi   
  17.   
  18. var user1 = new User();   
  19. user1.say();//username:zhangsan,不受user对象的影响  
//构造方式定义类,优点:多个实例对象不共享类的属性值,缺点:每个实例对象都会产生出一个函数say
function User(){
	this.username = "zhangsan";//this.不能丢
	
	this.say = function(){//this.不能丢
		alert("username:" + this.username );//this.不能丢
	}
	//下面注释的这种写法不对
//	function say(){
//		alert("username:" + this.username );
//	}
}

var user = new User();
user.username = "lisi";
user.say();//username:lisi

var user1 = new User();
user1.say();//username:zhangsan,不受user对象的影响



//多个实例对象不共享类的属性值:

Java代码 复制代码
  1. //多个实例对象不共享类的属性值,如下:   
  2. function User(){   
  3.     this.username = new Array();//this.不能丢   
  4.        
  5.     this.say = function(){//this.不能丢   
  6.         alert("username:" + this.username );//this.不能丢   
  7.     }   
  8. }   
  9.   
  10. var user = new User();   
  11. user.username.push("zhangsan");   
  12. user.say();//username:zhangsan   
  13.   
  14. var user1 = new User();   
  15. user1.say();//user1的username为空,不为zhangsan,因为user1的属性值不受user影响  
//多个实例对象不共享类的属性值,如下:
function User(){
	this.username = new Array();//this.不能丢
	
	this.say = function(){//this.不能丢
		alert("username:" + this.username );//this.不能丢
	}
}

var user = new User();
user.username.push("zhangsan");
user.say();//username:zhangsan

var user1 = new User();
user1.say();//user1的username为空,不为zhangsan,因为user1的属性值不受user影响



2.原型方式定义类,缺点:类的属性值如果是引用类型的(非Number和String类型),则多个实例对象共享

Java代码 复制代码
  1. //原型方式定义类,缺点:类的属性值如果是引用类型的(非Number和String类型),则多个实例对象共享   
  2. function User(){   
  3. }   
  4. User.prototype.username = "zhangsan";   
  5. User.prototype.say = function(){   
  6.     alert("username: " + this.username );   
  7. }   
  8.   
  9. var user = new User();   
  10. user.username = "lisi";   
  11. user.say();//username:lisi   
  12.   
  13. var user1 = new User();   
  14. user1.say();//username:zhangsan  
//原型方式定义类,缺点:类的属性值如果是引用类型的(非Number和String类型),则多个实例对象共享
function User(){
}
User.prototype.username = "zhangsan";
User.prototype.say = function(){
	alert("username: " + this.username );
}

var user = new User();
user.username = "lisi";
user.say();//username:lisi

var user1 = new User();
user1.say();//username:zhangsan



类的属性值如果是引用类型的(非Number和String类型),则多个实例对象共享:

Java代码 复制代码
  1. //类的属性值如果是引用类型的(非Number和String类型),则多个实例对象共享,如下   
  2. function User(){   
  3. }   
  4. User.prototype.username = new Array();   
  5. User.prototype.say = function(){   
  6.     alert("username: " + this.username );   
  7. }   
  8.   
  9. var user = new User();   
  10. user.username.push("zhangsan") ;   
  11. user.say();//username:zhangsan   
  12.   
  13. var user1 = new User();   
  14. user1.say();//username:zhangsan,因为user1属性也会受到user的影响,user1和user指向同一引用,即共享同一属性  
//类的属性值如果是引用类型的(非Number和String类型),则多个实例对象共享,如下
function User(){
}
User.prototype.username = new Array();
User.prototype.say = function(){
	alert("username: " + this.username );
}

var user = new User();
user.username.push("zhangsan") ;
user.say();//username:zhangsan

var user1 = new User();
user1.say();//username:zhangsan,因为user1属性也会受到user的影响,user1和user指向同一引用,即共享同一属性



3.构造和原型结合方式创建类:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享;缺点:属性和方法分开定义不是太好。

Java代码 复制代码
  1. //构造和原型结合方式创建类:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享;缺点:属性和方法分开定义不是太好。   
  2. function User(){   
  3.     this.username = "zhangsan";   
  4. }   
  5. User.prototype.say = function(){   
  6.     alert("username: " + this.username );   
  7. }   
  8. var user = new User();   
  9. alert(user.username);  
//构造和原型结合方式创建类:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享;缺点:属性和方法分开定义不是太好。
function User(){
	this.username = "zhangsan";
}
User.prototype.say = function(){
	alert("username: " + this.username );
}
var user = new User();
alert(user.username);



4.动态的原型方式:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的

Java代码 复制代码
  1. ////动态的原型方式:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的   
  2.   
  3. function User(){   
  4.     this.username = "zhangsan";   
  5.        
  6.     if(typeof User.flag == "undefined"){   
  7.         alert("execute...");   
  8.         User.prototype.say = function(){   
  9.             alert("username: " + this.username );   
  10.         }   
  11.            
  12.         User.flag = true;   
  13.     }   
  14. }   
  15.   
  16. var user1 = new User();//execute...   
  17. var user2 = new User();//不会打印出execute...,则说明方法只创建了一次,即方法只会产生一个   
  18. user1.say();//username  
////动态的原型方式:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的

function User(){
	this.username = "zhangsan";
	
	if(typeof User.flag == "undefined"){
		alert("execute...");
		User.prototype.say = function(){
			alert("username: " + this.username );
		}
		
		User.flag = true;
	}
}

var user1 = new User();//execute...
var user2 = new User();//不会打印出execute...,则说明方法只创建了一次,即方法只会产生一个
user1.say();//username



总结:
构造方式定义类:缺点:类里的方法,每个实例对象都会产生一个,导致产生大量方法;优点:所有实例对象都单独拥有一份类里的属性,即属性不共享
原型方法定义类:缺点:所有实例对象都共同拥有一份类里的属性,即属性共享。优点:类的方法只会产生一个,不会产生大量方法
构造和原型结合方式创建类:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享;缺点:属性和方法分开定义不是太好。
动态的原型方式:优点:类的方法只会产生一个,不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的

 

 

 

分享到:
评论

相关推荐

    JavaScript构建Web和ArcGIS Server应用实战书籍配套代码

    JavaScript构建Web和ArcGIS Server应用实战书籍配套代码涵盖了利用JavaScript这一强大的前端脚本语言与ArcGIS Server进行交互,创建高效、交互性强的地理信息系统(GIS)应用的核心技术。本资源包含了一系列示例代码...

    JavaScript构建Web和ArcGIS Server应用实战

    JavaScript构建Web和ArcGIS Server应用实战

    《JavaScript构建Web和ArcGIS Server应用实战》源代码

    《JavaScript构建Web和ArcGIS Server应用实战》是一本深度探讨如何使用JavaScript开发Web GIS应用程序的专业书籍。这本书籍的源代码提供了丰富的示例和实践项目,帮助读者深入理解JavaScript在Web GIS开发中的应用。...

    JavaScript API构建WebApps实践

    随着互联网技术的发展,GIS在Web端的应用变得更加广泛,而ArcGIS for JavaScript API作为一套成熟的产品,为开发者在Web端构建GIS功能的应用提供了强大的支持。 首先,我们来看一下ArcGIS for JavaScript API。它是...

    高性能JavaScript和构建高性能WEB站点PDF电子书

    《高性能JavaScript和构建高性能WEB站点》是一本深入探讨如何优化JavaScript和Web站点性能的专业书籍。在当前互联网技术日新月异的时代,JavaScript作为Web开发的核心语言,其性能优化对于提升用户体验和降低服务器...

    JavaScript_构建您的第一个移动应用程序.zip

    JavaScript,作为一种广泛应用于Web开发的脚本语言,已经成为构建现代互联网应用不可或缺的一部分。尤其是在移动应用程序开发领域,JavaScript凭借其灵活性和强大的库支持,使得开发者能够创建功能丰富的跨平台应用...

    由浅到深了解JavaScript类

    JavaScript 类是编程语言中用于构建面向对象模型的关键概念,它允许我们通过类来模拟现实世界中的对象和结构。在JavaScript中,类的概念并不是一开始就存在的,早期版本的JavaScript使用构造函数和原型来实现面向...

    以岗位需求为导向的Javascript课程构建.pdf

    以岗位需求为导向的Javascript课程构建.pdf

    用 JSEclipse 构建 JavaScript 应用程序

    本教程将介绍 JSEclipse 工具,该工具是 Eclipse 的插件并提供诸如代码完成和模板之类的功能。还将介绍 Firebug,Firebug 将提供真正的调试功能。本教程假定您十分精通 JavaScript 编程。如果需要重温 JavaScript ...

    从零开始构建JavaScript技术栈中文版

    6. **ES6及以后的特性**:包括箭头函数、模板字符串、解构赋值、类(class)、模块(import/export)、迭代器与for...of循环、生成器(generator)等,这些特性大大提升了JavaScript的可读性和代码效率。 7. **前端...

    用Javascript搭建企业级web应用

    本文将以Javascript作为主要技术栈,探讨如何使用Javascript来构建这样的企业级应用,以及其带来的优势。 在提及Javascript企业级开发前,我们首先要明确企业级Web应用的特征。它们通常具备以下特点: 1. 分布式:...

    javascript写类方式之六

    在JavaScript中,有多种方式可以实现类(Class)的概念,这是面向对象编程的一个重要组成部分。本文将深入探讨“javascript写类方式之六”,并结合标签“源码”和“工具”,解析其中的原理与实践。 在JavaScript ...

    构建用户界面的JavaScript库ReactJS.zip

    React.js(React)是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。 Facebook开源了React,这是该公司用于构建反应式图形界面的JavaScript库,已经应用于构建Instagram网站及Facebook部分网站。最近出现...

    JSnoX, 纯JavaScript中构建反应DOM的简洁表达式的方法.zip

    JSnoX, 纯JavaScript中构建反应DOM的简洁表达式的方法 JSnoX享受 React.js,但不是JSX的粉丝? JSnoX为你提供了一个简洁的,表达式的方法,以纯JavaScript构建ReactElement树。与React.js v0.12和 above响应本机示例

    jbrowse, 用JavaScript和HTML5构建的现代基因组浏览器.zip

    jbrowse, 用JavaScript和HTML5构建的现代基因组浏览器 安装 JBrowseJBrowse的用户应该从 http://jbrowse.org/install 站点的主JBrowse站点获得它,这里有官方发布。通常建议从主分支安装用于开发目的。 原因之一是...

    cpp-基于GraalVM构建的一个JavaScript编程语言的高性能实现

    《基于GraalVM构建的JavaScript高性能实现:深入解析C++与编译器技术》 JavaScript,作为一种广泛应用于Web开发的动态脚本语言,一直以来都在寻求更高的执行效率。Oracle Labs的一项创新工作,就是通过GraalVM来...

    使用纯JavaScript构建前端Web应用Building Front-End Web Apps with Plain JavaScript

    有关不使用任何第三方库或框架而使用纯JavaScript构建前端Web应用程序的增量式深入教程,您可以自己进行理论基础和基于示例的学习。

    ArcGIS API for JavaScript 4.22版 API+SDK

    ArcGIS API for JavaScript用于构建高性能的WebGIS应用程序,同时结合现代网络技术和强大的地理空间功能,利用ArcGIS Online、ArcGIS Server发布的地图服务以及网络上的其他服务内容,使用户在web端能够进行应用程序...

    构建网络世界的基石:HTML、CSS和JavaScript的角色

    HTML、CSS和JavaScript是构建现代Web应用不可或缺的技术。HTML提供了内容的结构,CSS赋予了视觉样式,而JavaScript则带来了交互性。三者的结合使得开发者能够创造出功能丰富、用户友好的Web界面。随着Web技术的不断...

Global site tag (gtag.js) - Google Analytics