Initial knowledge of object-oriented concepts

Paste the code First:

1 /**2 * Created by Administrator on 2016/8/17.3  */4(function () {5 6     functioncreatestudent (name,age,gender) {7         varStudent={Name:name,age:age,gender:gender};8Student.createhtmlelement=function () {9             varDiv=document.createelement ("div");Ten             varA=document.createelement ("a"); One             varBtn=document.createelement ("button"); ABtn.innerhtml= "Close"; - Div.appendchild (BTN); -A.innerhtml=Student.name; thea.href= "#"; -a.onclick=function () { -Alert ("Name:" +student.name+ "\ n Age:" +student.age+ "\ n Sex:" +student.gender); -             }; +btn.onclick=function () { - Div.removechild (a); + Div.removechild (BTN); A             }; at Div.appendchild (a); -             returnDiv; -         }; -  -         returnstudent; -     } in  -     varstudents=[ toCreatestudent ("Dork", "female"), +Createstudent ("Tom", "female"), -Createstudent ("Lili", "male") the  *     ]; $      for(vari = 0; i < students.length; i++) {Panax Notoginseng Document.body.appendChild (Students[i].createhtmlelement ()); -     } the })(); + //Object-oriented is nothing more than a method inside a class, in which the object inside the class can call the method inside.

JS

Code features: Click on the name of the person appearing information.

The code changes slightly:

1 /**2 * Created by Administrator on 2016/8/17.3  */4 5(function () {6 7     functioncreatestudent (name, age, gender) {8 9         varSelf ={name:name, age:age, gender:gender};Ten  OneSelf.getnode =function () { A             returnSelf.htmlnode; -         }; -  the         functionCreatehtmlnode () { -Self.htmlnode = document.createelement ("div"); -             varA = Document.createelement ("a"); -a.innerhtml =Self.name; +A.href = "#"; -A.onclick =function () { +Alert ("Name:" + self.name + "\ n Age:" + self.age + "\ n Sex:" +self.gender); A             }; at Self.htmlNode.appendChild (a); -             varCLOSEBTN = document.createelement ("button"); -closebtn.innerhtml = "Close"; - Self.htmlNode.appendChild (CLOSEBTN); -Closebtn.onclick =function () { - Self.htmlNode.parentNode.removeChild (self.htmlnode); in             } -         } to  +         functioninit () { - Createhtmlnode (); the         } *  $ init ();Panax Notoginseng  -         returnSelf ; the     } +  A     varStudents = [ theCreatestudent ("Zhang San", 10, "male"), +Createstudent ("John Doe", 12, "male"), -Createstudent ("Lili", 9, "female") $     ]; $  - Console.log (students); -  the      for(vari = 0; i < students.length; i++) { -         varStudent =Students[i];Wuyi Document.body.appendChild (Student.getnode ()); the     } -})();

JS

Code features: Click to disappear.

This leads to the concept of inheritance:

1 /**2 * Created by Administrator on 2016/8/17.3  */4 5(function () {6 7     functioncreatestudent (name, age, gender) {8 9         varSelf ={name:name, age:age, gender:gender};Ten  OneSelf.getnode =function () { A             returnSelf.htmlnode; -         }; -  the         functionCreatehtmlnode () { -Self.htmlnode = document.createelement ("div"); -Self.htmlnode.style.backgroundcolor= "Coral"; -self.htmlnode.style.margintop= "5px"; +             varA = Document.createelement ("a"); -a.innerhtml =Self.name; +A.href = "#"; AA.onclick =function () { atAlert ("Name:" + self.name + "\ n Age:" + self.age + "\ n Sex:" +self.gender); -             }; - Self.htmlNode.appendChild (a); -             varCLOSEBTN = document.createelement ("button"); -closebtn.innerhtml = "Close"; - Self.htmlNode.appendChild (CLOSEBTN); inClosebtn.onclick =function () { - Self.htmlNode.parentNode.removeChild (self.htmlnode); to             } +         } -  the         functioninit () { * Createhtmlnode (); $         }Panax Notoginseng  - init (); the  +         returnSelf ; A     } the  +     varStudents = [ -Createstudent ("Zhang San", 10, "male"), $Createstudent ("John Doe", 12, "male"), $Createstudent ("Lili", 9, "female"), -Boystudent ("Harry", 13), -Grilstudent ("Salsa", 12) the     ]; - Wuyi     functionboystudent (name, age) { the         varSelf = createstudent (name, age, "male")); -  WuSelf.sayhello =function () { -Alert (Self.name + "say, Hello! Wave); About         }; $self.htmlnode.onclick=function () { - Self.sayhello (); -         }; -         returnSelf ; A     } +  the     functiongrilstudent (name, age) { -         varSelf = createstudent (name, age, "female"); $         returnSelf ; the     } the  the Console.log (students); the  -      for(vari = 0; i < students.length; i++) { in         varStudent =Students[i]; the Document.body.appendChild (Student.getnode ()); the     } About})();

JS

Of course JS inside can also implement method rewrite, such as the commonly used ToString ()

Write directly to A.tostring () =funciton () {}, which overrides the alert () method.

Initial knowledge of object-oriented concepts