JavaScript入门教程(3) js面向对象

JavaScript 是使用“对象化编程”的,或者叫“面向对象编程”的。所谓“对象化编程”,意思是把 JavaScript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象。小到一个变量,大到网页文档、窗口甚至屏幕,都是对象。这一章将“面向对象”讲述 JavaScript 的运行情况。
对象的基本知识
对象是可以从 JavaScript“势力范围”中划分出来的一小块,可以是一段文字、一幅图片、一个表单(Form)等等。每个对象有它自己的属性方法事件。对象的属性是反映该对象某些特定的性质的,例如:字符串的长度、图像的长宽、文字框(Textbox)里的文字等等;对象的方法能对该对象做一些事情,例如,表单的“提交”(Submit),窗口的“滚动”(Scrolling)等等;而对象的事件就能响应发生在对象上的事情,例如提交表单产生表单的“提交事件”,点击连接产生的“点击事件”。不是所有的对象都有以上三个性质,有些没有事件,有些只有属性。引用对象的任一“性质”用“<对象名>.<性质名>”这种方法。

基本对象
现在我们要复习以上学过的内容了——把一些数据类型用对象的角度重新学习一下。
Number “数字”对象。这个对象用得很少,作者就一次也没有见过。不过属于“Number”的对象,也就是“变量”就多了。

属性
MAX_VALUE 用法:Number.MAX_VALUE;返回“最大值”。
MIN_VALUE
用法:Number.MIN_VALUE;返回“最小值”。
NaN
用法:Number.NaN 或 NaN;返回“NaN”。“NaN”(不是数值)在很早就介绍过了。
NEGATIVE_INFINITY
用法:Number.NEGATIVE_INFINITY;返回:负无穷大,比“最小值”还小的值。
POSITIVE_INFINITY
用法:Number.POSITIVE_INFINITY;返回:正无穷大,比“最大值”还大的值。
方法
toString() 用法:<数值变量>.toString();返回:字符串形式的数值。如:若 a == 123;则 a.toString() == '123'。

String 字符串对象。声明一个字符串对象最简单、快捷、有效、常用的方法就是直接赋值。

属性
length 用法:<字符串对象>.length;返回该字符串的长度。
方法
charAt() 用法:<字符串对象>.charAt(<位置>);返回该字符串位于第<位置>位的单个字符。注意:字符串中的一个字符是第 0 位的,第二个才是第 1 位的,最后一个字符是第 length - 1 位的。
charCodeAt()
用法:<字符串对象>.charCodeAt(<位置>);返回该字符串位于第<位置>位的单个字符的 ASCII 码。
fromCharCode()
用法:String.fromCharCode(a, b, c...);返回一个字符串,该字符串每个字符的 ASCII 码由 a, b, c... 等来确定。
indexOf()
用法:<字符串对象>.indexOf(<另一个字符串对象>[, <起始位置>]);该方法从<字符串对象>中查找<另一个字符串对象>(如果给出<起始位置>就忽略之前的位置),如果找到了,就返回它的位置,没有找到就返回“-1”。所有的“位置”都是从零开始的。
lastIndexOf()
用法:<字符串对象>.lastIndexOf(<另一个字符串对象>[, <起始位置>]);跟 indexOf() 相似,不过是从后边开始找。
split()
用法:<字符串对象>.split(<分隔符字符>);返回一个数组,该数组是从<字符串对象>中分离开来的,<分隔符字符>决定了分离的地方,它本身不会包含在所返回的数组中。例如:'1&2&345&678'.split('&')返回数组:1,2,345,678。关于数组,我们等一下就讨论。
substring()
用法:<字符串对象>.substring(<始>[, <终>]);返回原字符串的子字符串,该字符串是原字符串从<始>位置到<终>位置的前一位置的一段。<终> - <始> = 返回字符串的长度(length)。如果没有指定<终>或指定得超过字符串长度,则子字符串从<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串,则返回空字符串。
substr()
用法:<字符串对象>.substr(<始>[, <长>]);返回原字符串的子字符串,该字符串是原字符串从<始>位置开始,长度为<长>的一段。如果没有指定<长>或指定得超过字符串长度,则子字符串从<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串,则返回空字符串。
toLowerCase()
用法:<字符串对象>.toLowerCase();返回把原字符串所有大写字母都变成小写的字符串。
toUpperCase() 用法:<字符串对象>.toUpperCase();返回把原字符串所有小写字母都变成大写的字符串。
Array 数组对象。数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置(既然是“位置”,就也是从零开始的啦)。
数组的定义方法:

