威尼斯www.9778.com-威尼斯正版官方网站

JavaScript 类的定义和引用 JavaScript高级培训 自定义对象_js面向对象_脚本之家

日期:2019-12-25编辑作者:服务器&运维

一,概述

 

在Java语言中,大家得以定义自个儿的类,并依赖这几个类创制对象来行使,在Javascript中,我们也足以定义本身的类,举个例子定义User类、Hashtable类等等。

生龙活虎、基本概念

一时在Javascript中,已经存在一些正经的类,譬喻Date、Array、RegExp、String、Math、Number等等,那为大家编制程序提供了好Dolly于。但对此复杂的客商端程序来讲,那几个还相当不足。

1,自定义对象。
     依据JS的对象扩大机制,客户能够自定义JS对象。与自定义对象相呼应的是JS标准对象,比方Date、Array、Math等等。
2,原型(prototype)
     在JS中,那是豆蔻梢头种创造对象属性和形式的措施,通过prototype可认为对象增添新的习性和办法。通过prototype我们得以为JS规范对象增加新的天性和章程,举个例子对于String对象,大家得认为其丰硕二个新的方法trim()。大家能够在运维时期为JS对象动态增加新的性质。

与Java差异,Java2提要求我们的规范类超级多,基本上满足了我们的编制程序必要,但是Javascript提供的标准类少之甚少,好多编制程序供给需求我们友好去达成,举个例子Javascript没有哈西表Hashtable,那样的话在拍卖键值方面就非常不便民。

 

进而,作者个人感到叁个完全的Javascript对象视图应该如下:

二、语法法规

二,基本概念

   1、对象创造形式

1,自定义对象。依照JS的目的扩充机制,客户可以自定义JS对象,那与Java语言有左近之处。与自定义对象相呼应的是JS标准对象,举例Date、Array、Math等等。2,原型在JS中,那是生龙活虎种创造对象属性和章程的办法,通过prototype可以为指标增多新的性质和艺术。通过prototype大家可以为JS标准对象增加新的习性和格局,比如对于String对象,大家可感觉其拉长一个新的章程trim分化,大家得以在运转时期为JS对象动态增加新的品质。

      1)对象开端化器形式
          格式:objectName = {property1:value1, property2:value2 , … , propertyN:valueN}
              property:对象的天性
              value:对象的值,值能够是字符串、数字或对象三者之豆蔻梢头

三,语规则则

        //例:初始化User对象
        var user1 = { name: "user1", age: 18 };
        alert(user1.name);

1,对象创设形式

 

1)对象带头化器方式

       //例,初步化对象
        var user = { name: "User1", job: { salary: 3000, title: "programmer"} };
        alert(user.job.salary);

格式:objectName = {property1:value1, property2:value2,…, propertyN:valueN} property是目的的属性value则是目标的值,值能够是字符串、数字或对象三者之少年老成比方: var user={name:“user1”,age:18}; var user={name:“user1”,job:{salary:3000,title:programmer}以这种办法也足以初步化对象的措施,比方: var user={name:“user1”,age:18,getName:function(卡塔尔{ return this.name; } }后边将以构造函数格局为重中之重开展讲授,包括属性和议程的定义等等,也本着构造函数的方法实行教学。

     

2)布局函数形式

        //例、初始化User对象
        var user2 = { name: "user1", age: 18, getName: function () { return this.name; } };
        alert(user2.getName());  

编制二个构造函数,并由此new格局来创造对象,构造函数本得以满含结构参数举例:function User{ this.name=name; this.age=age; this.canFly=false; } var use=new User(卡塔尔国;

 

2,定义对象属性

       前边将以布局函数情势为根本拓宽教学,包涵属性和办法的定义等等,也针对构造函数的章程进行教学。

1)JS中可以为对象定义三体系型的质量:私有属性、实例属性和类属性,与Java相仿,私有属性只好在对象内部使用,实例属性必须经过对象的实例举办援引,而类属性能够一向通过类名进行援用。

 

2)私有属性定义私有属性只可以在布局函数内部定义与行使。语法格式:var propertyName=value;比方:function User{ this.age=age; var isChild=age<12; this.isLittleChild=isChild; } var user=new User; alert;//正确的办法 alert;//报错:对象不帮衬此属性或情势

      2)布局函数模式

