javascript9.0(定义对象)

最新推荐文章于 2024-09-25 14:00:00 发布
最新推荐文章于 2024-09-25 14:00:00 发布
阅读量95 收藏
点赞数
分类专栏： 前台开发 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gedoua/article/details/84006376
版权
[color=red][size=medium]JavaScript中定义对象的几种方式（JavaScript中没有类的概念，只有对象）：
1） 基于已有对象扩充其属性和方法(就是给属性和方法赋值)：[/size][/color] 
<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>


[color=red][size=medium]2）工厂方式[/size][/color] 
<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>

[color=red]带参数的构造方法：[/color] 
<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>

[color=red]让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数对象。[/color] 
<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>


[color=red][size=medium]在方法里面创建一个对象，然后返回这个对象，这就是使用的工厂方法。[/size][/color]


[color=red][size=medium]3） 构造函数方式[/size][/color] 
<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>


[color=red]可以在构造对象时传递参数[/color] 

<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>


[color=red][size=medium]4）原型（“prototype”）方式[/size][/color] 

<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>


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

[color=red]下面代码打印结果就可以看出。password是不同的，但是username数组结果是一样的。[/color] 
<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>

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

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

<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>


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

<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>
gedoua
关注
专栏目录
Map和Set
LH552315的博客
04-11 207
JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。 但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。 为了解决这个问题，最新的ES6规范引入了新的数据类型Map。 Map Map是一组键值对的结构，具有极快的查找速度。 举个例子，假设要根据...
正则
weixin_34314962的博客
06-19 100
正课:1. 正则:　指定匹配位置2. ***String API: 替换: 衍生: 删除和格式化 切割3. ***RegExp对象1. 正则: 指定匹配位置: 三个位置: 字符串的开头 ^ 字符串的结尾 $ 比如: 开头的空字符: ^\s+ 结尾的空字符: \s+$ ...
javascript（9）
weixin_30511107的博客
10-09 120
js中访问函数 p1.abc() p1["abc"]; js中基于对象 == js面向对象 转载于:https://www.cnblogs.com/liaoxiaolao/p/9762591.html
JavaScript9：函数
menglong0329的博客
05-12 281
JavaScript函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试实例</title> <script> function myFunction() { alert("Hello World!"); } </script> </head> .
JS9.0-9.2
wafer_biscuit的博客
03-11 107
就剩轮播图了。。。加油吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
JavaScript浏览器对象之定时器
上善若泪
05-06 1009
目录 1 setTimeout() 2 setInterval() 3 clearTimeout()，clearInterval() 4 运行机制 5 setTimeout(f,0) 5.1 含义 5.2 应用 6 正常任务与微任务 JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它...
axure 9.0小程序.zip
03-09
.rplib文件是Axure的库文件，它存储了一系列预定义的组件、动态面板、样式和交互，方便用户在设计过程中快速复用。在Axure RP 9.0中，你可以导入这样的库来丰富你的设计元素，提高设计效率。例如，这个.rplib可能...
javascript 获取浏览器版本
10-24
以下是一个通过JavaScript编写的函数，它定义了一个`BrowserUtil`原型，包含了`getBrowserVersion`方法，用于返回当前浏览器的名称和版本号。 ```javascript function BrowserUtil() {} BrowserUtil.prototype = { ...
skwd9-04-ajs：SEDC代码学院@Skopje 9.0第四主题“高级JS开发”学习材料的源代码存储库
02-16
1. **闭包**：JavaScript中的闭包是一种强大的特性，它允许函数访问并操作其词法作用域内的变量，即使该函数在其外部定义。闭包常用于数据封装、模块化和创建私有变量。 2. **原型链**：JavaScript对象基于原型，...
Tomcat9.0使用WebSocket实现点对点之间的聊天Demo
06-10
客户端的JavaScript代码通常使用`WebSocket`对象来创建连接，并处理消息的发送和接收。以下是一个简单的示例： ```javascript var socket = new WebSocket("ws://yourserver.com/chat"); socket.onopen = function...
JavaScript
pengjianglilive的专栏
08-02 881
为什么学习 JavaScript? JavaScript 是 web 开发人员必须学习的 3 门语言中的一门： HTML定义了网页的内容 CSS描述了网页的布局 JavaScript控制了网页的行为 阅读本教程前，您需要了解的知识： 阅读本教程，您需要有以下基础： HTML 教程 CSS 教程 JavaScript简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 ...
【前端】Node.js 9.0来了_有哪些不一样的体验？
yunqishequ1的博客
11-15 927
点击有惊喜 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。  Node.js Foundation前不久发布了Node.js JavaScript运行时的第9个版本，与此同时Node.js 8也会被长期支持使用
JavaScript事件的绑定与传播
m0_55132979的博客
06-25 205
（一）JavaScript事件的绑定 使用对象， 事件 =函数形式绑定事件 它只能同时为同一个元素绑定同一个事件一次 不能绑定多次，如果绑定多次，后面的会覆盖掉前面的 1.addEventListener() 通过这个方法也可以为元素绑定响应函数 参数： 1.事件的字符串，不加on 2.回调函数，当事件触发时该函数会被调用 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false 使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数 这样当...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4355
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 307
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
vue上传预览CAD文件
只会写bug
09-24 513
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
最新发布
m0_59480939的博客
09-25 184
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 348
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
jQuery对象与DOM对象转换详解
它鼓励将JavaScript代码与HTML内容分离，让开发者可以通过选择器定义ID或类，而非在HTML中嵌入大量JavaScript代码。 在jQuery中，DOM对象可以通过包装函数`$()`转换成jQuery对象。例如，如果你有一个DOM对象，如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值