面向过程和面向对象的对比
面向过程的思维方式：
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.叫();
