Learning content: prototype object, toString()
Study notes:
Prototype: for each function we create, the parser will add an attribute prototype to the function
This attribute corresponds to an object, which is the prototype object
If a function calls prototype as a normal function, it has no effect
When a function is called in the form of a constructor, the object it creates will have an implicit attribute pointing to the prototype object of the constructor__ proto__ To access the property
The prototype object is equivalent to a common area, and all instances of the same class can access the prototype object
We can uniformly set the common contents of the object into the prototype object
When we access the properties or methods of an object, it will be found in the object itself. If not, it will be used directly. If not, it will be found in the prototype object. If found, it will be used directly
When we create a constructor, we can uniformly add the common attributes and methods of the object to the prototype object in the constructor, so that each object can have these attributes and methods without adding for each object and affecting the global scope
example:
<!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;
//Add the SayName method to the prototype
MyClass.prototype.SayName=function(){
document.write("hello hello everyone,I am"+this.name+"<br>");
}
var mc = new MyClass("Sun WuKong",18,"male");
mc.SayName();
document.write(mc.__proto__==MyClass.prototype);
</script>
</head>
<body>
</body>
</html>
Operation results:
The prototype object is also an object, so it also has a prototype
When using in to check whether an object contains a property, if it does not exist in the object but exists in the prototype, it will also return true
When we use an object's attribute or method, we will first find it in ourselves. If we have it in ourselves, we will use it directly. If not, we will find it in the center object. If we have it in the prototype object, we will use it. If not, we will find it in the prototype of the prototype
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function MyClass() {
}
//Add a property to the prototype of MyClass
MyClass.prototype.name="I'm the name in the prototype";
var mc= new MyClass();
document.write(mc.name+"<br/>");
//When using in to check whether an object contains a property, if it does not exist in the object but exists in the prototype, it will also return true
document.write("name" in mc);
//You can use hasOwnProperty() in the object to check whether the object itself contains the property; This method returns true only if the object itself contains properties
//hasOwnProperty() is in the prototype of the prototype
document.write("<br>"+mc.hasOwnProperty("name")+"<br>");
document.write(mc.__proto__.hasOwnProperty("hasOwnProperty")+"<br>");//Not here. It is false
document.write(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//Here, it is true
</script>
</head>
<body>
</body>
</html>
Operation results:
toString:
When we print an object directly on the page, it is actually the return value of the toString() method of the output object
example:
<!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;
}
//Create a Person object
var per =new Person("zhangsan",18,"nan");
//When we print an object directly on the page, it is actually the return value of the toString() method of the output object
var result=per.toString();
document.write("reslut ="+result+"<br>");
document.write(per);
</script>
</head>
<body>
</body>
</html>
result:
If we want to output an object without outputting [object Object], we can add a toString() method to the object
example:
<!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;
}
//Create a Person object
var per =new Person("zhangsan",18,"nan");
per.toString=function() {
return "I'm no longer[object Object]"
}
//When we print an object directly on the page, it is actually the return value of the toString() method of the output object
//var result=per.toString();
//document.write("reslut ="+result+"<br>");
document.write(per);
</script>
</head>
<body>
</body>
</html>
result:
Modify the toString in the prototype object to output the details of each object. If only one object is modified, it will only have effect on the current object, but not on other objects
example:
<!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;
}
//Modify toString in prototype
Person.prototype.toString=function() {
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]"
}
//Create a Person object
var per =new Person("zhangsan",18,"nan");
var per1 =new Person("pig",18,"Demon");
/* per.toString=function() {
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]"
} */
//When we print an object directly on the page, it is actually the return value of the toString() method of the output object
//var result=per.toString();
//document.write("reslut ="+result+"<br>");
document.write(per+"<br>");
document.write(per1);
</script>
</head>
<body>
</body>
</html>
result:
Exercise:
Page Jump case:
index:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* .xiahua {
text-decoration: none;
} */
</style>
</head>
<body>
<h1>Search hot words today</h1>
<hr >
<h2>1.Biden's "happy funeral" was scolded by netizens? The truth is magic!</h2>
<p>Recently, US President Biden invited a group of medical staff to the White House to celebrate the traditional festivals of the United States and other Western Christian countries“<a href="./one.html">Christmas</a>". </p>
<h2>2.Young people whose factories have disappeared</h2>
<p>2021 In, it became more and more difficult to see in the factory“<a href="./two.html">Young face</a>"Yes.</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>Who is responsible for this difficult Christmas for ordinary Americans?</h1>
<hr >
<p>"Even the Christmas tree cannot escape the economic chaos of 2021. " The Washington Post wrote. The American Christmas Tree Association estimates that the price of Christmas trees will rise by 10% this year%-30%，So that industry people give Americans advice, "buy early, don't wait until a few days before the festival", "don't be too picky about size and varieties, be flexible"</p>
<p>The increasing cost of Christmas trees is a microcosm of the rising living expenses of ordinary Americans. In November, the US inflation rate reached 6.8%，A 39 year high. Food, energy, cars, rent and other prices rose significantly. However, according to the data of the U.S. Department of labor, the real hourly salary of Americans after deducting inflation decreased by 1. 5% year-on-year in November.9%. As the US consumer news and business channel points out, inflation "takes away" all the rising wages of Americans, and it is not enough.</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>Young people whose factories have disappeared</h1>
<hr >
<p>"In a factory with 300 or 400 people, young people don't even have 10 percent. " Recently, the boss of a garment factory in Xiantao, Hubei complained to the Red Star capital bureau that young people don't want to come and older people can't do it. If it goes on like this, he is worried that the factory will be "green and yellow".</p>
<p> Difficult recruitment and labor shortage in manufacturing industry is not a new topic. With the approaching of the new year in previous years, a large number of migrant workers return home, which often leads to "labor shortage". In the past two years, due to the epidemic situation, "labor shortage" has become more obvious.</p>
<p>On the streets of Guangzhou, factory owners lined up for 3 kilometers and held up signs to recruit workers; In another piece of news, "the monthly salary of take out riders exceeds 10000, and the post-95 and Post-00 account for half of the sky".</p>
<p>The Ministry of human resources and social security recently released the ranking of 100 occupations with "the most lack of workers" in the country in the third quarter of 2021, of which 58 belong to "production, manufacturing and related personnel". The latest data show that by 2025, the total number of talents in the top 10 key areas of China's manufacturing industry will be close to 62 million, the talent demand gap will be nearly 30 million, and the gap rate will be as high as 48%%. </p>
<p>The Red Star capital Bureau found that the supply-demand relationship between young people and factories is still difficult to balance. Under the impact of the new employment model, how can factories make young people "change their mind"?</p>
</body>
</html>Operation results:
index page
Jump to one page
Jump to the two page
Exercise 2:
News sample
<!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"><Nature selected 10 computer code projects that change science</h1>
<p class="center">
<span class="color">2077 January 28, 2014:58</span>
<span class="color1">Sina Technology</span>
<a href="#"> collect this article</a>
</p>
<hr>
<p class="suojin">2019 In, the event horizon telescope team made the world see the black hole for the first time. However, the image of the luminous ring object released by the researchers is not a traditional picture, but obtained through calculation. Using data from radio telescopes in the United States, Mexico, Chile, Spain and Antarctica, the researchers made mathematical transformations and finally synthesized this landmark image. The research team also released the programming code used to realize this feat, and wrote an article to record this discovery, which can also be further analyzed by other researchers.</p>
<p class="suojin">This model is becoming more and more common. From astronomy to zoology, computers are involved in every major scientific discovery in modern times. Michael Levitt, a computational biologist at Stanford University in the United States, shared the 2013 Nobel Prize in chemistry with two other researchers because he "created a multi-scale model for complex chemical systems". He pointed out that today's notebook computer memory and clock speed are 10000 times that of the computer manufactured in the laboratory when he began to win the prize in 1967. "We do have considerable computing power today," he said. "The problem is that we still need to think.</p>
<p class="suojin">No matter how powerful a computer is, it is useless without software that can solve research problems and researchers who know how to write and use software. Today's scientific research has been fundamentally linked with computer software, which has penetrated into all aspects of research work. Recently, nature(Nature)The magazine looks behind the scenes, focuses on the key computer codes that have changed scientific research in the past few decades, and lists 10 key computer projects.</p>
<p class="suojin">The first modern computers were not easy to operate. The programming at that time was actually realized by manually connecting wires into rows of circuits. Later, machine language and assembly language appeared, allowing users to program computers with code, but both languages need to have an in-depth understanding of the computer architecture, which makes it difficult for many scientists to master. In the 1950s, with the development of symbolic language, especially by John·Bucks and his team in San Jose, California IBM Developed "formula translation" language Fortran，This situation has changed. utilize Fortran，The user can program with human readable instructions, such as x3+5. Then the compiler converts these instructions into fast and efficient machine code.</p>
</div>
</body>
</html>
Operation results:
