首页 / 脚本样式 / JavaScript / javascript面向对象入门基础详细介绍

什么是对象

简单点说，编程语言中的对象是对现实中事物的简化。例如，我们一个人就是一个对象，但是编程语言很难完全描述一个这样复杂的对象。所以我们必须做出简化，首先，将人简化成属性和行为的组合，然后仅仅保留对程序有意义的几个属性以及行为。例如，我们做一个统计某学校的人的身高的程序，那么我们在这个程序中就可以把人的行为省略掉，只保留行为，并且只保留身高这一个属性。这样，我们就得到了一个最简单的对象。

JavaScript字符串对象

对象的属性
其实我们之前在HTML DOM中已经就是在使用对象了。例如，我们知道，DOM节点有一些信息、例如nodeName、nodeType等，其实这些信息就是节点对象的属性。下面我们以字符串为例来看看对象的属性。

字符串的属性
var s = "我有个7个字符";定义了s这个字符串之后，我们就有了一个字符串对象，我们可以访问它的长度属性（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方法返回一个字符串中某字符最后一次出现的位置。

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对象
我们使用如下这个语句来创建一个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数组
复制代码 代码如下:
<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>


实例JavaScript数组代码

下面是一段简单的使用数组的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代码

复制代码 代码如下:
<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中，函数也是对象，我们使用下面以下语句定义一个函数的时候，其实是定义了一个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，这主要用于匿名函数递归。