`

javascript9.0(定义对象)

 
阅读更多
JavaScript中定义对象的几种方式（JavaScript中没有类的概念，只有对象）：
1） 基于已有对象扩充其属性和方法(就是给属性和方法赋值)： 
<html>
	<head>
		<script type="text/javascript">
			var object = new Object();
			object.name = "zhangsan";
			object.sayName = function(name) {
				this.name = name;
				alert(name);
			}

			object.sayName("lisi");
		</script>
	</head>
	<body>
	</body>
</html>


2）工厂方式 
<html>
	<head>
		<script type="text/javascript">
			function createObject() {
				var object = new Object();
				object.username = "zhangsan";
				object.password = "111";
				
				object.get = function() {
					alert(this.username + "," + this.password);
				}
				
				return object;
			}
			
			var object1 = createObject();
			var object2 = createObject();
			
			object1.get();
		</script>
	</head>
	<body>
	</body>
</html>

带参数的构造方法： 
<html>
	<head>
		<script type="text/javascript">
			function createObject(username, password) {
				var object = new Object();
				object.username = username;
				object.password = password;
				
				object.get = function() {
					alert(this.username + "," + this.password);
				}
				
				return object;
			}
			
			var object1 = createObject("zhangsan", "111");
			var object2 = createObject("lisi", "222");
			
			object1.get();
			object2.get();
		</script>
	</head>
	<body>
	</body>
</html>

让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数对象。 
<html>
	<head>
		<script type="text/javascript">
			function get() {
				alert(this.username + "," + this.password);
			}
			function createObject(username, password) {
				var object = new Object();
				object.username = username;
				object.password = password;
				
				object.get = get;
				
				return object;
			}
			
			var object1 = createObject("zhangsan", "12");
			var object2 = createObject("lisi", "23");
			
			object1.get();
			object2.get();
		</script>
	</head>
	<body>
	</body>
</html>


在方法里面创建一个对象，然后返回这个对象，这就是使用的工厂方法。


3） 构造函数方式 
<html>
	<head>
		<script type="text/javascript">
			function Person() {
				//在执行第一行代码前，js引擎会为我们生成一个对象
				this.username = "zhangsan";
				this.password = "123";
				
				this.getInfo = function() {
					alert(this.username + "," + this.password);
				}
				
				//此处有一个隐藏的return语句
			}
			
			var person = new Person();
			person.getInfo();
		</script>
	</head>
	<body>
	</body>
</html>


可以在构造对象时传递参数 

<html>
	<head>
		<script type="text/javascript">
			function Person(username, password) {
				//在执行第一行代码前，js引擎会为我们生成一个对象
				this.username = username;
				this.password = password;
				
				this.getInfo = function() {
					alert(this.username + "," + this.password);
				}
				
				//此处有一个隐藏的return语句
			}
			
			var person = new Person("zhangsan", "2222");
			person.getInfo();
		</script>
	</head>
	<body>
	</body>
</html>


4）原型（“prototype”）方式 

<html>
	<head>
		<script type="text/javascript">
			function Person() {
			}
			
			Person.prototype.username = "zhangsan";
			Person.prototype.password = "123";
			
			Person.prototype.getInfo = function() {
				alert(this.username + "," + this.password);
			}
			
			var person = new Person();
			var person2 = new Person();
			
			person.username = "lisi";
			person.getInfo();
			person2.getInfo();
		</script>
	</head>
	<body>
	</body>
</html>


个人理解，原型模式就是变量开始的时候是共享的，由于username是String类型的，所以当username改变值的时候，它们的getInfo打印的结果是不同的，如果username是一个数组，那么情况就不同了，数组里面虽然放入东西了，但是它们还是指向同一个数组。

下面代码打印结果就可以看出。password是不同的，但是username数组结果是一样的。 
<html>
	<head>
		<script type="text/javascript">
			function Person() {
			}
			
			Person.prototype.username = new Array();
			Person.prototype.password = "123";
			
			Person.prototype.getInfo = function() {
				alert(this.username + "," + this.password);
			}
			
			var person = new Person();
			var person2 = new Person();
			
			person.username.push("zhangsan");
			person.username.push("lisi");
			person.password = "456";
			person.getInfo();
			person2.getInfo();
		</script>
	</head>
	<body>
	</body>
</html>

如果使用原型方式对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反应到其他对象当中。

单纯使用原型方式定义对象无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性值。
使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各个对象间共享同一个方法 

<html>
	<head>
		<script type="text/javascript">
			function Person() {
				this.username = new Array();
				this.password = "123";
			}
			
			Person.prototype.getInfo = function() {
				alert(this.username + "," + this.password);
			}
			
			var person = new Person();
			var person2 = new Person();
			
			person.username.push("zhangsan");
			person.username.push("lisi");
			person.password = "456";
			person.getInfo();
			person2.getInfo();
		</script>
	</head>
	<body>
	</body>
</html>


5） 动态原型方式：在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。 

<html>
	<head>
		<script type="text/javascript">
			function Person() {
				this.username = "zhangsan";
				this.password = "123";
				
				if(typeof Person.flag == "undefined") {
					alert("invoked");
					
					Person.prototype.getInfo = function() {
						alert(this.username + "," + this.password);
					}
					
					Person.flag = true;
				}
			}
		
			
			var person = new Person();
			var person2 = new Person();
			
			person.getInfo();
			person2.getInfo();
		</script>
	</head>
	<body>
	</body>
</html>
分享到：
| javascript8.0(数组排序)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    axure 9.0小程序.zip

    .rplib文件是Axure的库文件，它存储了一系列预定义的组件、动态面板、样式和交互，方便用户在设计过程中快速复用。在Axure RP 9.0中，你可以导入这样的库来丰富你的设计元素，提高设计效率。例如，这个.rplib可能...

    Tomcat9.0使用WebSocket实现点对点之间的聊天Demo

    客户端的JavaScript代码通常使用`WebSocket`对象来创建连接，并处理消息的发送和接收。以下是一个简单的示例： ```javascript var socket = new WebSocket("ws://yourserver.com/chat"); socket.onopen = function...

    Google V8学习手记，月javascript写服务器端是多少人的梦醒呀，Google v8让javascript和php一样

    这段代码定义了一个名为 `MyClass` 的 C++ 类，并将其作为 JavaScript 类暴露给 JavaScript，然后在 JavaScript 中创建该类的实例并调用其方法。 ##### 2.6 封装完整的 C++ 类到 JavaScript 中，供 JavaScript 实例...

    PowerBuilder_9.0程序设计一周通5

    4. **强大的脚本语言**：PowerScript是PowerBuilder的主要编程语言，具有类似C语言的语法结构，支持面向对象编程(OOP)。 5. **Web应用开发**：PowerBuilder 9.0增加了对Web应用的支持，可以通过Web服务的方式部署...

    pb解析与生成json

    - 提供的源码示例可能展示了如何在PB9.0环境中定义消息类型，生成相应的ProtoBuf编译代码，并实现将这些消息序列化为JSON或从JSON反序列化。 5. **实际应用**： - 开发者可以利用提供的源码学习如何在自己的项目...

    毕业设计项目,基于Java语言，Tomcat9.0，MySQL8.0考研机构信息管理系统.zip

    该项目是一个毕业设计，主要采用了Java编程语言，配合Tomcat 9.0服务器和MySQL 8.0数据库，构建了一个考研机构信息管理系统。这个系统旨在帮助考研培训机构管理学生信息、课程资料、考试安排等核心业务，提升运营...

    js 二阶段诸葛韩寒的啊大苏打

    - 对象类型：JavaScript中一切皆对象，包括数组、函数、日期等复杂数据结构。 - Symbol类型（ES6新增）：创建独一无二的标识符。 1.2 变量命名规则与最佳实践 变量名应遵循以下规则： - 可包含字母、数字、下划线...

    jQuery教程

    - **定义**: jQuery对象是通过jQuery库封装DOM对象而生成的一种新类型对象，能够使用jQuery提供的各种方法进行操作。 - **示例**: ```javascript // 获取ID为test的元素内的HTML内容 $("#test").html(); // ...

    浅谈jQuery的应用.pdf

    4. jQuery常用语法：介绍了jQuery的多种元素引用方式，包括通过id、class、元素名、层级关系以及DOM或XPath条件等，并强调返回的对象是jQuery对象（集合对象），不能直接调用DOM定义的方法。 5. jQuery对象与DOM...

    pb解析json

    而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 在描述中提到，作者花费了大量时间理解JSON格式，并将其转化为可以直接由pb解析的对象。这表明...

    jquery傻瓜教程

    jQuery 是一个广泛使用的 JavaScript 库，它简化了对网页文档对象模型（DOM）的操作，处理事件，创建动画，以及实现Ajax交互。对于初学者来说，理解jQuery的基本概念和常用功能至关重要。 1. **jQuery的核心特性** ...

    JQuery课件

    - **定义**: JQuery 对象是通过 JQuery 包装 DOM 对象后生成的。 - **特性**: JQuery 对象可以使用 JQuery 提供的所有方法。 - **示例**: `$("#test").html()` 表示获取 ID 为 `test` 的元素中的 HTML 内容。 - **...

    jquery 技巧总结

    返回的结果是一个jQuery对象，可以调用jQuery定义的方法进行操作，但不能直接使用DOM API。 ##### 2. jQuery对象与DOM对象的转换 jQuery对象与原生DOM对象之间的转换非常重要。通常情况下，可以直接通过`$...

    JScript中文帮助

    JScript的发展伴随着Internet Explorer的版本升级，从JScript 5.0到JScript .NET，再到现代的JScript 9.0，其特性逐渐丰富，同时也面临与其他JavaScript实现（如Chrome的V8引擎或Firefox的SpiderMonkey）的兼容性...

    jQuery的基础教程文档 web开发 前端

    3. 支持CSS1~CSS3定义的属性和选择器，基本的xPath技术，以及跨浏览器兼容性，支持IE6.0+、Firefox 1.5+、Safari 2.0+和Opera 9.0+。 4. 提供了丰富插件库，可以轻松扩展功能，如表单验证、Tab导航、拖放效果、表格...

    c sharp英文版参考书

    9. **动态类型（Dynamic）**：动态类型允许在运行时确定变量的类型，常用于与非.NET平台交互，如JavaScript对象。 10. **异构集合（Array、List、Dictionary,TValue&gt;等）**：C#提供了多种数据结构，如数组、列表、...

    access在线管理

    例如，用户可以创建、修改或删除数据表，设置字段类型和属性，以及定义关系。同时，可以通过查询来筛选、排序和组合数据，以便进行数据分析。此外，窗体和报表则用于数据输入和展示，它们可以定制化以满足各种需求，...

    PB解析和生成JSON

    这通常通过JSON解析库来完成，例如JavaScript的`JSON.parse()`或Python的`json.loads()`。描述中提到的“是否成功”，意味着在解析过程中需要确保没有语法错误，如缺少引号、括号不匹配等，否则解析会失败。 4. **...

    jQuery中文API帮助文档

    它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）...

Magicbox
Global site tag (gtag.js) - Google Analytics