var <数组名> = new Array();
这样就定义了一个空数组。以后要添加数组元素,就用:

<数组名>[<下标>] = ...;
注意这里的方括号不是“可以省略”的意思,数组的下标表示方法就是用方括号括起来。
如果想在定义数组的时候直接初始化数据,请用:

var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);
例如,var myArray = new Array(1, 4.5, 'Hi'); 定义了一个数组 myArray,里边的元素是:myArray[0] == 1; myArray[1] == 4.5; myArray[2] == 'Hi'。
但是,如果元素列表中只有一个元素,而这个元素又是一个正整数的话,这将定义一个包含<正整数>个空元素的数组。
注意:JavaScript只有一维数组!千万不要用“Array(3,4)”这种愚蠢的方法来定义 4 x 5 的二维数组,或者用“myArray[2,3]”这种方法来返回“二维数组”中的元素。任意“myArray[...,3]”这种形式的调用其实只返回了“myArray[3]”。要使用多维数组,请用这种虚拟法:

var myArray = new Array(new Array(), new Array(), new Array(), ...);
其实这是一个一维数组,里边的每一个元素又是一个数组。调用这个“二维数组”的元素时:myArray[2][3] = ...;

属性
length 用法:<数组对象>.length;返回:数组的长度,即数组里有多少个元素。它等于数组里最后一个元素的下标加一。所以,想添加一个元素,只需要:myArray[myArray.length] = ...。
方法
join() 用法:<数组对象>.join(<分隔符>);返回一个字符串,该字符串把数组中的各个元素串起来,用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。
reverse()
用法:<数组对象>.reverse();使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法,它将使数组变成:[3, 2, 1]。
slice()
用法:<数组对象>.slice(<始>[, <终>]);返回一个数组,该数组是原数组的子集,始于<始>,终于<终>。如果不给出<终>,则子集一直取到原数组的结尾。
sort()
用法:<数组对象>.sort([<方法函数>]);使数组中的元素按照一定的顺序排列。如果不指定<方法函数>,则按字母顺序排列。在这种情况下,80 是比 9 排得前的。如果指定<方法函数>,则按<方法函数>所指定的排序方法排序。<方法函数>比较难讲述,这里只将一些有用的<方法函数>介绍给大家。
按升序排列数字:

function sortMethod(a, b) {
    return a - b;
}

myArray.sort(sortMethod);

按降序排列数字:把上面的“a - b”该成“b - a”。
有关函数,请看下面。
Math “数学”对象,提供对数据的数学计算。下面所提到的属性和方法,不再详细说明“用法”,大家在使用的时候记住用“Math.<名>”这种格式。

属性
E 返回常数 e (2.718281828...)。
LN2
返回 2 的自然对数 (ln 2)。
LN10
返回 10 的自然对数 (ln 10)。
LOG2E
返回以 2 为低的 e 的对数 (log2e)。
LOG10E
返回以 10 为低的 e 的对数 (log10e)。
PI
返回π(3.1415926535...)。
SQRT1_2
返回 1/2 的平方根。
SQRT2
返回 2 的平方根。
方法
abs(x) 返回 x 的绝对值。
acos(x)
返回 x 的反余弦值(余弦值等于 x 的角度),用弧度表示。
asin(x)
返回 x 的反正弦值。
atan(x)
返回 x 的反正切值。
atan2(x, y)
返回复平面内点(x, y)对应的复数的幅角,用弧度表示,其值在 -π 到 π 之间。
ceil(x)
返回大于等于 x 的最小整数。
cos(x)
返回 x 的余弦。
exp(x)
返回 e 的 x 次幂 (ex)。
floor(x)
返回小于等于 x 的最大整数。
log(x)
返回 x 的自然对数 (ln x)。
max(a, b)
返回 a, b 中较大的数。
min(a, b)
返回 a, b 中较小的数。
pow(n, m)
返回 n 的 m 次幂 (nm)。
random()
返回大于 0 小于 1 的一个随机数。
round(x)
返回 x 四舍五入后的值。
sin(x)
返回 x 的正弦。
sqrt(x)
返回 x 的平方根。
tan(x)
返回 x 的正切。
Date 日期对象。这个对象可以储存任意一个日期,从 0001 年到 9999 年,并且可以精确到毫秒数(1/1000 秒)。在内部,日期对象是一个整数,它是从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比 1970 年早,则它是一个负数。所有日期时间,如果不指定时区,都采用“UTC”(世界时)时区,它与“GMT”(格林威治时间)在数值上是一样的。
定义一个日期对象:

var d = new Date;
这个方法使 d 成为日期对象,并且已有初始值:当前时间。如果要自定初始值,可以用:

