初识面向对象的概念

先贴代码：

 1 /**
 2  * Created by Administrator on 2016/8/17.
 3  */
 4 (function () {
 5
 6     function createStudent(name,age,gender) {
 7         var student={name:name,age:age,gender:gender};
 8         student.createHTMLElement=function () {
 9             var div=document.createElement("div");
10             var a=document.createElement("a");
11             var btn=document.createElement("button");
12             btn.innerHTML="Close";
13             div.appendChild(btn);
14             a.innerHTML=student.name;
15             a.href="#";
16             a.onclick=function () {
17                 alert("姓名："+student.name+"\n年龄："+student.age+"\n性别："+student.gender);
18             };
19             btn.onclick=function () {
20                 div.removeChild(a);
21                 div.removeChild(btn);
22             };
23             div.appendChild(a);
24             return div;
25         };
26
27         return student;
28     }
29
30     var students=[
31         createStudent("Dork",12,"female"),
32         createStudent("Tom",34,"female"),
33         createStudent("Lili",23,"male")
34
35     ];
36     for (var i = 0; i < students.length; i++) {
37         document.body.appendChild(students[i].createHTMLElement());
38     }
39 })();
40 //面向对象无非是，类里面套个方法，以后类里面的对象可以调用里面的方法

js

代码功能：点击人名出现信息。

代码稍作修改:

 1 /**
 2  * Created by Administrator on 2016/8/17.
 3  */
 4
 5 (function () {
 6
 7     function CreateStudent(name, age, gender) {
 8
 9         var self = {name: name, age: age, gender: gender};
10
11         self.getNode = function () {
12             return self.htmlNode;
13         };
14
15         function createHtmlNode() {
16             self.htmlNode = document.createElement("div");
17             var a = document.createElement("a");
18             a.innerHTML = self.name;
19             a.href = "#";
20             a.onclick = function () {
21                 alert("名字:" + self.name + "\n年龄:" + self.age + "\n性别:" + self.gender);
22             };
23             self.htmlNode.appendChild(a);
24             var closeBtn = document.createElement("button");
25             closeBtn.innerHTML = "Close";
26             self.htmlNode.appendChild(closeBtn);
27             closeBtn.onclick = function () {
28                 self.htmlNode.parentNode.removeChild(self.htmlNode);
29             }
30         }
31
32         function init() {
33             createHtmlNode();
34         }
35
36         init();
37
38         return self;
39     }
40
41     var students = [
42         CreateStudent("张三", 10, "男"),
43         CreateStudent("李四", 12, "男"),
44         CreateStudent("丽丽", 9, "女")
45     ];
46
47     console.log(students);
48
49     for (var i = 0; i < students.length; i++) {
50         var student = students[i];
51         document.body.appendChild(student.getNode());
52     }
53 })();

js

代码功能：点击消失。

进而引出继承的概念：

 1 /**
 2  * Created by Administrator on 2016/8/17.
 3  */
 4
 5 (function () {
 6
 7     function CreateStudent(name, age, gender) {
 8
 9         var self = {name: name, age: age, gender: gender};
10
11         self.getNode = function () {
12             return self.htmlNode;
13         };
14
15         function createHtmlNode() {
16             self.htmlNode = document.createElement("div");
17             self.htmlNode.style.backgroundColor="coral";
18             self.htmlNode.style.marginTop="5px";
19             var a = document.createElement("a");
20             a.innerHTML = self.name;
21             a.href = "#";
22             a.onclick = function () {
23                 alert("名字:" + self.name + "\n年龄:" + self.age + "\n性别:" + self.gender);
24             };
25             self.htmlNode.appendChild(a);
26             var closeBtn = document.createElement("button");
27             closeBtn.innerHTML = "Close";
28             self.htmlNode.appendChild(closeBtn);
29             closeBtn.onclick = function () {
30                 self.htmlNode.parentNode.removeChild(self.htmlNode);
31             }
32         }
33
34         function init() {
35             createHtmlNode();
36         }
37
38         init();
39
40         return self;
41     }
42
43     var students = [
44         CreateStudent("张三", 10, "男"),
45         CreateStudent("李四", 12, "男"),
46         CreateStudent("丽丽", 9, "女"),
47         boyStudent("王五", 13),
48         grilStudent("莎莎", 12)
49     ];
50
51     function boyStudent(name, age) {
52         var self = CreateStudent(name, age, "男");
53
54         self.sayHello = function () {
55             alert(self.name + "说，你好！波波");
56         };
57         self.htmlNode.onclick=function () {
58           self.sayHello();
59         };
60         return self;
61     }
62
63     function grilStudent(name, age) {
64         var self = CreateStudent(name, age, "女");
65         return self;
66     }
67
68     console.log(students);
69
70     for (var i = 0; i < students.length; i++) {
71         var student = students[i];
72         document.body.appendChild(student.getNode());
73     }
74 })();

js

当然js里面也可以实现方法重写，如常用的toString()

直接写a.toString()=funciton(){},它重写的是 alert()方法。