javascript 面向对象编程

来源:互联网 发布:都玩网络手游 编辑:程序博客网 时间:2024/06/11 20:16

1.什么是对象

    对象就是一个整体,对外提供一些功能

2.什么是面向对象:

   比如我们使用对象时,只关注对象提供的功能,不关注其内部的细节与实现,

         例如:

              <script>

                      //矩形对象
                      function Rectangle(width,height){
                      this.width=width;
                      this.height=height;
                     //求面积的方法(具体的内部实现)
                       this.area=function(){
                                //alert(this.width);
                                //alert(this.width*this.height);
                               return this.width*this.height;
                       }
                   }
                 //使用/矩形对象时,只关注对象提供的功能,不关注其内部的细节与实现
                    var rectangle=new Rectangle(100,200);
                    alert(rectangle.area());

              </script>

而面向对象是一种通用思想,并非只有编程中能用任何事情都可以用

3.javascript中的面向对象

    (1)js面向对象编程(OO)的特点:

                    抽象:抓住核心问题(也就是把最主要的特征,跟问题相关的特征给抽出来)

                    封装:不考虑内部实现,只考虑功能实现(封装可分为两种一个是用对象的人不考虑内部实现只考了功能的实现,而写对象的人就考虑内部实现)

                    继承:从已有的对象上,继承出新的对象

    (2)对象的组成

                 方法---------函数:过程,动态的

                      例如:给arr数组添加一个方法

                       function abc(){         //函数:自由的

                               alert('abc');

                     }

                     var  arr=[1,2,3];

                     arr.abc=function(){          // abc方法属于arr这个对象的

                         alert('abc');

                     }

                属性----------变量:状态,静态的

                      例如:给arr数组添加一个属性a

                         var a=12;         //变量:自由的,不属于那个对象的

                         var  arr=[1,2,3];

                         arr.a=12;          //a属性:属于arr这个对象的

 4.javascript面向对象中的this

        先看这个例子:

               <script>

                     var arr=[1,2,3];

                     arr.a=12;

                      arr.show=function(){

                            alrrt(this.a);

                       }

              </script>

                 执行结果:

                    弹出12;

                判断this属于哪个对象记住一句话(当前的方法属于谁)。


5.javascript面向对象的工厂方式

       什么是工厂:原料、加工、出厂

      工厂方式:

              用构造函数创建一个类

               什么是类、对象(实例):模具和零件

          例子:已人这个类(对象)为例

              <script>

                           function cratePerson(name,qq){               //构造函数

                                  //原料

                                  var obj=new Object();

                                  //加工

                                   obj.name=name;

                                   obj.qq=qq;

                                   obj.showName=funciton(){

                                              alert('my me is '+this.name);

                                  }     

                                   obj.showQQ=function(){

                                               alert("my is QQ"+this.qq);

                                    }

                                   //出厂

                                 return obj;

                          }

                        var   obj=cratePerson("李永岩","1141672755");

                         obj.showName();

                         obj.showQQ();

                         var   obj2=cratePerson("张三","1141672756");

                         obj2.showName();

                         obj2.showQQ();

             </script>

            工厂方式存在的问题:

                  没有new、函数重复定义

            解决策略:

              加上new加上new了之后呢就偷偷的做了两件事替你创建了一个空白对象,替你返回了这个对象

                   <script>

                           function cratePerson(name,qq){               //构造函数

                                    //系统会偷偷的替我们创建一个空白对象

                                    //  如:var this=new Object()

                                   this.name=name;

                                   this.qq=qq;

                                   this.showName=funciton(){

                                              alert('my me is '+this.name);

                                  }     

                                   this.showQQ=function(){

                                               alert("my is QQ"+this.qq);

                                    }
                                    //也会偷偷的返回

                                   //return this                                
                          }

                        var   obj=new cratePerson("李永岩","1141672755");

                         obj.showName();

                         obj.showQQ();

             </script>

 6.javascript面向对象原型——prototype

        什么是原型:
                原型是class,修改他可以影响一类元素
                在已有对象中加入自己的属性、方法
                原型修改对已有对象的影响
         为Array添加sum方法
                给对象添加方法,类似于行间样式
                给原型添加方法,类似于class

                例如:

                                <script>
                                           var arr1=new Array(12,55,34,78,676);
                                           var arr2=new Array(12,33, 1);

                                            Array.prototype.sum=function ()    //相当于css的class
                                            //arr1.sum=function ()                //相当于css的行间样式
                                            {
                                                         var result=0;
    
                                                           for(var i=0;i<this.length;i++)
                                                           {
                                                                      result+=this[i];
                                                            }
    
                                           return result;
                                        };

                                       alert(arr1.sum());
                                       alert(arr2.sum());   
                                      </script>

        原型的小缺陷
                 无法限制覆盖