`
ylz4647
  • 浏览: 50272 次
  • 性别: 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

    使用 HTML、CSS 和 JavaScript 构建测验应用程序.zip

    使用 HTML、CSS 和 JavaScript 构建测验应用程序使用 HTML、CSS 和 JavaScript 构建测验应用程序视频播放列表https://www.youtube.com/playlist? list=PLB6wlEeCDJ5Yyh6P2N6Q_9JijB6v4UejF使用 HTML、CSS 和 ...

    了解如何使用 HTML、CSS 和 JavaScript 构建简单、响应迅速的网站.zip

    使用 HTML、CSS 或 JavaScript 进行构建都可以,本指南将解释 HTML、CSS 和 JavaScript 语法。本课程中的每个项目都是从头开始完成的,没有使用复制的代码。然后,我们将一起检查代码,以确保每个人都理解。该课程令...

    用Javascript搭建企业级web应用

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

    构建用户界面的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站点获得它,这里有官方发布。通常建议从主分支安装用于开发目的。 原因之一是...

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

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

    JavaScript权威指南第五版

    JavaScript程序员构建JavaScript应用程序时不可获缺的参考书,涉及到JavaScript在Web2.0中的应用

    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技术的不断...

    JavaScript_用于web的零配置构建工具.zip

    总的来说,"JavaScript_用于web的零配置构建工具.zip"包含的是Parcel这个强大的JavaScript构建工具,它为Web开发者提供了高效、易用的开发环境,使得他们能够更加专注于创新和提升应用的质量。无论你是初学者还是...

Global site tag (gtag.js) - Google Analytics