一.JavaScript 面向对象编程
1.什么是面向对象编程
面向对象是一种解决问题的思路,一种编程思想.
2.面向过程和面向对象的对比
在这里给大家举个洗衣服的例子
面向过程的思维方式：
step 1:收拾脏衣服
step 2:打开洗衣机盖
step 3:将脏衣服放进去
step 4:设定洗衣程序
step 5:开始洗衣服
step 6:打开洗衣机盖子
step 7:晒衣服
而面向对象的思维方式:
洗衣机需要什么对象？
女朋友
洗衣机
在面向对象的思维方式中：我们只关心要完成事情需要的对象。
总结:面向对象是一种解决问题的思路，一种编程思想.
3.对象是什么?JavaScript 中的对象又是什么?
万事万物都是对象 .
在 JavaScript 中，所谓的对象，就是键值对的集合.
属性和方法是什么?
比如要描述一个人，这个人有 name,age,job,体现在代码中：
{ name:"张三", age:18, job:"Programe" }
比如要做一个学生管理系统，那学生就是要设计的对象，学生拥有 name,age,gender,address,phone,体现在代码中：
{ name:"刘亦菲", age:18, gender:"female", address:"上海", phone:"110" }
总结:
面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现
面向对象则是关注的实现功能的一系列的对象
二、面向对象编程案例
eg:设置div的样式
(1)传统的方式
<body>
<div id="div1" ></div>
<br />
<p id="p1"></p>
</body>
.....................
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById('div1');//获取页面元素
var p1=document.getElementById('p1');
div1.style.width=200+'px';
div1.style.height=200+'px';
div1.style.background='green'
p1.style.width=200+'px';
p1.style.height=100+'px';
p1.style.background='pink';
}
(2)函数的方式
<body>
<div id="div1"></div>
<div id="div2"></div>
<p id="p1"></p>
<p id="p2"></p>
</body>
......................
<script type="text/javascript">
window.onload=function(){
//函数主要起到封装的作用,以及优化程序
//定义一个函数 用来封装 获取页面元素的程序
function tagName(tagNames){
return document.getElementsByTagName(tagNames);
}
function byId(Byids){
return document.getElementById(Byids);
}
var div_01=tagName('div');
//alert(div_01);//输出结果[object HTMLCollection]为一个集合
var p1=tagName('p');
//alert(p1);//输出结果为[object HTMLCollection]返回结果为一个集合
//通过id获取 元素
var div1=byld('div1');//返回div元素
//alert(div1);//[object HTMLDivElement]
//通过以上发现 样式也可以封装
function styLe(arr){//传递元素进入到函数从而设置样式
for(i=0;i<arr.length;i++){
//假设现在div大小和p大小是一样的
arr[i].style.width=200+'px';
arr[i].style.height=200+'px';
if(arr==div_01){
if(i==0){
arr[i].style.background='yellow';
}else{
arr[i].style.background='red';
}
}else{
if(i==0){
arr[i].style.background='pink';
}else{
arr[i].style.background='green';
arr[i].style.borderRadius=50+'%';
}
}
}
}
styLe(div_01);
styLe(p1);
}
</script>
(3)使用面向对象的方式
<body>
<div id="div1" class="div_01"></div>
<div id="div2"class="div_01"></div>
<div id="div3"class="div_01"></div>
<div id="div4"class="div_01"></div>
</body>
............
<script type="text/javascript">
window.onload=function(){
var inlett={
//对获取页面元素的方式进行封装
getele:{//将功能相同封装到一起
id:function(ids){ //表示形参
return document.getElementById(ids);
},
tag:function(tags){
return document.getElementById(tags);
},
clas:function(cla){
return document.getElementsByClassName(cla);
}
},
//对样式进行封装
Style:{
sleltcss:function(arr){//arr有可能是集合,也有可能是单个元素
//(1)传递单个的元素进入该函数设置样式
//alert(arr.length); //undefined
if(arr.length==undefined){
arr.style.width=200+'px';
arr.style.height=200+'px';
if(arr==div1){
arr.style.background='red';
}else{
arr.style.borderRadius=50+'%';
}
}else{
//(2)传递一个集合进入到该函数设置样式
for (var i=0;i<arr.length;i++) {
arr[i].style.width=200+'px';
arr[i].style.height=200+'px';
if(i==0){
arr[i].style.background='red';
}else if(i==1){
arr[i].style.background='blue';
}else if(i==2){
arr[i].style.background='pink';
}else{
arr[i].style.background='yellow';
}
}
}
}
}
}
var div1=inlett.getele.id('div1');
inlett.Style.sleltcss(div1);
var div2=inlett.getele.id('div2');
inlett.Style.sleltcss(div2);
var div3=inlett.getele.id('div3');
inlett.Style.sleltcss(div3);
var div4=inlett.getele.id('div4');
inlett.Style.sleltcss(div4);
var div5=inlett.getele.clas('div_01');
inlett.Style.sleltcss(div5);
var div6=inlett.getele.tag('div');
inlett.Style.sleltcss(div6);
}
</script>
基于 Object 对象(object是所有对象的父类)
var person = new Object(); //创建一个空对象
person.name = 'My Name';//给对象添加属性
person.age = 18;
person.getName = function(){
return this.name;
}
三、面向对象的三大特征(封装/继承/多态)
在进入正题前，先了解传统的面向对象编程（例如 Java）中常会 涉及到的概念，大致可以包括：
类：定义对象的特征。它是对象的属性和方法的模板定义。
对象（或称实例）：类的一个实例.
属性：对象的特征，比如颜色、尺寸等。
方法：对象的行为，比如行走、说话等.
构造函数：对象初始化的瞬间被调用的方法。
继承：子类可以继承父类的特征。例如，猫继承了动物的一般特性。
封装：一种把数据和相关的方法绑定在一起使用的方法。
抽象：结合复杂的继承、方法、属性的对象能够模拟现实的模型。
多态：不同的类可以定义相同的方法或属性。
在 JavaScript 的面向对象编程中大体也包括这些。不过在称呼 上可能稍有不同，例如，JavaScript 中没有原生的“类”的概念， 而只有对象的概念。因此，随着你认识的深入，我们会混用对象、实 例、构造函数等概念。
对象（类）的创建
在 JavaScript 中，我们通常可以使用构造函数来创建特定类型的对
象。诸如 Object 和 Array 这样的原生构造函数，在运行时会自动 出现在执行环境中。此外，我们也可以创建自定义的构造函数。
封装性 (优点:减少代码的冗余,优化代码,可以重复 使用功能相同的代码,安全性,只有当前的对象才可以访问,为了后期的可维护性以及程序的可重用性)
对象是将数据与功能组合到一起, 即封装
(1)js 对象就是 键值对的集合
键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性
如果键值是函数, 那么就称为方法
(2)对象就是将属性与方法封装起来
(3)方法是将过程封装起来
继承性
所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西
传统继承基于模板(子类可以使用从父类继承的属性和方法)
即：让某个类型的对象获得另一个类型的对象的属性的方法
js 继承基于对象
在 JavaScript 中，继承就是当前对象可以使用其他对象的方法和属性.
浙公网安备 33010602011771号