JavaScript面向对象的初步理解

面向对象

• 面向过程就是亲力亲为,事无巨细,面面俱到,步步紧跟
• 面向对象就是找一个对象,通过指挥得到结果
• 面向对象就是将执行者转变成指挥者的思维转变
• 面向对象不是面向过程的替代,而是面向过程的封装

面向对象的特性

1. 抽象性
2. 封装性
3. 继承性

js是一个基于对象的多范式的编程语言,js中所谓的对象就是键值对的集合

如{name:"chen",age:18,sex:"男"}

抽象性

1. 抽取核心数据,剔除无关属性和行为组成一个对象.
2. 对象不在特定的环境不能明确指明到底是啥

封装性

• 对象就是将数据和功能组合在一起即封装

• js中对象就是键值对的集合

  • 键值如果是数据(基本数据,复合数据,空数据)就称为属性
  • 键值若是函数则称为方法

• 对象就是将属性和方法封装起来,方法就是将过程封装起来

继承性

• 自己没有但别人有的,拿过来成为自己的,为自己所有叫继承
• 继承是实现复用的一种手段
• js中没有明确的继承语法,一般都是按照继承的理念来实现继承,达到对象的成员扩充
• 因此,js中实现继承的方式非常多,其中最简单的方法叫混入(mix)

function mix(o1,o2){    for(var k in o2){        o1[k]=o2[k];    }}var o1={name:"chen"};var o2={age:18};mix(o1,o2);

面向对象思维

• 首先找对象
• 任何操作都交给对象完成

案例

面向过程做法

var div=document.createElement("div");//创建一个`div标签`document.body.appendChild(div);// 将div加入到页面中div.style.boder="1px solid red";//设置div样式div.style.width="400px";div.style.height="300px";

面向对象方式思考

• 抽取对象(div和body是对象)
• 分析属性和方法(加到,设置样式)

初级面向对象

function DivTag(){      this.myDiv=document.createElement("div");//创建div      this.addToBody=function(node){//把div添加到节点          node.appendChild(this.myDiv);      };      this.addStyle=function(name,value){//为div添加样式            this.myDiv.style[name]=value;      };      this.addCss=function(option){//添加样式的方便写法            for(var k in option){                this.myDiv.style[k]=option[k];            }      };  }var divTag=new DivTag();divTag.addToBody(document.body);//把div加入到body中divTag.addStyle("width","400px");      ...divTag.addCss(//通过传入对象形式数据修改div样式   { "boder":"1px solid red",     "height":"200px"   });

中级面向对象

function DivTag(){    this.myDiv=document.createElement("div");    this.addToBody=function(node){        node.appendChild(this.myDiv);        return this;//这步很关键,让同一个对象可以连续调用多个方法    };    this.addCss=function(option){        for(var k in option){            this.myDiv.style[k]=option[k];        }        return this;//    };}  new DivTag().addToBody(document.body).addCss({//封装性更高,更加简洁   width:"100px",   height:"39px",   boder:"1px solid blue"  });

总结

        通过以上三种方式实现同一案例的过程,把js面向对象的特性的优点展现的淋漓尽致,传统的面向过程的方法中,需求要啥就去干啥,一步一步的循规蹈矩的实现,若要创建多个div,则所有步骤都要重新再执行一遍,缺点不言而喻;

        若按照面向对象的方法来处理,则先div的创建,加入到节点中,添加样式,等三大功能都放入到相应的函数中执行,然后再创建相应的对象,用对象来调用相应的方法来完成相应的功能,如此一来,若要新建div,只需多创建一个对象罢了,代码复用性大大提高,而且若数据封装性越高,则面向对象的程度越高,你想干啥就干啥,真正的达到为所欲为.这就是当老板指挥员工干活和自己当员工事事亲为的差别吧,当然再怎么面向对象,到最底层总要有相应的代码当员工,事事亲为,要不然怎么说面向对象不是面向过程的替代,而是面向过程的封装