函数和对象的创建以及面向对象的编程

2017-02-25  本文已影响0人  码农的世界你不懂

① 函数声明

② 函数表达式

③ 使用Function类型的构造器创建

代码示例

 //01 函数声明
    function functionName() {
        console.log('以函数声明的方式来定义函数');
    }

    functionName();

    //02 函数表达式
    var func = function () {
        console.log('函数表达式的方式来定义函数');
    };
    func();

    //03 使用Function构造器来创建
    var funcName = new Function();
    funcName();
    //上面的代码等价于
    /*
    function funcName() {

    }
    */

关键字new的使用
可以使用new关键字来创建新的对象

———————————————————————————————————————

面向过程编程:
        关注点在于解决问题需要的每一个详细的步骤
        示例:
            自己洗衣服的过程
            ① 收集需要洗的脏衣服
            ② 准备洗衣粉、洗衣液等
            ③ 把衣服放到一个盆里
            ④ 接水
            ⑤ 把洗衣粉放到盆里
            ⑥ 摩擦,摩擦,不断的摩擦
            ⑦ 把洗好的衣服用清水冲洗干净
            ⑧ 尽量把把洗好的衣服的水分拧干
            ⑨ 晾晒
    面向对象编程:
        关注点在于解决问题需要的对象身上
        示例:
            使用洗衣机洗衣服的过程
            ① 收集需要洗的脏衣服
            ② 找到合适的洗衣机
            ③ 设定洗衣服和烘干的程序

** 06 代码示例:**

    var zhangsan = {
            name:"张三",
            sex:"男",
            age:18,
            address:"天上人间1号公馆",

            eat:function () {
                console.log('能吃');
            },
            sleep:function () {
                console.log("能睡");
            },
            say:function () {
                console.log("能说话");
            },
            run:function () {
                console.log("能运动");
            },
            song:function () {
                console.log("能唱歌");
            }
        };

        //打印对象的属性并调用相关的方法
        console.log(zhangsan.name,zhangsan.age,zhangsan.address);
        zhangsan.say();
        zhangsan.sleep();
```
_______________________________________________________________________

**为什么要使用面向对象编程?**
` *面向对象编程的优点: 更方便 + 提高代码的复用性*`
##### 典型的面向过程
```
<script>
    //01 创建标签
    var div = document.createElement("div");

    //02 设置样式
    div.style.width = "200px";
    div.style.height = "50px";
    div.style.backgroundColor = "red";

    //03 添加到页面上
    document.body.appendChild(div);
</script>
```

##### 面向对象的代码
```
<script>
   // $("body").append("<div>sdshdfskfsk</div>")
   $("body").append("<div style='height: 200px;width: 100px;border: 2px solid #2aa198'></div>");
</script>
```

**总结:面向对象编程其实是对面向过程的封装**
上一篇下一篇

猜你喜欢

热点阅读