3)实例属性定义,也存在二种方法:prototype格局,语法格式:functionName.prototype.propertyName=valuethis方式,语法格式:this.propertyName=value,注意后边例子中this使用的岗位上边中value能够是字符创、数字和指标。比方:function User(卡塔尔国{ }User.prototype.name=“user1”;User.prototype.age=18;var user=new User;—————————————–function User{ this.name=“user1”; this.age=18; this.job=job; } alert类属性定义语法格式:functionName.propertyName=value举例:function User(卡塔尔{ }User.MAX_AGE=200;User.MIN_AGE=0;alert;参考JS标准对象的类属性:Number.MAX_VALUE //最大数值 Math.PI //圆周率

      编写二个构造函数,并经过new格局来创立对象,布局函数本得以饱含布局参数

4)对于属性的概念,除了上边前蒙受比标准的法子外,还恐怕有大器晚成种极其非常的概念形式,语法格式: obj[index]=value例子: function User{ this.name=name; this.age=18; this[1]=“ok”; this[200]=“year”; } var user=new User; alert; 在下边例子中,要静心:差别通过this[1]来得到age属性,也不可能因而this[0]来收获name属性,即透过index方式定义的总得利用index格局来引用,而从不经过index方式定义的,必得以寻常艺术援用

        //编写构造函数
        function User(name, age) {
        //this.name:表示对象的属性
        this.name = name;
        this.age = age;
        this.canFly = false;
        }

3,定义对象方法

        //成立对象
        var user1 = new User("aaa", 100);
        alert(user1.name);

1)JS中可以为对象定义三体系型的点子:私有方法、实例方法和类情势,与Java相像:私有方法只好在对象内部选择实例方法必需在目的实例化后能力运用类措施能够直接通过类名去行使注意:方法的概念无法经过后面所说的index方式张开。2)定义私有方法私有方法必需在布局函数体钦赐义,并且只好在结构函数体内使用。语法格式:function methodName{ }举个例子:function User{ this.name=name; function getNameLength{ return nameStr.length; } this.nameLength=getNameLength定义实例方法,如今也能够动用三种情势:prototype方式,在布局函数外使用,语法格式:functionName.prototype.methodName=method;也许functionName.prototype.methodName=function{};this情势,在布局函数内部选取,语法格式:this.methodName=method;可能this.methodName=function{};上边的语法描述中,method是外表已经存在的叁个情势,methodName要定义的靶子的措施,意思就是将表面包车型大巴一个方法直接赋给对象的某部方法。以function{}的艺术定义对象方法是开采职员应该调节的。

 

概念实例方法的生龙活虎对例子:例子1function User{ this.name=name; this.getName=getUserName; this.setName=setUserName;}function getUserName(卡塔尔(英语:State of Qatar){ return this.name;}Function setUserName{ this.name=name;}

  2、定义对象属性
    1)JS中可感觉对象定义三种类型的习性:私有属性、实例属性和类属性。

概念实例方法的有的例子:例子2function User{ this.name=name; this.getName=function(卡塔尔(قطر‎{ return this.name; }; this.setName=function{ this.name=newName; };}

        私有属性只好在目的内部接受。

概念实例方法的有的例子:例子3function User{ this.name=name;}User.prototype.getName=getUserName;User.prototype.setName=setUserName(卡塔尔(英语:State of Qatar);function getUserName(卡塔尔国{ return this.name;}Function setUserName{ this.name=name;}

        实例属性必须透过对象的实例进行引用。

概念实例方法的局地例子:例子4function User{ this.name=name;}User.prototype.getName=function(卡塔尔(英语:State of Qatar){ return this.name;};User.prototype.setName=function{ this.name=newName;};

        类属性能够直接通过类名进行引用。(也正是c#静态属性或变量)

4)定义类方法类方法须求在构造函数外面定义,能够直接通过布局函数名对其进展引用。语法格式:functionName.methodName=method;只怕functionName.methodName=function{};例子:function User{ this.name=name; } User.getMaxAge=getUser马克斯Age; function getUserMaxAge(卡塔尔(英语:State of Qatar){ return 200; } 可能 User.get马克斯Age=function(卡塔尔(英语:State of Qatar){return 200;}; alert;

    2)私有属性定义
        私有属性只好在布局函数内部定义与应用。
        语法格式:var propertyName=value;

4,属性与方法的引用

        //例、私有属性
        function User(age) {
        this.age = age;
        //定义私有属性,私有属性只可以在对象内部采取,
        var isChild = age < 12;
        this.isLittleChild = isChild;
        }

1)从可以预知性上说:私有属性与艺术,只好在对象内部援用。实例属性与情势,能够在任哪里方采用,但必需经过对象来引用。类性质与办法,能够在此外地点选择,但不可能通过对象的实例来援用(那与Java分歧,在Java中静态成员能够经超过实际例来访问)。2)从目的档案的次序上说:与Java bean的引用肖似,能够拓宽深档期的顺序的引用。两种方法:轻松属性:obj.propertyName对象属性:obj.innerObj.propertyName索引属性:obj.propertyName[index]对此更加深档期的顺序的援引与地点相符。3)从概念方式上说:通过index格局定义的性质,必须透过index格局手艺引用。通过非index方式定义的性子,必得通过正规的措施展技术能援引。其它注意:对象的艺术不能够经过index情势来定义。

        var user = new User(15);
        alert(user.isLittleChild);

5,属性与办法的动态增删1)对于曾经实例化的目的,大家得以动态增删它的属性与艺术,语法如下:动态扩张对象属性obj.newPropertyName=value;动态增添对象方法 obj.newMethodName=method或然=function{}动态删除对象属性 delete obj.propertyName动态删除对象方法 delete obj.methodName2)例子: function User{ this.name=name; this.age=18; } var user=new User; user.sister=“susan”; alert;//运维通过 delete user.sister; alert;//报错:对象不补助该属性

 

user.getMotherName=function(卡塔尔国{return “mary”;} alert;//运维通过 delete user.getMotherName; alert;//报错:对象不援救该措施

    3)实例属性定义,也存在二种艺术:
         prototype情势,语法格式:functionName.prototype.propertyName=value。
         this方式,语法格式:this.propertyName=value,注意后边例子中this使用的地点。
         上边中语法格式中的value能够是字符创、数字和对象。

四,总结

        //prototype方式
        function User() { };
        //实例属性
        User.prototype.name = "user1";
        User.prototype.age = 18;
        var user = new User();
        alert(user.name);

1,自定义对象机制,是JS最为吸引人的体制之大器晚成,对于C++和Java技术员来讲,那差少之又少太棒了!2,对象创建存在二种艺术:对象开头化器和结构函数。3,对象属性和措施,具备可以预知性的牢笼,差别可以见到性的习性和艺术,其定义方式也不相近。

        //this方式
        function User(name, age) {
            //this格局的实例属性
            this.name = name;
            this.age = age;
        }

五,应用案例

 

上边将动用贰个施用案例:网购商号应用案例的落实步骤:1,场景设计

    4)类属性定义
        语法格式:functionName.propertyName=value

1)登陆现象

        function User() { };
        User.Max_Age = 200;
        User.Min_age = 0;
        alert(User.Max_Age);