var d = new Date(99, 10, 1);     //99 年 10 月 1 日
var d = new Date('Oct 1, 1999'); //99 年 10 月 1 日
等等方法。最好的方法就是用下面介绍的“方法”来严格的定义时间。

方法
以下有很多“g/set[UTC]XXX”这样的方法,它表示既有“getXXX”方法,又有“setXXX”方法。“get”是获得某个数值,而“set”是设定某个数值。如果带有“UTC”字母,则表示获得/设定的数值是基于 UTC 时间的,没有则表示基于本地时间或浏览期默认时间的。
如无说明,方法的使用格式为:“<对象>.<方法>”,下同。
g/set[UTC]FullYear() 返回/设置年份,用四位数表示。如果使用“x.set[UTC]FullYear(99)”,则年份被设定为 0099 年。
g/set[UTC]Year()
返回/设置年份,用两位数表示。设定的时候浏览器自动加上“19”开头,故使用“x.set[UTC]Year(00)”把年份设定为 1900 年。
g/set[UTC]Month()
返回/设置月份。
g/set[UTC]Date()
返回/设置日期。
g/set[UTC]Day()
返回/设置星期,0 表示星期天。
g/set[UTC]Hours()
返回/设置小时数,24小时制。
g/set[UTC]Minutes()
返回/设置分钟数。
g/set[UTC]Seconds()
返回/设置秒钟数。
g/set[UTC]Milliseconds()
返回/设置毫秒数。
g/setTime()
返回/设置时间,该时间就是日期对象的内部处理方法:从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果要使某日期对象所指的时间推迟 1 小时,就用:“x.setTime(x.getTime() + 60 * 60 * 1000);”(一小时 60 分,一分 60 秒,一秒 1000 毫秒)。
getTimezoneOffset()
返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区,该值为负,例如:中国时区(GMT+0800)返回“-480”。
toString()
返回一个字符串,描述日期对象所指的日期。这个字符串的格式类似于:“Fri Jul 21 15:43:46 UTC+0800 2000”。
toLocaleString()
返回一个字符串,描述日期对象所指的日期,用本地时间表示格式。如:“2000-07-21 15:43:46”。
toGMTString()
返回一个字符串,描述日期对象所指的日期,用 GMT 格式。
toUTCString()
返回一个字符串,描述日期对象所指的日期,用 UTC 格式。
parse()
用法:Date.parse(<日期对象>);返回该日期对象的内部表达方式。

全局对象
全局对象从不现形,它可以说是虚拟出来的,目的在于把全局函数“对象化”。在 Microsoft JScript 语言参考中,它叫做“Global 对象”,但是引用它的方法和属性从来不用“Global.xxx”(况且这样做会出错),而直接用“xxx”。

属性
NaN 一早就说过了。
方法
eval() 把括号内的字符串当作标准语句或表达式来运行。
isFinite()
如果括号内的数字是“有限”的(介于 Number.MIN_VALUE 和 Number.MAX_VALUE 之间)就返回 true;否则返回 false。
isNaN()
如果括号内的值是“NaN”则返回 true 否则返回 false。
parseInt()
返回把括号内的内容转换成整数之后的值。如果括号内是字符串,则字符串开头的数字部分被转换成整数,如果以字母开头,则返回“NaN”。
parseFloat()
返回把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回“NaN”。
toString() 用法:<对象>.toString();把对象转换成字符串。如果在括号中指定一个数值,则转换过程中所有数值转换成特定进制。
escape() 返回括号中的字符串经过编码后的新字符串。该编码应用于 URL,也就是把空格写成“%20”这种格式。“+”不被编码,如果要“+”也被编码,请用:escape('...', 1)。
unescape() 是 escape() 的反过程。解编括号中字符串成为一般字符串。

函数函数的定义
所谓“函数”,是有返回值的对象或对象的方法。
函数的种类
常见的函数有:构造函数,如 Array(),能构造一个数组;全局函数,即全局对象里的方法;自定义函数;等等。
自定义函数
定义函数用以下语句:

