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 相关文章推荐
JavaScript的目的分析
Jan 05 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
基于mysql的论坛(5)
2006/10/09 PHP
PHP实现图片简单上传
2006/10/09 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
求职意向书范文
2014/04/01 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
养成教育工作总结
2015/08/13 职场文书