HTML---JAVAscript对向和原型链

最新推荐文章于 2024-11-15 18:20:22 发布

北染星辰

最新推荐文章于 2024-11-15 18:20:22 发布

阅读量957

点赞数 22

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/zhoutong2323/article/details/135599753

版权

本文介绍了JavaScript对象的基础概念，包括内置、宿主、自定义、原生和传统对象，以及如何使用对象字面量和构造函数创建对象。重点讲解了原型链的作用，包括属性和方法继承、原型链查找、扩展对象以及原型继承的示例。

摘要由CSDN通过智能技术生成

前言

一.JavaSceipt对象概述

JavaScript是一种基于对象的编程语言，每个值都是一个对象。JavaScript中的对象是一种无序的键值对集合，其中每个键都是唯一的。

JavaScript的对象可以包含属性和方法。属性是对象的特性，可以通过点语法或方括号语法访问。方法是对象的行为，是一种可以在对象上调用的函数。

JavaSceipt对象分类

内置对象（Built-in Objects）：内置对象是JavaScript提供的一些预定义对象，比如Array、String、Math等。这些对象可以直接使用，无需额外的操作。
宿主对象（Host Objects）：宿主对象是由JavaScript的宿主环境（比如浏览器、Node.js等）提供的对象。这些对象通常是用来访问宿主环境特定功能的，比如浏览器提供的window、document对象。
自定义对象（Custom Objects）：自定义对象是由开发者自己定义的对象。开发者可以使用JavaScript的构造函数或者类语法来创建自定义对象。
原生对象（Native Objects）：原生对象是指那些由JavaScript语言本身提供的对象，比如Object、Function、Date等。
传统对象（Traditional Objects）：传统对象是指那些以键值对形式存储数据的对象，比如普通对象、数组、Map、Set等。
迭代器对象（Iterator Objects）：迭代器对象是那些实现了迭代器接口的对象，可以通过next()方法迭代访问其中的元素。比如数组的迭代器对象可以通过for...of循环来遍历数组的元素。
原型对象（Prototype Objects）：原型对象是用来创建其他对象的模板对象，通过原型链的机制，可以使原型对象中的属性和方法被其他对象共享。

二.Javascript对象详解

自定义对象

自定义对象是由开发者自己定义的对象。开发者可以使用JavaScript的构造函数或者类语法来创建自定义对象。

使用对象字面量创建对象

语法：

<script>
		var flower = new Object();
</script>

演示案例

<body>
		<script>
			var flower = new Object();
			//对创建的自定义对象属性进行赋值
			flower.name="长春花";
			flower.genera="夹竹桃科";
			flower.area="非洲";
			flower.uses="观赏或用药等";
			//创建专属于自定义对象的方法
			flower.showNmae = function(){
				window.alert(this.name);
			}
			//调用自定义对象的方法
			flower.showNmae();
		</script>
</body>

使用构造函数创建对象

原理：创建一个构造函数用于临时存放对应函数的属性值，参数等，在使用new关键字调用时将新函数的属性值赋值给构造函数，再根据代码调用对应的属性值。

语法:

<script type="text/javascript">
			function Flower(自定义参数){}
</script>

演示案例

<body>
		<script type="text/javascript">
			//构造函数
			function Flower(name,genera,area,uses){
				//创建自定义对象属性并赋值
				this.name=name;
				this.genera=genera;
				this.area=area;
				this.uses=uses;
				//创建自定义对象的方法并指向下方一个函数
				this.showNmae=showNmae;
			}
			function showNmae(){
				window.alert(this.name);
			}
			//创建自定义函数
			var flower1 = new Flower("长春花","夹竹桃科","非洲","观赏或药用等")
			//调用自定义函数
			flower1.showNmae();
		</script>
</body>

常用关键字
instanof	判断左边的类型是否为右边的关键字

window.alert(flower1 instanceof Object);
window.alert(flower1 instanceof Flower);

三.原型链

JavaScript中的原型链是一种机制，它允许对象通过继承属性和方法。每个JavaScript对象都有一个原型对象，该对象充当对象的“父类”，以便对象可以从其原型对象中继承属性和方法。

原型链的作用

继承属性和方法：JavaScript中的对象可以通过原型链访问其原型对象的属性和方法。这样，可以在一个对象上定义一组共享的属性和方法，然后让其他对象继承它们，从而实现代码的重用和模块化。
属性和方法查找：当访问一个对象的属性或方法时，JavaScript引擎首先在对象本身查找，如果找不到则会继续在原型对象上查找。如果还找不到，就会继续在原型对象的原型对象上查找，以此类推，直到找到相应的属性或方法或到达原型链的末端。这种机制使得对象可以继承多层属性和方法，并且可以实现属性和方法的覆盖。
扩展对象：通过原型链，可以向一个对象添加新的属性和方法，从而扩展对象的功能。只需要将新属性和方法添加到原型对象上，所有继承了该原型对象的对象都会自动具有这些新的属性和方法。
原型继承：JavaScript中的原型链机制实现了一种简单的继承模型，通过将一个对象设置为另一个对象的原型对象，可以使后者继承前者的属性和方法。这种继承方式可以实现代码的复用和扩展。

演示案例

<body>
		<script type="text/javascript">
			//创建继承的对象
			function Flower(){}
				//为自定义函数创建原型函数
				Flower.prototype.name = "曼陀罗花";
				Flower.prototype.genera = "曼陀罗属";
				Flower.prototype.uses = "观赏或药用";
				Flower.prototype.area = "印度";
				Flower.prototype.showNmae=function(){alert(this.name);}
				Flower.prototype.showarea=function(){document.write(this.area);}
				//创建需要继承的自定义对象
				var flower1 = new Flower();
				flower1.showNmae();
				var flower2 = new Flower();
				flower2.showarea();
</script>