JavaScript面向对象基础：字符串、日期、数组与函数对象详解

JavaScript面向对象基础概念

简而言之，编程语言中的对象是对现实事物的抽象与简化。以人为例，由于现实人物过于复杂，程序无法完全描述，因此我们需要进行简化：将人抽象为属性与行为的集合，并仅保留对程序有意义的部分。例如，在统计学校人员身高的程序中，我们可以忽略人的行为，仅保留“身高”这一属性，从而构建出一个最简化的对象模型。

JavaScript字符串对象详解

对象的属性

实际上，我们在HTML DOM操作中早已接触到了对象。例如，DOM节点包含nodeName、nodeType等信息，这些即为节点对象的属性。接下来，我们将以字符串为例，深入探讨对象属性的具体应用。

字符串的属性

定义字符串变量var s = "我有个7个字符"后，系统便创建了一个字符串对象。该对象内置了length属性，用于表示字符串长度，无需手动定义即可直接访问。

s.length点击下面的按钮看看字符串的长度。

alert(s.length)

字符串对象的方法(行为)

对象同样具备行为（方法）。以字符串对象为例，我们可以调用方法获取指定位置的字符，这便是一种行为。通过后续按钮可以直观体验字符串的各种属性与方法，文末将详细解析各方法的具体用法。

 
<script type="text/javascript">
var s = "我有个7个字符";var str = "字符" + "串"; //两个字符串相加
alert(str)
</script>

使用字符串的length属性为字符串的长度。

alert(str.length)

使用charAt方法返回指定位置的字符。

alert(str.charAt(0))

alert(str.charAt(1))

substring方法从字符串中截取一个子字符串。

alert(str.substring(0,2))

indexOf返回字符串中指定字符或字符串的位置，如果字符不存在就返回-1。

alert(str.indexOf('符')

lastIndexOf方法返回一个字符串中某字符最后一次出现的位置。

JavaScript Date对象应用

实例JavaScript date代码

我们先来看一段使用了date对象的JS代码。点击下面的几个按钮就可以看到各个变量的值了。

 
<script type="text/javascript">
var today = new Date(); //新建一个Date对象
var todayStr = today.toString();//把日期转化为字符串
var todayLocal = today.toLocaleString();//转换为本地字符串
var date = today.getDate();//查询当月日期
var day = today.getDay();//查询当前星期几
var month = today.getMonth();//查询月份
var year = today.getFullYear();//查询年份
alert(todayStr);
alert(todayLocal);
alert(date);
alert(day);
alert(month);
alert(year);
</script>

我们使用如下这个语句来创建一个Date对象。

var today = new Date();执行之后，today变量里就保存了创建的Date对象。

字符串对象的方法(行为)

JavaScript date对象查询（get）方法

JavaScript date对象设置（set）方法

JavaScript date对象转换（to）方法

JavaScript Date对象应用实例——时钟代码

本代码转自w3schools.com。

 
<script type="text/javascript">
function startTime(){var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();//当数字小于10的时候在前面加一个0
m=checkTime(m);s=checkTime(s);
document.getElementById('clock').innerHTML=h+":"+m+":"+s;//每隔500毫秒重新执行一次
startTimet=setTimeout('startTime()',500);}
function checkTime(i){
if (i<10){
i="0" + i;
} 
return i;
} 
</script>

JavaScript数组对象操作

创建一个JavaScript数组

 
<script type="text/javascript">
//笨方法
var arr = new Array("HTML","CSS","JavaScript","DOM");
//省事一点的方法
var arr = ["HTML","CSS","JavaScript","DOM"];
与字符串对象一样，数组也有一个length属性，不过它的意思是数组包含元素的个数。点击下面的按钮可以看到arr的长度为4。
alert(arr.length)
</script>

下面是一段简单的使用数组的JS代码，可以点击后面的按钮来观察各个变量的值。

 
<script type="text/javascript">
var arr = new Array("HTML","CSS","JavaScript","DOM");
var arr2 = new Array("ASP.NET","PHP","J2EE","Python","Ruby");
var joinArr = arr.join();
var bigArr = arr.concat(arr2);
var sortArr = bigArr.sort();
</script>

arr[n]返回数组指定位置的元素，n叫做下标，从0开始。 可以点击下面的按钮来查看arr各个位置上的元素。

 
alert(arr[0]) //位置0，也就是第一个元素
alert(arr[1])
alert(arr[2])
alert(arr[3])

从上面的代码可以看到，在调用了数组的几个方法之后得到了joinArr、bigArr、sortArr这几个变量，这些方法将在后面具体介绍。可以先观察变量的值来猜猜这些方法的作用。

JavaScript数学对象Math

数学对象

例JavaScript Math代码

 
<script type="text/javascript">
var num = Math.PI;
var rNum = Math.round(num);//四舍五入
</script>

我们首先吧Math.PI的值保存在num中，这是一个JS内置的常量，可以点击下面的按钮来查看它的值。

alert(num)

rNum则是num经过四舍五入的值。

alert(rNum)

random方法则产生一个0-1之间的随机值。试着多点击几次下面的按钮，可以发现得到的数字会不断改变。

alert(Math.random())

JavaScript函数对象核心方法

函数对象

在JavaScript中，函数也是对象，我们使用下面以下语句定义一个函数的时候，其实是定义了一个Function类型的对象。

 
function add(a,b){
return a+b;
} 

为了说明这个问题，我们可以使用Function的构造函数来定义一个add函数：

 
<script type="text/javascript">
var add = new Function('a','b','return a+b');
alert(add(1,2));
</script>

使用这种方法定义的函数和上面的函数完全一样，不过这种语法比较麻烦，一般不会使用。

（函数）Function对象的call方法

call是一个非常有用的方法，它可以控制函数的运行环境，即控制函数内部this所指向的对象。下面的例子可以说明这个问题：

function whatsThis(){ alert(this); }我们调用以上函数的时候，将会看到this指向的是window，实验一下：

whatsThis()

但是如果使用call，我们则可以控制函数内部this的指向，例如：

whatsThis.call(document)()

以上代码使用function对象的call方法将函数内部的this指向了document。

如果原来的函数需要接受参数，例如add函数，可以使用如下形式：

add.call(document,1,2)也就是说，call的第一个参数是要绑定给this的对象，而1和2则是原来的add函数需要接受的参数。

（函数）Function对象的apply方法

apply的使用方法与call基本一致，只是参数是以数组的形式传递的，还是以add函数为例：

add.call(document,[1,2])可以看到，原函数add需要接受的两个数字参数是以一个数组的形式传递进apply的。

（函数）Function对象的caller属性

function whoCalls(){ alert(whoCalls.caller); } function SheCalls(){ whoCalls(); }whoCalls()SheCalls()

使用caller属性，可以了解谁调用了当前函数。注意，只有在函数体内部caller才有效。

（函数）Function对象的arguments属性

javascript的函数可以接受任意数量的参数，所以定义的时候，参数的个数作并不会限制函数的这个能力。在函数中，我们可以使用arguments来访问传入函数的参数，例如：

function howmany(){ var num = arguments.length; alert(num); }howmany函数会输出传递如函数参数的个数，点击下面的连个按钮试验一下。

howmany(1,2,3,4)howmany(1,2,3,4,5,6,7,8)

函数arguments.callee

我们已经知道function会有arguments属性，而arguments.callee则是当前正在执行的函数，例如：

function whoAmI(){ alert(arguments.callee); }whoAmI()

执行以上函数会显示出当前函数的源代码。当然了，我们可以再次调用callee，这主要用于匿名函数递归。