2)购物场景

 

3)买单场景

    5)对于属性的定义,除了下面比较专门的工作的主意外,还也有黄金时代种相当非常的定义形式,语法格式: obj[index]=value

2,分界面设计

      function User(name) {
        this.name = name;
        this.age = 18;
        this[1] = "ok"; //以Index方式定义
        this[200] = "year";
        }
        var user = new User("user1");
        alert(user[1] +" "+ user[200]);

1)登陆页面

     注意:通过index格局定义的必需运用index方式来援引,而还未经过index方式定义的,必需以平时艺术援用。

2)购物页面

 

3)付账页面

  3、定义对象方法
    1)JS中可以为对象定义三连串型的法门:私有方法、实例方法和类格局:
         私有方法只可以在对象内部使用
         实例方法必须在目的实例化后技艺采纳
         类方法能够一直通过类名去行使。(也就是c#静态方法)
         注意:方法的定义不能通过前面所说的index情势进行。

3,类图设计

 

4,代码完结

    2)定义私有方法
        私有方法必需在组织函数体钦命义,並且只好在结构函数体内使用。
        语法格式:function methodName( arg1 , … , argN卡塔尔(قطر‎{ } 

1)Product类

        function User(name) {
        this.name = name;
        //私有方法
        function getNameLengh(nameStr) {
        return nameStr.length;
        }

2)ShoppingCart类

        this.nameLength = getNameLengh(this.name);
        }
        var user = new User("aaron");
        alert(user.nameLength);

3)ShoppingSession类

 

4)ShoppingCartParser类

    3)定义实例方法

