基础学习+练习-CSDN博客

本文链接：https://blog.csdn.net/qq_61718994/article/details/122547832

学习内容：原型对象，toString（）

学习笔记：

原型（proototype）我们所创建的每一个函数，解析器都会像函数中添加一个属性prototype

这个属性对应着一个对象，这个对象就是原型对象

如果函数作为普通函数调用prototype没有任何作用

当函数通过构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象

我们可以将对象中共有的内容，统一设置到原型对象中

当我们访问对象的属性或方法时，它会现在对象自身中寻找，如果又则直接用，如果没有则会去原型对象中找，找到则直接用

我们在创建构造函数时，可以将对象中共有的属性和方法，统一添加到构造函数中的原型对象中，这样不用为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function MyClass(a,b,c) {
				this.name=a;
				this.age=b;
				this,gender=c;
				this.sayName=function(){
					document.write(this.name);
				};
					}
			//MyClass.prototype.a=123;
			//向原型中添加SayName方法
			MyClass.prototype.SayName=function(){
				document.write("hello大家好,我是"+this.name+"<br>");
			}
			var mc = new MyClass("孙悟空",18,"男");
			mc.SayName();
			document.write(mc.__proto__==MyClass.prototype);
		</script>
	</head>
	<body>
		
	</body>
</html>

运行结果：

原型对象也是对象，所以它也有原型

使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true

当我们使用一个对象的属性或方法时，会先在自身中寻找，自身中具有则直接使用，如果没有则去圆心对象中找，如果原型对象中有，则使用，如果没有则去原型的原型中找

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function MyClass() {
				
			}
			//向MyClass的原型中添加一个那么属性
			MyClass.prototype.name="我是原型中的名字";
			var mc= new MyClass();
			document.write(mc.name+"<br/>");
			//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
			document.write("name" in mc);
			//可以使用对象中的hasOwnProperty()来检查对象自身中是否含有该属性;使用该方法只有当对象自身中含有属性时,才会返回true
			//hasOwnProperty()在原型的原型里
			document.write("<br>"+mc.hasOwnProperty("name")+"<br>");
			document.write(mc.__proto__.hasOwnProperty("hasOwnProperty")+"<br>");//这里没有,为false
			document.write(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//这里有,为true
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：

toString：

当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function Person(name,age,gender) {
				this.name=name;
				this.age=age;
				this.gender=gender;
			}
			//创建一个Person对象
			var per =new Person("zhangsan",18,"nan");
			//当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值
			var result=per.toString();
			document.write("reslut ="+result+"<br>");
			document.write(per);
		</script>
	</head>
	<body>
	</body>
</html>

结果：

如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function Person(name,age,gender) {
				this.name=name;
				this.age=age;
				this.gender=gender;
			}
			//创建一个Person对象
			var per =new Person("zhangsan",18,"nan");
			per.toString=function() {
				return "我不再是[object Object]"
			}
			//当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值
			//var result=per.toString();
			//document.write("reslut ="+result+"<br>");
			document.write(per);
		</script>
	</head>
	<body>
	</body>
</html>

结果：

修改原型对象中的toString，使可以输出每个对象的详细信息，如果只修改某个对象，他只会对当前对象有作用，对其他对象则没有作用

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function Person(name,age,gender) {
				this.name=name;
				this.age=age;
				this.gender=gender;
			}
			//修改原型中的toString
			Person.prototype.toString=function() {
				return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]"
			}
			//创建一个Person对象
			var per =new Person("zhangsan",18,"nan");
			var per1 =new Person("猪",18,"妖");
/* 			per.toString=function() {
				return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]"
			} */
			//当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值
			//var result=per.toString();
			//document.write("reslut ="+result+"<br>");
			document.write(per+"<br>");
			document.write(per1);
		</script>
	</head>
	<body>
	</body>
</html>

结果：

练习：

页面跳转案例：

index：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* .xiahua {
				text-decoration: none;
			} */
		</style>
	</head>
	<body>
		<h1>今日搜索热词</h1>
		<hr >
		<h2>1.拜登“丧事喜办”被网民怒骂？真相其实魔幻！</h2>
		<p>近日，美国总统拜登邀请了一批医护人员来到白宫，一起又唱又跳地欢庆起美国等西方基督教国家的传统节日“<a href="./one.html">圣诞节</a>”。</p>
		<h2>2.工厂消失的年轻人</h2>
		<p>2021年，工厂里越来越难见“<a href="./two.html">年轻面孔</a>”了。</p>
	</body>
</html>

one.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" >
		<title></title>
		<style type="text/css">
			p {
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<h1>谁该为普通美国人这个难熬的圣诞节负责？</h1>
		<hr >
		<p>“就连圣诞树也逃不过2021年的经济混乱。”《华盛顿邮报》这样写道。据美国圣诞树协会估测，今年的圣诞树价格上涨10%-30%，以至于行业人士给美国人支招，“早点买，别等到节日前几天”“大小品种别太挑剔，灵活点”……</p>
		<p>圣诞树变贵是普通美国人生活开支持续走高的缩影。11月美国通胀率高达6.8%，创下39年新高。食品、能源、汽车、房租等价格上涨明显。然而，根据美国劳工部数据，11月美国人扣除通胀因素后的实际时薪同比下降了1.9%。正如美国消费者新闻与商业频道指出，通胀“拿走了”所有美国人工资上涨的部分，而且还不够。</p>
	</body>
</html>

two.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p {
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<h1>工厂消失的年轻人</h1>
		<hr >
		<p>“一个三四百人的工厂，年轻人连百分之十都没有。”近日，湖北仙桃某服装厂老板向红星资本局诉苦，年轻人不愿来，年龄大的又做不动，再这样下去，他担心工厂将会“青黄不接”。</p>
		<p>　　制造业招工难、用工荒不是一个新鲜话题。往年年关将至，大批外出务工人员返乡，常会出现“用工紧张”的情况。而近两年由于疫情关系，“用工荒”更加明显。</p>
		<p>在广州街头，有工厂老板们排队3公里举着牌子为招工；而另一则新闻里，则出现“外卖骑手月薪过万，95后、00后占半边天”。</p>
		<p>人社部近日发布的2021年三季度全国“最缺工”的100个职业排行中，58个属于“生产制造及有关人员”。最新数据显示：到2025年，中国制造业10大重点领域人才总量将接近6200万人，人才需求缺口将近3000万人，缺口率高达48%。</p>
		<p>红星资本局采访发现，年轻人与工厂的供需关系仍难以平衡，在新就业模式的冲击下，工厂如何才能让年轻人“回心转意”？</p>
	</body>
	
</html>

运行结果：

index页面

跳转到one页面

跳转到two页面

练习二：
新闻样例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width:  800px;
				height: 600px;
				background-color: white;
				margin: 0 auto;
			}
			.center {
				text-align: center;
			}
			.color {
				color: #808080;
			}
			.color1 {
				color: skyblue;
				font-weight: 700px;
			}
			a {
				text-decoration: none;
			}
			.suojin {
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<div>
			<h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
			
			<p class="center">
				<span class="color">2077年01月28日14:58</span>
				<span class="color1">新浪科技</span>
				<a href="#">收藏本文</a>
				 </p>
			<hr>
			<p class="suojin">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
			<p class="suojin">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。</p>
			<p class="suojin">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》(Nature)杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
			<p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x3+5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
		</div>
	</body>
</html>

运行结果：