JavaScript简单入门(补充篇)

Posted 2020-10-12 风之之

本文是对上一篇 javascript简单入门 的一些细节补充。

一、全局变量和局部变量

在<script>标签内定义的变量是当前页面中的全局变量。即 <script>标签可以直接访问其他<script>标签定义的变量。而在函数体中定义的变量则为局部变量。如：

1 <script type="text/javascript">
2 var x = 1;//全局变量
3 function show(x){//局部变量
4 x = ++x;
5 return x;
6 }
7 show(x);
8 document.write("x="+x);
9 </script>

所以输出的x = 1;而不是2。

二、常见对象

1、object对象：为js对象提供通用方法。如toString()方法：返回对象的字符串形式。

2、String对象：用于处理文本（字符串），String对象为字符串提供了许多方法。

①字符串是 JavaScript 的一种基本的数据类型。String 对象的 length 属性声明了该字符串中的字符数。String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

②用户可以使用已有的方法来增加自定义方法，如：去掉字符串两端的空格：

 1 <script type="text/javascript">
 2     function trim(str){
 3         var start,end;
 4         start = 0;
 5         end = str.length-1;
 6             
 7         while(start <= end && str.charAt(start)==\' \'){
 8             start++;
 9         }
10         while(start <= end && str.charAt(end)==\' \'){
11             end--;
12         }
13         return str.substring(start,end+1);//包含头不包含尾。
14     }
15 </script>

③String的原型：String.prototype

使用原型属性可以向对象添加属性和方法。添加的新方法或新属性，那么字符串对象就都具有了这些新方法。如：

<script type="text/javascript">
    //使用String原型添加自定义方法haha()：
    String.prototype.haha= function(){
        var start,end;
        start = 0;
        end = str.length-1;
            
        while(start <= end && str.charAt(start)==\' \'){
            start++;
        }
        while(start <= end && str.charAt(end)==\' \'){
            end--;
        }
        return str.substring(start,end+1);//包含头不包含尾。
    }
//然后字符串对象就可以调用haha()这个方法了。

3、Array对象：数组对象

方法如：concat()：返回一个新数组，这个新数组是由两个或更多数组组合而成的。

4、date对象：日期对象

启用基本存储器并取得日期和时间。

5、Math对象：是一个固有对象，提供基本数学函数和常数。不用new创建对象可以直接调用。

6、Number对象：代表数值数据类型和提供数值常数的对象。

7、自定义对象

在js中可以使用function来模拟对象的创建过程。

方式1：

 1 <script type="text/javascript">
 2     //自定义Person对象
 3     function Person(){//相当于构造器
 4     
 5     }
 6     //通过描述直接进行对象的建立
 7     var p = new Person();
 8     var name = "张三";
 9     var age = 20;
10     p.show = function(){
11         document.write(name+":"+age);
12     }
13     
14     p.show();
15 </script>

方式2：

 1 <script type="text/javascript">
 2     //自定义Person对象
 3     function Person(name,age){//相当于构造器
 4         this.name = name;
 5         this.age = age;
 6         this.setName = function(name){
 7             this.name = name;
 8         }
 9         this.setAge = function(age){
10             this.age = age;
11         }
12         this.show = function(){
13             document.write(this.name+":"+this.age);
14         }
15     }
16     
17     var p = new Person("张三",22);
18     p.setName("哈哈");
19     p.setAge(20);
20     p.show();
21 </script>

方式3：另一种封装方式：

 1 <script type="text/javascript">
 2     var pp = {
 3         //定义对象(逗号隔开)
 4         "name":"李四",
 5         "age":20,
 6         "show":function(){
 7             return this.name+":"+this.age;
 8         }
 9     }
10     
11     document.write(pp.show());
12 </script>

方式4：等等

三、特殊语句:with

with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意 Math 的重复使用：

1 x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10) 
2 y = Math.tan(14 * Math.E)

当使用 with 语句时，代码变得更短且更易读：

1 with (Math){
2    x = cos(3 * PI) + sin (LN10)  
3    y = tan(14 * E)
4 }