• JavaScript 学习笔记(三)


    本章学习内容:

    1.数组的使用

    2.类和对象细节.

    3.this关键字的使用

    4.构造函数,成员函数的使用

    1.数组的使用

      在任何的语言中,必须要有的就是数组了,有了数组,使得很多操作都变得非常的方便。。JS里面也是包含着

    数组的,JS里的数组和JAVA里的数组在用法上基本相同,只是自己多了些特性。。。。下面来看一段代码。。。

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="javascript" type="text/javascript">
         //第一种创建方式
         var array=new Array();
         //var array=new Array(2);
         array[0]=1;
         array[1]="ab"; 
         array[2]="ac";
    //array[3]="ss"; for(var i=0;i<arr.length;i++) { document.write(array[i]); } //第二种创建方式 var array1=("java","c++","python"); for(var i=0;i<arr.length;i++) { document.write(array1[i]); } </script> </head> <body> </body> </html>

      上述涉及的只是数组的创建。。数组的创建可以有两种方式,其实上述注释部分,也是创建数组的方法。。

    区别在于,注释部分直接给出了数组的初始长度为3,但是我们知道JS是动态的语言,就算是我们指定了数组

    的初始长度,当我们存储的数据大于其长度的时候,JS仍然会动态的开辟新的地址空间,并不像java那样,

    一旦指定了数组的长度,那就不允许越界。。。

      相关数组的常用方法

    1.concat(Array1.conact(array2,array3))合并两个或者多个数组。。

    2.length()取数组的长度

    3.toString()把字符串转化为数组,并返回结果

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="javascript" type="text/javascript">
         //第一种创建方式
         var array=new Array();
         //var array=new Array(2);
         array[0]=1;
         array[1]="ab"; 
         array[2]="ac";
         document.writeln(array.toString());//转化为字符串
         var array1=new Array("java","c++","python");
         document.writeln(array.concat(array1));//合并两个数组
         document.write(array.length);
         for(var i=0;i<array.length;i++)//取length长度
         {
             document.write(array[i]);
         }
          
     
    </script>
    
    </head>
    
    <body>
    </body>
    </html>

      上面使用三种方法,这里只是简单的介绍了几个常用方法,后续还会说到数组的其他方法。。。我们可以

    看到,在合并了两个数组之后,两个数组的length并没有增加,并不是合并后数组的长度就会改变。。。。

    2.类和对象细节:

      JS中也是有类和对象的。。。

    <script language="javascript" type="text/javascript">
         person=new Object();//新建对象,并为对象添加属性
         person.firstname="Bill";
         person.lastname="Gates";
         person.age=56;
         person.eyecolor="blue";
         //第二种建立方式...定义一个构造函数
         function person1(firstname,lastname,age,eyecolor)
         {
             var name="ss";//私有的..
             this.firstname=firstname;//公有的
             this.lastname=lastname;
             this.age=age;
             this.eyecolor=eyecolor;
             this.show=function()//公有函数
             {
                 window.alert("...");
             }
         }
         per=new person1("tom","john",25,"yellow");
         document.writeln(per.firstname+" "+per.lastname+" "+per.age+" "+per.eyecolor);
         
    </script>

      很简单的实现了对象的创建...在建立了对象之后,我们可以直接为对象添加属性.也可以建立对象

    调用类方法。。我们可以看到,在JS中只有公有和私有两种权限,并且公有的成员或函数使用this关

    键字来实现的。

      补充个知识点。对象引用

    <script language="javascript" type="text/javascript">
         function person(){}
         var a=new person();
         a.name="小明";
         a.age="10";
         var b=a;
         b.name="小白";
    //此时对象的引用次数为2 window.alert(a.age
    +" "+a.name);//小白 10 window.alert(b.age+" "+b.name);//小白 10 b=null;//对象的引用次数为1 window.alert(a.age+" "+a.name);//小白 10 window.alert(b.age+" "+b.name);//undefined undefined
    a=null;//对象的引用次数为0(gc就启动了回收机制)
    </script>

     上面涉及的就是对象的引用。。。对象的引用就涉及到了一个GC(对象回收机制)。。a和b都指向了同一个地址。。

    这个地址在一个堆区中,堆区保存了这个对象的所有属性。。GC会根据对象的调用的次数来判断是否回收对象。。

    3.this关键字

    为了在建立对象的时候避免每次都为对象分配变量。。。因此使用this关键字。。。

    <script language="javascript" type="text/javascript">
         function person()
         {
             this.name="abc";
    //var name="sss";
    this.age="10"; } var p1=new person(); var p2=new person(); p2.name="ss";//改变了p2的值不会影响到p1 document.write(p1.name+" "+p2.name); </script>

     这样就在每次建立对象的时候实现了对象的初始化。。。并且this关键字的使用使得person中的成员编程公有的。。我们

    可以在外部进行访问。。。在外部其实也是可以访问私有成员的。。我们只需要在person内部中定义一个this的公有函数,

    然后在内部调用函数,我们就可以访问其中的私有成员了。。

    总而言之一句话就是:哪个对象实例调用this所在的函数,那么this就代表哪个对象。。

    <script language="javascript" type="text/javascript">
          function test()//函数默认为window对象
          {
              alert(this.v);
          }
          var v=90;
          test();//输出90
    </script>

    上面代码输出结果为90.那么调用了test()<==>window.test(),就代表调用了window对象。。this.v就代表window.v<==>var v。。

    注意:this只能在类中使用。。不能在外部使用。。。

    4.构造函数以及成员函数

    <!DOCTYPE html>
    <html>
    <head>
    <B>CONSTRUCTOR AND PROTOTYPE<br><br></B>
    </head>
    <body>
    <script type = "text/javascript">
        /*************************CONSTRUCTOR**********************/
        var Person = function(name){
            this.name = name;
        };
        
        var Person = function(name, age){
            this.name = name;
            this.age = age;
        };
        
        /*************************PROTOTYPE************************/
        
        Person.prototype.getName = function(){    //member function: getName();
            return this.name;
        };
        
        Person.prototype.getAge = function(){     //member function: getAge();
            return this.age;
        };
        
        /********************TEST**********************************/
        
        var person1 = new Person("John");   // use constructor 1 @param: name
        
        var person2 = new Person("Peter",2); // use constructor 2 @param: name, age
        
        document.write("person1=>name: " + person1.getName() + ", Person1=>age: " + person1.getAge() + "<br>");
        
        document.write("Person2=>name: " + person2.getName() + ", Person2=>age: " + person2.getAge() + "<br>");
        
    </script>
    </body>
    
    </html>
    
    
    其中prototype部分形式还可以是,
    
        /*************************PROTOTYPE************************/
        Person.prototype = new Object({
            getName: function(){
                return this.name;
            },
            getAge: function(){
                return this.age;
            }
        });

      

      

      

      

  • 相关阅读:
    Qt发送事件与自定义事件
    Qt文本流和数据流
    Qt文件操作
    Qt 布局管理器
    Qt 标准对话框
    Qt 对话框QDailog及其类型
    Qt 对象间的父子关系
    Qt 信号与槽
    Qt 计算器界面实现
    C++ 多态、虚函数(virtual 关键字)、静态联编、动态联编
  • 原文地址:https://www.cnblogs.com/RGogoing/p/4403011.html
Copyright © 2020-2023  润新知