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

什么是对象

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

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,这主要用于匿名函数递归。

时间: 2012-09-02

JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

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

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

归纳下js面向对象的几种常见写法总结

//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); 2.比较正规的写法 function Ci

Javascript之面向对象--封装

第一步:做一个"手机的类" var MobilePhone = (function(){ ---- })() 第二步:考虑这个类,里需要那些类的私有属性,这里我想定义的是实例出来手机的数量 var MobilePhone = (function(){ //私有属性 var count = 0; //代表手机的数量 })() 第三步:创建一个构造函数,即实例时候,对产生的新象的一个初始化,例如属性,方法的初始化;在这个例子中,每一个手机都会有颜色,大小,价格属性.这里的构造函数也是一个闭

javascript中的面向对象

相信大家对javascript中的面向对象写法都不陌生,那还记得有几种创建对象的写法吗?相信大家除了自己常写的都有点模糊了,那接下来就由我来帮大家回忆回忆吧! 1. 构造函数模式 通过创建自定义的构造函数,来定义自定义对象类型的属性和方法. function cons(name,age){ this.name = name; this.age = age; this.getMes = function(){ console.log(`my name is ${this.name},this ye

JS基于面向对象实现的拖拽功能示例

本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit

面向对象的Javascript之二(接口实现介绍)

就足以说明接口在面向对象的领域中有多重要.但JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一组对象包含相似的的特性.所幸的是JS拥有强大的灵活性(我在上文已谈过),这使得模仿接口特性又变得非常简单.那么到底是接口呢? 接口,为一些具有相似行为的类之间(可能为同一种类型,也可能为不同类型)提供统一的方法定义,使这些类之间能够很好的实现通信. 那使用接口到底有哪些好处呢?简单地说,可提高系统相似模块的重用性,使得不同类的通信更加稳固.一旦实现接口,

JS 面向对象之神奇的prototype

JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 前面我们说,对象的类(Class)和对象实例(Instance)之间是一种"创建"关系,

JavaScript面向对象编写购物车功能

之前的项目中需要一个购买数据商品并付款的功能,刚开始一直不敢使用面向对象的写法,主要是没有理清思路,而且那时的数据商品比较的复杂,就一直没敢动,在网上也找些面向对象的写法,把思路理清一遍,就想自己试着写写. 接下来我会一步一步分析,面向对象的写法过程.整个流程大致分为:                1.先定义好一个商品列表的数据形式和商品总数集,类似: var data = [{name: 'name', unitPrice: 10, num: 2}]; var total = {type:

Javascript 面向对象(一)(共有方法,私有方法,特权方法)

私有方法:私有方法本身是可以访问类内部的所有属性的,即私有属性和公有属性.但是私有方法是不可以在类的外部被调用. 私有方法写法: 复制代码 代码如下: function myClass () { var private_attribute = initial_value; function private_method () { } var private_method2 = function () { } } 实例showpet()就是一个私有方法 复制代码 代码如下: var pet=fun

js中的面向对象入门

什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个名字都映射到一个值. 简单来理解对象就是由属性和方法来组成的 面向对象的特点 封装 对于一些功能相同或者相似的代码,我们可以放到一个函数中去,多次用到此功能时,我们只需要调用即可,无需多次重写. 在这里我们可以理解为创造对象的几种模式:单例模式,工厂模式,构造函数模式,原型模式等. 继承 子类可以继承父类的属

js中的面向对象之对象常见创建方法详解

本文实例讲述了js中的面向对象之对象常见创建方法.分享给大家供大家参考,具体如下: 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 使用object var student = new Object(); student.name = "easy"; student.age = "20"; 使用字面量 var sutdent = { na

js中的正则表达式入门(大量实例代码)

什么是正则表达式呢? 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个字符串是否含有某种子串.将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等. 先科普一下基本的知识 js中使用正则表达式,除了了解正则表达式基本的匹配规则外.还需要了解下面的基本的知识: python,js,groovy这些脚本语言都有在线调试的网站,可以在线测试是否有语法错误,用起来也很方便. var reg = new RegExp('\\d{8-20}') reg.

JS中闭包的经典用法小结(2则示例)

本文实例总结了JS中闭包的经典用法.分享给大家供大家参考,具体如下: 闭包这个东西,网上有很多介绍资料.个人看了很多,还是一知半解.这里不做理论介绍,直接给出2个例子. 代码1:记录函数被调用的次数 function a() { var i = 0; function b() { return ++i; } return b; } var c = a(); c();//1 c();//2 这种方式类似C语言中的private static变量,能够保持局部变量的内存不释放. 代码2:正确给DOM

PHP实现JS中escape与unescape的方法

本文实例讲述了PHP实现JS中escape与unescape的方法.分享给大家供大家参考,具体如下: JavaScript中的escape和unescape是吧字符串转换为unicode十六进制编码,跟JSON的编码格式是一样的,所以可以通过PHP中的json_encode和json_decode实现PHP版本的escape和unescape. 代码如下: <?php function escape($str) { return str_replace('\\', '%', substr(jso

JS中的回调函数实例浅析

本文实例讲述了JS中的回调函数.分享给大家供大家参考,具体如下: 在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义: document.getElementById('demo').click=function(){ alert(1); }; 这段代码其实就是一段事件回调,这样写看的其实相对模糊一些,我们不妨看下接下来的代码 document.getElementById('demo').addEventListener('click',function(){ aler

JS中数组与对象的遍历方法实例小结

本文实例讲述了JS中数组与对象的遍历方法.分享给大家供大家参考,具体如下: 一.数组的遍历: 首先定义一个数组 arr=['snow','bran','king','nightking']; 1.for循环,需要知道数组的长度; 2.foreach,没有返回值,可以不知道数组长度: arr.forEach(function(ele,index){ console.log(index); console.log(ele) }) 3.map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新

js中值引用和地址引用实例分析

本文实例讲述了js中值引用和地址引用.分享给大家供大家参考,具体如下: js中任何事务都是对象.包括基本数据类型(undefined,boolean,number,string,null). 对象只是拥有属性和方法的特殊数据类型. 基本数据类型也是对象 var a = "hello"; var b = "hello"; 既然是对象,那么它默认拥有属性和方法 a.length 长度属性 a.toUpperCase() 把字符串a编程大写的方法 a==b,因为是按照 值

JS中超越现实的匿名函数用法实例分析

本文实例讲述了JS中超越现实的匿名函数用法.分享给大家供大家参考,具体如下: 一般函数: function show1(name){ alert(name); //打印:zhangsan } show1("zhangsan"); 匿名函数: var show2 = function (name) { alert(name); //打印:张三 } show2("张三"); 上面2种定义函数的区别: 1.我们知道所有的function都会在window对象里 funct

js中比较两个对象是否相同的方法示例

本文实例讲述了js中比较两个对象是否相同的方法.分享给大家供大家参考,具体如下: js中,很轻易就可以比较2个普通字符串/数字是否相同,但是,如何比较2个对象是否相同呢? 在此我便给出较为简单的方法,如下: //比较2个对象是否相同 function isObjEqual(o1,o2){ var props1 = Object.getOwnPropertyNames(o1); var props2 = Object.getOwnPropertyNames(o2); if (props1.leng