function 函数名([参数集]) {
    ...
    [return[ <值>];]
    ...
}
其中,用在 function 之后和函数结尾的大括号是不能省去的,就算整个函数只有一句。
函数名与变量名有一样的起名规定,也就是只包含字母数字下划线、字母排头、不能与保留字重复等。
参数集可有可无,但括号就一定要有。
参数 是函数外部向函数内部传递信息的桥梁,例如,想叫一个函数返回 3 的立方,你就要让函数知道“3”这个数值,这时候就要有一个变量来接收数值,这种变量叫做参数。
参数集是一个或多个用逗号分隔开来的参数的集合,如:a, b, c。
函数的内部有一至多行语句,这些语句并不会立即执行,而只当有其它程序调用它时才执行。这些语句中可能包含“return”语句。在执行一个函数的时候,碰到 return 语句,函数立刻停止执行,并返回到调用它的程序中。如果“return”后带有<值>,则退出函数的同时返回该值。
在函数的内部,参数可以直接当作变量来使用,并可以用 var 语句来新建一些变量,但是这些变量都不能被函数外部的过程调用。要使函数内部的信息能被外部调用,要么使用“return”返回值,要么使用全局变量
全局变量 在 Script 的“根部”(非函数内部)的“var”语句所定义的变量就是全局变量,它能在整个过程的任意地方被调用、更改。


function addAll(a, b, c) {
    return a + b + c;
}

var total = addAll(3, 4, 5);

这个例子建立了一个叫“addAll”的函数,它有 3 个参数:a, b, c,作用是返回三个数相加的结果。在函数外部,利用“var total = addAll(3, 4, 5);”接收函数的返回值。
更多的时候,函数是没有返回值的,这种函数在一些比较强调严格的语言中是叫做“过程”的,例如 Basic 类语言的“Sub”、Pascal 语言的“procedure”。

属性
arguments 一个数组,反映外部程序调用函数时指定的参数。用法:直接在函数内部调用“arguments”。

(0)

