javascript面向对象入门基础详细介绍


Posted in Javascript onSeptember 05, 2012

什么是对象

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

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,这主要用于匿名函数递归。
Javascript 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 #Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 #Javascript
Javascript中的delete介绍
Sep 02 #Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 #Javascript
Javascript this 的一些学习总结
Aug 31 #Javascript
javascript动画浅析
Aug 30 #Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
详解webpack loader和plugin编写
2018/10/12 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
办公室文员工作自我评价
2013/12/01 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
2014春晚主持词
2014/03/25 职场文书
家长会学生演讲稿
2014/04/26 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
政风行风整改方案
2014/10/25 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers