学习内容:原型对象,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>
运行结果: