javascript对象

来源：互联网发布：origin怎么保存数据编辑：程序博客网时间：2024/06/06 01:53

面向对象

创建对象

JavaScript有一个内置对象Object，通过它来创建一个空白对象；

        myObj=new Object();

此时就得到了一个空白对象myObj(没有属性、没有方法)

添加属性：

myObj.info='i'm a shiny new object';

3.添加方法：

    //(1)首先定义一个方法    function myFun(){        alert(this.info);    }    //(2)然后把函数附加到对象    myObj.showInfo=myFun;

注意：关联函数到对象时，只使用了函数名，不包括（）；因为是把函数定义附给myObj.showInfo方法；如果后面带（），就变成了吧myFun函数的返回值赋给myObj.showInfo;

this关键字使用

在函数中使用this关键字，this表示该函数的“父对象”；函数生命时，它的父对象是全局对象window;就上面创建对象的代码而言，window对象并没用info属性，直接调用myFun()函数，会发生错误。对于showInfo()函数而言，它的父对象是myObj,所以this.info其实是指myObj.info;

匿名函数（为对象添加方法）

匿名函数即没有函数名称

//w为对象天加函数myObj.showInfo=function(){    ........    }

构造函数创建实例

只有一个全局实例的对象，称为“单例”对象。

如果要创建多个实例的对象，使用上面那种方法没创建一个实例，就要为其赋值属性与方法，太过于繁琐；

    <!doctype html>    <html>    <head>    <meta charset="utf-8">    <title>构造函数创建实例</title>    </head>        <script>            function myObj(){                this.info="你好";                this.showInfo=function(){                    alert(this.info);                    }                    this.setInfo=function(newInfo){                        this.info=newINfo;                        }                }                var obj=new myObj();                var obj1=new myObj();        </script>    <body>        <input type="button" value="调用第一个对象的showInfo（）" onClick="obj.showInfo()"/>       <input type="button" value="调用第二个对象的showInfo（）" onClick="obj1.showInfo()"/>       <input type="button" value="调用第二个对象的setInfo（）" onClick="obj1.setInfo('new Info')"/>    </body>    </html>

还可以为构造函数传参数(一个或者多个)如：

        function Person(name){            this.name=name;            this.setName=function(){                this.name=name;            }            this.showNmae=function(){.                    alert(this.info);            }        }        var p1=new Person('Lu');        var p2=new Person('Lin');

关键字prototype(扩展和继承对象)

扩展对象

当一个对象实例化后，如果想使其具有新的方法和属性，使用关键字prototype，进行扩展

    <!doctype html>    <html>    <head>    <meta charset="utf-8">    <title>继承对象</title>    </head>        <script>           function Person(name){               this.name=name;               this.info='信息';               this.showInfo=function(){                   alert(this.info);                   }                   this.setInfo=function(newInfo){                       this.info=newInfo;                       }               }               var p1=new Person('张三');               var p2=new Person('李四');                //扩展方法               Person.prototype.sayHello=function(){                   alert(this.name+"say hello!");                   }        </script>    <body>        <input type="button" value="p1说" onClick="p1.sayHello()"/>        <input type="button" value="p2说" onClick="p2.sayHello()"/>    </body>    </html>

继承对象

继承是指从一种对象类型创建另一种对象类型，新对象类型继承老对象类型的属性和方法，还可以添加自己的方法和属性；

javascript中实现继承使用关键字：prototype

    <!doctype html>    <html>    <head>    <meta charset="utf-8">    <title>Prototype继承对象</title>    </head>        <script>            //1.创建Pet构造器，定义新的方法和属性            function Pet(){                this.animal="";                //this.name=name;                this.setName=function(name){                    this.name=name;                    }                this.showName=function(){                    alert(this.name);                    }                }                   //2.定义Dog构造器，定义新的方法和属性                function Dog(){                    this.beed="";                    this.setBeed=function(beed){                        this.beed=beed                        }                        this.showBeed=function(){                            alert(this.beed);                            }                    }                    //3.Dog对象继承Pet对象,现在就可以访问Dog的方法和属性，也可以访问继承Pet对象的方法和属性                    Dog.prototype=new Pet();                    var dog=new Dog();                    //dog.setName('章撒');                    //dog.setBeed('mm');                    //alert(dog.name+"is a"+ dog.beed);        </script>    <body>    </body>    <input type="button" value="dog调用dog方法" onclick="dog.setBeed('mm')"/>    <input type="button" value="dog调用继承方法" onClick="dog.setName('麻子')"/>    <input type="button" value="dog展示自己属性" onClick="dog.showBeed()"/>    <input type="button" value="dog展示继承属性" onClick="dog.showName()"/>    </html>

扩展javascript内置对象

比如扩展String方法，实现倒叙输出：

            <!doctype html>    <html>    <head>    <meta charset="utf-8">    <title>Javascript继承内置对象</title>    </head>        <script>        String.prototype.revord=function(){            var out='';            for(var i=this.length-1;i>=0;i--){                out+=this.substr(i,1);                }                return out;            }        </script>    <body>        <script>            var str=prompt("输入你的测试字符串：");            document.write(str.revord());        </script>    </body>    </html>

封装

封装：通俗来说，就是把数据隐藏在对象内部

对于JS来说，构造函数内部生命的变量、函数，只能在对象内部使用，对于对象外部来说是不可见的

如果要从外部访问这些变量和函数，需要在赋值是使用this关键字，表示这个方法或变量是属于对象的。不如：

        function Box(width,length,height){            function vol(a,b,c){                return a*b*c;            }            this.vol=vol(width,length,height);        }        Var box=new Box(1,2,3);        alert(vol(1,2,3));//不能访问，只在构造器内部可见        alert(box.vol);//可以正常访问

在上面的代码，不能访问vol(a,b,c)函数，因为我们并没有使用this关键字把函数设置为对象的，他只能在构造器内部可见，而box.vol属性，在外部是可以方法的，虽然该值视同vol()函数赋值的，该操作是在构造函数内部实现，因此是没问题的

0 0