相关推荐

  • JS面向对象编程之对象使用分析

    因为大家总是用面向过程的编程思想来写JS代码,而且也由于网络上充斥了太多小"巧"的JS代码段,很多都是随意而为,很不规范,这也就造成了大家对JS的"误解",一味的认为它就是一个辅助的小东东,而不适合做大的东西开发.但是自从AJAX兴起后,大量的JS代码编写要求人们具备像写JAVA类似的代码一样,能够面向对象进行开发. 所以下面就结合我自己的体会和所学习的东东和大家一起来学习在JS中如何使用面向对象的编程.其实使用JS进行面向对象开发也不是很难的事情,因为在JS中每一

  • JS面向对象编程浅析

    在AJAX兴起以前,很多人写JS可以说都是毫无章法可言的,基本上是想到什么就写什么,就是一个接一个的函数function,遇到重复的还得copy,如果一不小心函数重名了,还真不知道从何开始查找错误,因为大家总是用面向过程的编程思想来写JS代码,而且也由于网络上充斥了太多小"巧"的JS代码段,很多都是随意而为,很不规范,这也就造成了大家对JS的"误解",一味的认为它就是一个辅助的小东东,而不适合做大的东西开发.但是自从AJAX兴起后,大量的JS代码编写要求人们具备像写

  • JS面向对象编程 for Cookie

    各位如果有更好的见解可讨论下! 复制代码 代码如下: /* * Js Class Cookie * Author:Mr Co */ var Cookie = function(/*Cookie名称*/name){ this.$name = name; var allcookies = document.cookie; if(allcookies == '') return; var cookies = allcookies.split(';'); var cookie = null; for(v

  • 学习JS面向对象成果 借国庆发布个最新作品与大家交流

    首先引入一个jQuery的小问题 jQuery在设置透明度上是有问题的,首先看一下其代码: Code 复制代码 代码如下: // IE uses filters for opacity if ( !jQuery.support.opacity && name == "opacity" ) { if ( set ) { // IE has trouble with opacity if it does not have layout // Force it by sett

  • js面向对象设计用{}好还是function(){}好(构造函数)

    在网上看了很多JavaScript的项目, 用到对象都是采用{}的形式: 例如jQuery, TinyMCE等都是形如: 复制代码 代码如下: var Dialog = { int : function() { .... }, insert : function() { .... }, pop : function() { .... } }; //调用就是: Dialog.init(); 而我自己一直使用function闭包的方式, 感觉使用内部私有成员(函数,变量)更方便: 复制代码 代码如下

  • js面向对象 多种创建对象方法小结

    开始创建对象: 1.对象字面量. 复制代码 代码如下: var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(this.hour+":"+this.minute+":"+this.second); } } clock.showTime();//调用 2.创建Object实例 复制代码 代码如下: var clock = new Object(); clock.hour=12; cl

  • JS面向对象、prototype、call()、apply()

    一. 起因 那天用到prototype.js于是打开看看,才看几行就满头雾水,原因是对js的面向对象不是很熟悉,于是百度+google了一把,最后终于算小有收获,写此纪念一下^_^. prototype.js代码片段 复制代码 代码如下: var Class = { create: function() { return function() { this.initialize.apply(this , arguments); } } } // Class使用方法如下 var A = Class

  • JavaScript入门教程(3) js面向对象

    JavaScript 是使用"对象化编程"的,或者叫"面向对象编程"的.所谓"对象化编程",意思是把 JavaScript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象.小到一个变量,大到网页文档.窗口甚至屏幕,都是对象.这一章将"面向对象"讲述 JavaScript 的运行情况.对象的基本知识 对象是可以从 JavaScript"势力范围"

  • JavaScript入门教程(2) JS基础知识

    在什么地方插入 JavaScript JavaScript 可以出现在 HTML 的任意地方.使用标记<script>-</script>,你可以在 HTML 文档的任意地方插入 JavaScript,甚至在<HTML>之前插入也不成问题.不过如果要在声明框架的网页(框架网页)中插入,就一定要在<frameset>之前插入,否则不会运行.基本格式 复制代码 代码如下: <script> <!-- ... (JavaScript代码) ...

  • JavaScript入门教程(4) js浏览器对象

    更详细的信息可以去查msdn或者Navigator 2.0以后的说明文档,这里我们之做个简单的说明 包括一下几大属性: appCodeName 返回浏览器的"码名"(?),流行的 IE 和 NN 都返回 'Mozilla'. 下面的例子显示了 appCodeName 属性的值: document.write("navigator.appCodeName 的值是" + navigator.appCodeName) appName 返回浏览器名.IE 返回 'Micro

  • JavaScript入门教程(11) js事件处理

    事件处理概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性.事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应.其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去.事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情.指定事件处理程序有三种方法:方法一 直接在 HTML 标记中指定.这种方法是用得最

  • JavaScript入门教程(12) js对象化编程

    with 语句 为一个或一组语句指定默认对象. 用法: with (<对象>) <语句>; with 语句通常用来缩短特定情形下必须写的代码量.在下面的例子中,请注意 Math 的重复使用: x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10); y = Math.tan(14 * Math.E); 当使用 with 语句时,代码变得更短且更易读: 复制代码 代码如下: with (Math) { x = cos(3 * PI) + sin

  • JavaScript入门教程(5) js Screen屏幕对象

    screen 屏幕对象 反映了当前用户的屏幕设置. width 返回屏幕的宽度(像素数). height 返回屏幕的高度. availWidth 返回屏幕的可用宽度(除去了一些不自动隐藏的类似任务栏的东西所占用的宽度). availHeight 返回屏幕的可用高度. colorDepth 返回当前颜色设置所用的位数 - 1:黑白:8:256色:16:增强色:24/32:真彩色 下面是英文的Navigator浏览器的屏幕对象: availHeight:minus permanent or semi

  • JavaScript入门教程之引用类型

    引用类型 引用类型是一种数据结构,用于将数据和功能组织在一起.它也常被称为类,但这种称呼并不妥当.尽管 ECMAScript从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构.引用类型有时候也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法. 前面提到过,引用类型的值便是对象,在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,而对象则是某个特定引用类型的实例. var a=new Object(); 上面便声明了一个引用类

  • JavaScript入门教程(1) 什么是JS

    JavaScript 参考教程 本教程为未接触过 JavaScript 的读者提供了比较完善的初级知识,但只限于初级知识:所有与动态网页密切相关的 JavaScript 在本教程中都未提及,包括动态定位.动画.让文档接收更多事件(document.captureEvent())等;所有在 IE 及 Netscape 中有不同的 JavaScript 都尽少提及. 本教程在结构上设计的比较像一个参考(reference),有参考的规划性,但又有教程的性质,所以我把它叫做"参考教程". 本

  • javascript入门教程基础篇

    一. 简介 1. 什么是javascript JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器.面向(基于)对象.事件驱动式的网页脚本语言. 2. 为什么要使用javascript 表单验证 网页特效 小游戏 Ajax 3.快速入门 在程序中,如果想编写js代码,有两种办法: 1)在html文件中,在一对script标记中,直接编写 <script language='javascript'> document.write('hello'); </scrip

  • JavaScript入门教程(7) History历史对象

    鉴于安全性的需要,该对象收到很多限制,现在只剩下下列属性和方法.History历史对象有length这个属性,列出历史的项数.JavaScript 所能管到的历史被限制在用浏览器的"前进""后退"键可以去到的范围.本属性返回的是"前进"和"后退"两个按键之下包含的地址数的和. History历史对象并有以下方法 back() 后退,跟按下"后退"键是等效的. forward() 前进,跟按下"前进

随机推荐