zoukankan      html  css  js  c++  java
  • 初识面向对象的概念

    先贴代码:

     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+"
    年龄:"+student.age+"
    性别:"+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 + "
    年龄:" + self.age + "
    性别:" + 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 + "
    年龄:" + self.age + "
    性别:" + 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()方法。

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

    感悟:说面向对象之前先说一下,面向过程吧,(本来面向对象就是从面向过程演变过来的)。

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

    1 function openDoor();
    2 function takeCola();
    3 function closeDoor();

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

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

    1 function toTake(){
    2     function openDoor();
    3     function takeCola();
    4     function closeDoor();
    5 };

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

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

     1 function takeSometing(name,num){
     2     var something={};
     3     function openDoor();
     4     function take(name,num){
     5       
     6 }
     7     function closeDoor();
     8     return something;
     9 };
    10 var Something=[
    11     takeSomething(cola,5),
    12     takeSomething(sprite,4)  
    13 ];

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

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

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

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

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

  • 相关阅读:
    html 带渐变的吸顶效果 vue
    Linux添加环境变量
    C#集合通论
    Android adb 命令导出数据库
    查看签名方式及签名信息
    啥 啥 啥,服务治理是个啥
    令牌桶、漏斗、冷启动限流在sentinel的应用
    MySQL事务
    MySQL优化
    MySQL视图、存储过程、函数、触发器
  • 原文地址:https://www.cnblogs.com/chenluomenggongzi/p/5781500.html
Copyright © 2011-2022 走看看