JavaScript object-oriented class
Classes to learn this week against the war theme is "object-oriented", many people find hard to understand object-oriented, but in fact we are already in the object-oriented thinking, and today let us re-learn what he describes what ES6 in the new class class ...
Is an advanced object-oriented programming ideas OO ( Object Oriented )
From the very beginning for the binary instruction, facing the natural language programming, to today's object-oriented, as the name suggests, the object " Object " is the center of the whole idea. Object-oriented programming is actually a thought in line with our human thinking habits.
Mentioned object-oriented, they will naturally think of process-oriented, process-oriented analysis on the steps needed to solve the problem, such as the elephant into the refrigerator, in a few steps, which requires a few steps, follow these steps with the function come true, the problem is object-oriented will need to be resolved into a plurality of separate objects, to solve the problem by calling the object's method. When the program is changed like this, we just find the corresponding object to modify it, more convenient.
1, the object-oriented features: encapsulation (ignoring details, choose to perform, reuse), inheritance (to facilitate the expansion, the child to take the parent) and a polymorphism (a variety of forms, can be dynamically extended);
2, for the advantage of object: Find information fast speed, fast speed of information dissemination
★ . 3 , JS object-oriented class
With ES6 the keyword class appeared, making the definition of the class to become more simple.
Syntax:
//class CreatePerson{
// constructor ( ){ }
// custom method name () {}
// }
// new CreatePerson( );
First, using the function CreatePerson method:
function CreatePerson(n,a){
this.name = n;
this.age = a;
}
CreatePerson.prototype.show = function(){
console.log(this.name + "---" + this.age);
}
If a class keyword to write CreatePerson ,
class CreatePerson{
constructor(n,a){
this.name = n;
this.age = a;
}
show(){
console.log(this.name + "---" + this.age);
}
}
var p1 = new CreatePerson("admin",18);
p1.show();
Although the code looks longer, but look closely, we will find the structure becomes more clear , we can find CreatePerson equivalent to the name of the constructor, constructor () {} function body equivalent to the constructor, custom method name () {} is equivalent to the constructor method on the binding of the prototype.
We can see a tab example to look deeper impression:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
#box{height: 400px;width:550px;border: 2px solid #000;margin: 20px auto;}
ul{display: flex;}
ul li{flex: 1;height:40px;border-right:2px solid #000 ;list-style: none;font:18px/40px "";text-align: center;}
ul li:last-child{border-right:none;}
ul li.active{background: #9370DB;color: #F0F;}
.cont div{height: 360px;width:550px;display: none;}
.cont .cont1{background: #00FF00;display:block;}
.cont .cont2{background: #008000;}
.cont .cont3{background: #555555;}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="cont">
<div class="cont1"></div>
<div class="cont2"></div>
<div class="cont3"></div>
</div>
</div>
</body>
<script>
// tab analysis:
// 1. Select the element (Properties)
2. // Bind event (method)
3. // change style (method)
class Tab{
constructor(){
// 1. Select the element (Properties)
this.li=document.querySelectorAll("#box li");
this.div=document.querySelectorAll(".cont div");
}
addEvent(){
2. // Bind event (method)
var that=this;
for(let i=0;i<this.li.length;i++){
this.li[i].onclick=function(){
that.change(i);
}
}
}
change(a){
3. // change style (method)
for(var i=0;i<this.li.length;i++){
this.li[i].className="";
this.div[i].style.display="none";
}
this.li[a].className="active";
this.div[a].style.display="block";
}
}
var t=new Tab();
t.addEvent();
</script>
</html>
class appears, make our programs easier, make good use of repeated practice, must be analyzed prior to writing, attention to detail, rigorous logic.