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 函数参数限制说明
Nov 19 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
动态加载jQuery的方法
Jun 16 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
js 图片懒加载的实现
Oct 21 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
在PHP中执行系统外部命令
2006/10/09 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
python提示No module named images的解决方法
2014/09/29 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
python编程开发之日期操作实例分析
2015/11/13 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
Python实现Linux中的du命令
2017/06/12 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Python递归实现打印多重列表代码
2020/02/27 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
用python发送微信消息
2020/12/21 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
竞选班干部演讲稿600字
2014/08/20 职场文书
2014年协会工作总结
2014/11/22 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书