JS的高级知识点（对象，面向对象，面向过程）

什么是对象

对象: 万事万物都是对象

     (1)对象是一个单独的事物
    （2）对象是一个封闭的容器，这个容器包含了属性和方法
         是对象功能和属性的封装
    （3）对象函数的优点：
          重复使用，简化代码，方便维护，开发率高
     (4)对象是抽象化的要实例化对象    
    （5）函数是对象，但是对象不一定是函数        

在JavaScript中对象

JS中的对象

（1）js中的对象是键值对的集合key：value
通过对象名称.key 获取key对应的值value
（2）传统的方法/强类型中的方法
(3)JS中经典的模拟对象的方式/字面量的方式
（4）访问对象的属性 .
eg：student.name.small
（5）访问对象的方法 .
eg：student.run.xiao()

JS中面向对象的理解以及使用;

（1）面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功
eg：指挥别人去做某事
（2）JS中面向对象使用

  eg：var a={
                     name:'张三',
                     age:30,
                     jop:演员，
                     run：function（）{
                     alert('加油你是最棒的');
                     }
               }
               a.run();//调用

eg：案例2

<script type="text/javascript">
//对象是一个容器，用来封装属性和方法的
//键值对的集合key:value,先用var关键字定义
window.onload=function(){
//窗口加载事件
   //面向对象方式
   //获取标签的的元素
   var inlett={
   	  Yuansu:{
//	   	  	  id:function(myid){
//	   	  	    return document.getElementById(myid);
//	   	  },
   	  tag:function(mytag){
   	  	return document.getElementsByTagName(mytag);
   	  }//,
//	   	  Class:function(myclass){
//	   	  	return document.getElementsByClassName(myclass)
//	   	      }
   	  },
   	  Styles:{
   	  	  styletag:function(Tag){
   	  	  	 for (var a=0;a<Tag.length;a++) {
   	  	  	 	if(a==0||a==2){
   	  	  	 	Tag[a].style.width=300+'px';
   	  	  	 	Tag[a].style.height=300+'px';
   	  	  	 	Tag[a].innerHTML='加油！'
   	  	  	 	Tag[a].style.border='20px solid green';
   	  	  	 	}else{
   	  	  	 	Tag[a].style.width=500+'px';
   	  	  	 	Tag[a].style.height=150+'px';
   	  	  	 	Tag[a].style.border='30px solid pink';
   	  	  	 	}
   	  	  	 }
   	  	  },//一定记得加逗号
   	  	  stylespan:function(styspan){
   	  	  	for (var b=0;b<styspan.length;b++) {
   	  	  	styspan[b].style.display='inline-block';
   	  	  	styspan[b].style.width=200+'px';
   	  	  	styspan[b].style.height=200+'px';
   	  	  	styspan[b].style.border='20px solid red';
   	  	  	}
   	  	  },
   	  	  stylehhh:function(hhh){
   	  	  	hhh.style.border='20px solid pink';
   	  	  	hhh.style.width=200+'px';
   	  	    hhh.style.height=200+'px';
   	  	    var n=document.createElement('div');
   	  	    k.appendChild(n);
   	  	    n.style.width=100+'px';
   	  	    n.style.height=100+'px';
   	  	    n.style.border='5px solid red';
   	  	    hhh.style.background='linear-gradient(red,pink,blue)';
   	  	  },
   	  	  stylepp:function(pp){
   	  	  	for (var e=0;e<pp.length;e++) {
   	  	  	pp[e].style.border='20px solid red';
   	  	  	pp[e].style.width=400+'px';
   	  	    pp[e].style.height=400+'px';
   	  	    pp[e].innerHTML='hh加油！'
   	  	  	}
   	  	  }
   	  }
   }
   //调用元素
   //div元素
   var i=inlett.Yuansu.tag('div');
inlett.Styles.styletag(i);


//span元素
var j=inlett.Yuansu.tag('span');
inlett.Styles.stylespan(j);

var k=inlett.Yuansu.tag('h3')[0];//只有一个可以直接写[0]
inlett.Styles.stylehhh(k);

var f=inlett.Yuansu.tag('p');
inlett.Styles.stylepp(f);
}

</script>

JS中面向过程的理解

（1）理解：面向对象关注的是实现功能的步骤，所有的工作都是现写现用。，也就是主要是看自己做的过程。

总结

面向过程是自己做事，面向对象是指挥或让别人做事