初识面向对象的概念

先贴代码：

/**
 * Created by Administrator on 2016/8/17.
 */
(function () {

    function createStudent(name,age,gender) {
        var student={name:name,age:age,gender:gender};
        student.createHTMLElement=function () {
            var div=document.createElement("div");
            var a=document.createElement("a");
            var btn=document.createElement("button");
            btn.innerHTML="Close";
            div.appendChild(btn);
            a.innerHTML=student.name;
            a.href="#";
            a.onclick=function () {
                alert("姓名："+student.name+"
年龄："+student.age+"
性别："+student.gender);
            };
            btn.onclick=function () {
                div.removeChild(a);
                div.removeChild(btn);
            };
            div.appendChild(a);
            return div;
        };

        return student;
    }

    var students=[
        createStudent("Dork",12,"female"),
        createStudent("Tom",34,"female"),
        createStudent("Lili",23,"male")

    ];
    for (var i = 0; i < students.length; i++) {
        document.body.appendChild(students[i].createHTMLElement());
    }
})();
//面向对象无非是，类里面套个方法，以后类里面的对象可以调用里面的方法

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

代码稍作修改:

/**
 * Created by Administrator on 2016/8/17.
 */

(function () {

    function CreateStudent(name, age, gender) {

        var self = {name: name, age: age, gender: gender};

        self.getNode = function () {
            return self.htmlNode;
        };

        function createHtmlNode() {
            self.htmlNode = document.createElement("div");
            var a = document.createElement("a");
            a.innerHTML = self.name;
            a.href = "#";
            a.onclick = function () {
                alert("名字:" + self.name + "
年龄:" + self.age + "
性别:" + self.gender);
            };
            self.htmlNode.appendChild(a);
            var closeBtn = document.createElement("button");
            closeBtn.innerHTML = "Close";
            self.htmlNode.appendChild(closeBtn);
            closeBtn.onclick = function () {
                self.htmlNode.parentNode.removeChild(self.htmlNode);
            }
        }

        function init() {
            createHtmlNode();
        }

        init();

        return self;
    }

    var students = [
        CreateStudent("张三", 10, "男"),
        CreateStudent("李四", 12, "男"),
        CreateStudent("丽丽", 9, "女")
    ];

    console.log(students);

    for (var i = 0; i < students.length; i++) {
        var student = students[i];
        document.body.appendChild(student.getNode());
    }
})();

代码功能：点击消失。

进而引出继承的概念：

/**
 * Created by Administrator on 2016/8/17.
 */

(function () {

    function CreateStudent(name, age, gender) {

        var self = {name: name, age: age, gender: gender};

        self.getNode = function () {
            return self.htmlNode;
        };

        function createHtmlNode() {
            self.htmlNode = document.createElement("div");
            self.htmlNode.style.backgroundColor="coral";
            self.htmlNode.style.marginTop="5px";
            var a = document.createElement("a");
            a.innerHTML = self.name;
            a.href = "#";
            a.onclick = function () {
                alert("名字:" + self.name + "
年龄:" + self.age + "
性别:" + self.gender);
            };
            self.htmlNode.appendChild(a);
            var closeBtn = document.createElement("button");
            closeBtn.innerHTML = "Close";
            self.htmlNode.appendChild(closeBtn);
            closeBtn.onclick = function () {
                self.htmlNode.parentNode.removeChild(self.htmlNode);
            }
        }

        function init() {
            createHtmlNode();
        }

        init();

        return self;
    }

    var students = [
        CreateStudent("张三", 10, "男"),
        CreateStudent("李四", 12, "男"),
        CreateStudent("丽丽", 9, "女"),
        boyStudent("王五", 13),
        grilStudent("莎莎", 12)
    ];

    function boyStudent(name, age) {
        var self = CreateStudent(name, age, "男");

        self.sayHello = function () {
            alert(self.name + "说，你好！波波");
        };
        self.htmlNode.onclick=function () {
          self.sayHello();
        };
        return self;
    }

    function grilStudent(name, age) {
        var self = CreateStudent(name, age, "女");
        return self;
    }

    console.log(students);

    for (var i = 0; i < students.length; i++) {
        var student = students[i];
        document.body.appendChild(student.getNode());
    }
})();

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

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

刚才写代码，突然对面向对象有了点感悟，也不知道对不，先简要记一下吧。

感悟：说面向对象之前先说一下，面向过程吧，（本来面向对象就是从面向过程演变过来的）。

面向过程打比喻为就是，我想要从冰箱去拿一罐可乐，我的步骤就是，打开冰箱门，拿出可乐，关上冰箱门。对应到js里面就是三个函数，分别是，

function openDoor();
function takeCola（);
function closeDoor();

这也就是所谓的过程函数，分个执行，从而得到可乐。

在说面向对象就是，以可乐为对象吧，也就是把可乐作为“拿出可乐”这个过程的思考对象，从而思考全局。思路是，拿可乐的过程中，我要执行了开门，拿出可乐，然后关上门，（语言好像不容易形容通，╮(╯▽╰)╭，还是看代码吧）,代码为，

function toTake(){
    function openDoor();
    function takeCola();
    function closeDoor();
};

就是把开门和关门的过程放入了拿出可乐的函数中。

当然这样看来，面向对象并不比面向过程好多少，但是如果说上面那个拿出可乐的过程改为，取得可乐和雪碧的个数呢，函数就修改为

function takeSometing(name,num){
    var something={};
    function openDoor();
    function take(name,num){
      
}
    function closeDoor();
    return something;
};
var Something=[
    takeSomething(cola,5),
    takeSomething(sprite,4)  
];

(注，代码仅供参考，我只是实现了思想，代码也是我临时写的)

从代码中可以看出，我的takeSomething()函数实现了可以取得冰箱任何东西的功能，可以的话，我还可以取出柜子里的东西，哈哈。

这里就以冰箱里面的任何东西看做对象，进而思考程序的整体结构，写出面向对象的程序。

最后再提一下面向对象的注意点，首先你得找好对象吧，不然怎么去“追”（追啥追，程序员没对象，只有对象，╮(╯▽╰)╭），找对象时要注意对象的选取，就拿上面那个例子来说吧，你总不能拿门作为对象吧。

先写到这吧，也不知道自己现在理解的对不对，这个只是刚才写代码时候突发领悟的，或许有偏差。以后理解深了，在提高纠正吧。