面向过程和面向对象的对比

面向过程的思维方式：
    step 1:收拾脏衣服
    step 2:打开洗衣机盖
    step 3:将脏衣服放进去
    step 4:设定洗衣程序
    step 5:开始洗衣服
    step 6:打开洗衣机盖子
    step 7:晒衣服

面向对象的思维方式：
    洗衣机需要什么对象？
    女朋友    
    洗衣机

在面向对象的思维方式中：我们只关心要完成事情需要的对象。

总结：面向对象是一种解决问题的思路，一种编程思想。

对象是什么呢？

万物皆对象

JavaScript中的对象是什么？

在JavaScript中，所谓的对象，就是键值对的集合。

属性和方法是什么？

比如要描述一个人，这个人有name,age,gender,体现在代码中：

{ name:"张三", age:18, gender:"Male" }

比如要做一个学生管理系统，那学生就是要设计的对象，学生拥有name,age,gender,address,phone,体现在代码中：

{ name: "张三",age:18,gender:"female",address:"上海",phone:"110"}

总结

面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现
面向对象则是关注的实现功能的一系列的对象

面向对象举例

设置页面中的div和p的边框为1px solid red

// 任务需求:
// 1> 获取div标签
var divs = document.getElementsByTagName( 'div' );
// 2> 遍历获取到的div标签
for(var i = 0; i < divs.length; i++) {
    //3> 获取到每一个div元素,设置div的样式
    divs[i].style.border = "1px dotted black";
}

// 4> 获取p标签
var ps = document.getElementsByTagName("p");
// 5> 遍历获取到的p标签
for(var j = 0; j < ps.length; j++) { 
    // 获取到每一个div元素 设置p标签的样式
    ps[j].style.border = "1px dotted black"; 
}

使用函数进行封装优化

// 通过标签名字来获取页面中的元素 
function tag(tagName) { 
    // var dvs = document.getElementsByTagName(tagName); 
    // return dvs; 
    return document.getElementsByTagName(tagName); 
}

// 封装一个设置样式的函数 
function setStyle(arr) { 
    for(var i = 0; i < arr.length; i++) { 
        // 获取到每一个div元素 
        arr[i].style.border = "1px solid #abc"; 
    } 
}
var dvs = tag("div");
var ps = tag("p");
setStyle(dvs); 
setStyle(ps);

使用面向对象的方式

// 更好的做法：是将功能相近的代码放到一起 
var itcast = { 
    getEle: { 
        tag: function (tagName) { 
            return document.getElementsByTagName(tagName); 
        }, 
        id: function (idName) { 
            return document.getElementById(idName); 
        } 
    },    
    setCss: { 
        setStyle: function (arr) { 
            for(var i = 0; i < arr.length; i++) { 
                arr[i].style.border = "1px solid #abc"; 
            } 
        }, 
        css: function() {}, 
        addClass: function() {}, 
        removeClass: function() {} 
        // ... 
    } 
    // 属性操作模块 
    // 动画模块 
    // 事件模块 
    // ... 
};

var divs = itcast.getEle.tag();
itcast.setCss.setStyle(divs);

面向对象额三大特性

封装性

对象是将数据与功能组合到一起, 即封装
js 对象就是键值对的集合
键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性
如果键值是函数, 那么就称为方法
对象就是将属性与方法封装起来
方法是将过程封装起来

继承性

所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西

传统继承基于模板

子类可以使用从父类继承的属性和方法。

class Person {
 string name;
 int age;
}

class Student : Person {
}
var stu = new Student();
stu.name

即：让某个类型的对象获得另一个类型的对象的属性的方法

js继承基于对象

js继承实现举例：混入（mix）

function mix ( o1, o2 ) {
    for ( var k in o2 ) {
        o1[ k ] = o2[ k ];
    }
}

多态性

把不同的子类对象都当作父类来看，可以屏蔽不同子类对象之间的差异，写出通用的代码，做出通用的编程，以适应需求的不断变化。

动物 animal = new 子类(); // 子类：麻雀、狗、猫、猪、狐狸...
动物 animal = new 狗();
animal.叫();

面向对象的基本概念