原稿地址: Chen 。

        如今也得以选用三种情势:

        prototype方式,在布局函数外使用,语法格式:functionName.prototype.methodName=method;
                               或者 functionName.prototype.methodName=function(arg1,…,argN){};
        this方式,在布局函数内部使用,语法格式:this.methodName=method;
                               或者  this.methodName=function(arg1 , … ,argN){};
        下边包车型客车语法格式描述中,method是外表已经存在的叁个办法,methodName要定义的靶子的办法,意思便是将表面包车型大巴叁个措施直接赋给对象的某部方法。

         以function(arg1,…,argN卡塔尔{}的艺术定义对象方法是开辟人士应该调控的。  

        //prototype方式
        function User(name) {
        this.name = name;
        //实例方法。
        this.getName = getUserName;
        this.setName = function (name) { this.name = name; };
        }
        function getUserName() {
        return this.name;
        }

        var user = new User("aaron");
        alert(user.getName());

        //this方式
        function User(name) {
        this.name = name;
        this.getName = function () {
        return this.name;
        };
        this.setName = function (newName) {
        this.name = newName
        }
        }

        var user = new User("aaron");
        alert(user.getName());

 

        //定义实例方法别的的部分例证
        function User(name) {
        this.name = name;
        }
        User.prototype.getName = function () { return this.name; };
        User.prototype.setName = setUserName;
        function setUserName(name) {
        this.name = name;
        }

        var user = new User("Aaron");
        alert(user.getName());

  

    4)定义类方法
         类方法要求在构造函数外面定义,能够一向通过结构函数名对其开展引用。
         语法格式:functionName.methodName=method;
         或者 functionName.methodName=function(arg1 , … , argN){};

        //写法1
        function User(name) {
        this.name = name;
        }       
        User.getMaxAge = getUserMaxAge;
        function getUserMaxAge() {
        return 200;
        }
        alert(User.getMaxAge());

        //写法2
        function User(name) {
        this.name = name;
        }      
        User.getMaxAge = function () { return 200; };
        alert(User.getMaxAge());

  4、属性与方式的援引
    1)从可以知道性上说:
         私有总体性与方式,只好在对象内部援用。
         实例属性与措施,可以在另各市方使用,但必需经过对象来引用。
         类属性与措施,能够在别的地点使用,但不能够经过对象的实例来援引

 

    2)从目的等级次序上说:
        能够张开深等级次序的引用。三种格局:
           简单属性:obj.propertyName
           对象属性:obj.innerObj.propertyName
           索引属性:obj.propertyName[index]
          对于更加深档期的顺序的引用与地点相仿。

    3)从概念形式上说:
         通过index方式定义的性质,必须经过index格局能力援引。
         通过非index情势定义的质量,必得透过正规的格局才干援用。
         其它注意:对象的点子无法因此index格局来定义。

  5、属性与办法的动态增删
    1)对于已经实例化的目的,大家能够动态增删它的习性与办法,语法如下(假定对象实例为obj):
         动态扩张对象属性 obj.newPropertyName=value;
         动态增添对象方法  obj.newMethodName=method只怕=function(arg1,…,argN卡塔尔国{}
         动态删除对象属性  delete obj.propertyName
         动态删除对象方法  delete obj.methodName
   
    2)例子:

    function User(name){
             this.name=name;
             this.age=18;
    }
    var user=new User(“user1”);
    user.sister=“susan”;
    alert(user.sister卡塔尔(قطر‎;//运维通过
    delete user.sister;
    alert(user.sister卡塔尔国;//报错:对象不援救该属性

    user.getMotherName=function(){return “mary”;}
    alert(user.getMotherName(卡塔尔国卡塔尔(英语:State of Qatar);//运维通过
    delete user.getMotherName;
    alert(user.getMotherName(卡塔尔国卡塔尔(قطر‎;//报错:对象不协理该方法

 

 

摘自:

 

 

 

 

 

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:JavaScript 类的定义和引用 JavaScript高级培训 自定义对象_js面向对象_脚本之家

关键词:

编纂高品质的JavaScript 脚本的加载与奉行_javascript技术_脚本之家

本子能够放在html页面包车型大巴head里面,也得以投身body里面。把脚本放在body中,当浏览器遇见 1.今日写js境遇一个...

详细>>

js获取当前select 成分值的代码_表单特效_脚本之家

如果 select 元素 下的所有 option 元素均没有指定 selected属性,会默认选中第一个。 可以通过 select.selectedIndex 获取到选...

详细>>

jQuery EasyUI API 汉语文书档案 - Tabs标签页/选项卡_jquery_脚本之家

idstring标签面板idnulltitlestring标签面板的titlecontentstring标签面板的content.hrefstring面板远程加载进来数据的地址.nullcach...

详细>>

jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放

关键字“拖曳搜索”之“拖曳”功能需要 jQuery UI 之 droppable 库 效果如下: 搜索包含相关关键字时,把拖曳左边关键...

详细>>