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创建命名空间(namespace)的最简实现
Dec 11 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
vue实现分页组件
Jun 16 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
js异或加解密效果代码
2008/06/25 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python 导入数据及作图的实现
2019/12/03 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
如何编写python的daemon程序
2021/01/07 Python
python 图像增强算法实现详解
2021/01/24 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
css 元素选择器的简单实例
2016/05/23 HTML / CSS
学习新党章思想汇报
2014/01/09 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
七年级英语教学反思
2016/02/15 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书