- 浏览: 71041 次
- 性别:
- 来自: 大连
最近访客 更多访客>>
最新评论
-
newlangwen1:
你好 我想请教个问题,我运行了一下上面的程序,结果是输入什么就 ...
C程序 对文本行进行排序
http://bbs.51cto.com/thread-568229-1.html
Javascript中的类
在 上一篇中我们了解了 function 对象,下面我们来看看如何运用function对象实现面向对象。
1.
对象
什么是对象?
在js中,对象是一种复合数据类型,他们将多个数据值集中在一个单元中,而且允许使用名字来存取这些值。
怎么创建对象?
对象是由运算符new创建的。
在这个运算符之后必须有用于初始化对象的构造函数名。例如:
var o = new Object(); //创建一个空对象,即没有属性的对象。
js还支持内部构造函数,例如:
var now = new Date(); //当前日期和时间
通过对象直接量创建对象。
对象直接量提供了另一种创建并初始化新对象的方式。对象直接量由属性说明列表构成,列表包含在大括号中,其中属性说明由逗号隔开,对象直接量中的每个属性都是由属性名加上冒号和属性值构成。例如:
var circle = {x:0, y:0, radius:2};
var coder = {
name:”huchen”,
age:22,
sex:”mail”,
email:”
vs2010.net@gmail.com”
};
变量的读取
这个相信就不用在啰嗦了吧,如:coder.name;
如果要读取一个不存在的属性(即还没有被赋值的属性)的值,那么得到的结果将是undefined。
删除属性:
delete coder.sex;
删除一个属性不仅仅是把该属性设置为undefined,而是真正从对象中移除该属性。
2.
构造函数
从上一篇中我们知道,在javascript中,使用new运算符以及预定义的构造函数(如Object(),Date()等)可以创建并初始化一个新对象。在许多实例中,这些预定义的构造函数和他们创建的内部对象类型都很有用。但是,在面向对象的程序设计中,使用由程序定义的自定义对象类型也是很普遍的。例如如果你想编写一个操作矩形的程序,那么可以用一个特殊类型或者对象类来表示矩形。这个矩形类的每个对象都有一个width属性和一个height属性,因为他们定义矩形的本质特征。
要创建已经定义了的带有属性的对象,需要编写一个构造
函数在新的对象中创建并初始化这些属性。构造函数是具有两个特性的javascript函数:
l
它由new运算符调用。
l
传递给他的是一个对新创建的空对象的引用,将该引用作为关键字this的值,而且它还要对新创建的对象进行适当的初始化。
例:
function Rectangle(w, h)
{
this.width = w;
this.height = h;
}
var rect1 = new Rectangle(2,5);
var rect2 = new Rectangle(3,7);
学过面向对象编程的都知道面向对象通过属性和方法描述现实世界中的类型。
那个有了属性,自然就应该有方法。
3.
方法
在javascript中,可以借助可以讲函数赋给任何变量这个特性。我们可以把函数赋给一个对象属性。如果有一个函数f和一个对象o,就可以适应如下代码定义一个名为m方法:
o.m = f;
定义了之后可以采用下面方式调用:
o.m();
方法有一个非常重要的属性,就是在方法主体内部,关键字this可以引用当前调用该方法的对象。那么有了这些概念我们来看个例子:
function compute_area()
{
return this.width * this.height;
}
var page = new Rectangle(4, 5);
//通过吧函数赋予对象的属性,来定义一个方法。
page.area = compute_area;
//调用方法
var a = page.area();
在这个例子中有一个明显的缺点,就是在调用对象rect的方法area()之前,必须先将该方法赋给rect对象的一个属性,虽然可以调用名为page的特定对象的area()方法,但是在没有将该方法赋给其他的Rectangle对象之前,我们就不能调用任何Rectangle对象的area()方法。这很就会使你感到繁琐。
对此我们可以用这种方法解决:
例:
//首先定义一函数,它们将被用作方法。
function Rectangle_area(){return this.width * this.height;}
function Rectangle_perimeter(){return 2*this.width + 2*this.height;}
function Rectangle_set_size(w,h){this.width = w; this.height = h;}
function Rectangle_enlarge(){this.widht *= 2; this.height *= 2;}
function Rectangle_shrink(){this.width /= 2; this.height /= 2;}
function Rectangle(w, h)
{
this.width = w;
this.height = h;
//在构造函数中定义对象方法
this.area = Rectangle_area;
this.perimeter = Rectangle_perimeter;
this.set_size = Rectangle_set_size;
this.enlarge = Rectangle_enlarge;
this.shrink = Rectangle_shrink;
}
var r = new Rectangle(2, 3);
//现在,一但创建了一个Rectangle对象,就可以直接调用它的方法了。
var a = r.area();
r.enlarge();
var p = r.perimeter();
虽然这种方法不用对每个实例化的对象属性赋予方法。但是还是有缺点,在这个例子中,构造函数Rectangle()对它所要初始化的Rectangle对象的7个属性都进行了设置,即使其中5项属性的值都是常量,每个矩形对象的这5项都是相同的。由于每个属性都占用了一定的内存空间,所以给Rectangle类添加方法,就会使每个Rectangle对象占用的内存为原来的3倍。幸运的是javascript引入了一种解决该问题的方法,即它允许一个对象继承原型对象的属性。
发表评论
-
prototype.js
2010-06-27 20:53 619http://www.cnblogs.com/thinhuna ... -
javascript 中的prototype 说明
2010-06-27 20:50 638http://myfreespace.iteye.com/bl ... -
Javascript继承机制总结
2010-06-27 20:45 884http://info.codepub.com/2007/04 ... -
JavaScript Function对象
2010-06-24 20:44 909http://book.csdn.net/bookfiles/ ... -
深入javascript function对象(一)
2010-06-24 20:40 611http://bbs.51cto.com/thread-568 ... -
JavaScript的Function详细
2010-06-24 20:33 609Function (Built-in Object) Func ... -
Javascript 事件注册机制
2010-06-22 15:15 734http://www.360doc.com/content/0 ... -
全面剖析XMLHttpRequest对象
2010-06-21 20:29 411http://dev.yesky.com/91/2687091 ... -
投机取巧使用tomcat的一点备忘
2010-06-21 17:11 674部署的过程就是将编译后的项目copy到 webapps目录下, ... -
Javascript学习笔记之 HTML DOM Checkbox 对象
2010-06-08 20:16 960http://www.w3school.com.cn/html ... -
Javascript学习笔记之 HTML DOM opener 属性
2010-05-30 23:02 687【转】http://www.w3school.com.cn/h ... -
Javascript学习笔记之 Window 对象
2010-05-30 22:50 622【转】http://www.w3school.com.cn/ ... -
Javascript学习笔记之 JavaScript框架编程
2010-05-29 21:11 700转http://home.phpchina.com/spa ... -
Javascript学习笔记之 用链接对用户进行重定向
2010-05-26 22:37 14362.8 用链接对用户进行重定向 可以根据用户是否打开了Ja ... -
Javascript学习笔记之 闭包
2010-05-23 21:26 587转:http://apps.hi.baidu. ... -
Javascript学习笔记之 apply和call方法
2010-05-21 21:47 704apply方法和call方法都可以将函数绑定到其他对象上执行, ... -
【转】Factory Method(createMethod)模式的javascript实现
2010-05-21 09:45 672本文来自CSDN博客http://blog.csdn.net/ ... -
Javascript学习笔记之 Javascript中的函数
2010-05-20 22:20 572Javascript中的函数在函数调用中,可以通过argume ... -
Javascript学习笔记之函数(Function)对象
2010-05-19 21:41 703【转】http://163.qizhi.blog.163.co ... -
Javascript学习笔记之全局(Global)对象
2010-05-19 20:56 671备忘全局对象的几个属性或方法 1. NaN 特殊值,表示非数 ...
相关推荐
深入理解JavaScript系列(9):根本没有“JSON对象”这回事! 深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇) 深入理解JavaScript系列(11):执行上下文(Execution Contexts) 深入理解...
深入理解JavaScript系列(9):根本没有“JSON对象”这回事 深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇) 深入理解JavaScript系列(11):执行上下文(Execution Contexts) 深入理解...
Javascript 面向对象编程:构造函数的继承 本节主要介绍,如何生成一个”继承”多个对象的实例。 比如,现在有一个”动物”对象的构造函数, function Animal(){ this.species = "动物"; } 还有一个”猫”对象的...
本文进一步分析讲述了javascript面向对象之对象的深入理解。分享给大家供大家参考。具体分析如下: javacript面向对象程序设计中,可以理解为一切都是对象。实例代码如下: 代码如下:[removed] function Cat(){ } ...
javascript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法: ...
对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅。。(哔!)。 下面给大家介绍下常用的几种对象创建模式 使用new...
Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念。 1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的...
JavaScript 是面向对象的。但是不少人对这一点理解得并不全面。 在 JavaScript 中,对象分为两种。一种可以称为“普通对象”,就是我们所普遍理解的那些:数字、日期、用户自定义的对象(如:{})等等。 还有一种,...
本文深入浅出的讲述了javascript面向对象快速入门实例。分享给大家供大家参考。具体如下: javascript面向对象入门案例: 代码如下:[removed] function Cat(){//js中对象的定义与函数一样,不同点在于怎么样调用。 ...
这篇文章更像是笔记,因为《JavaScript高级程序设计》写得真是太好了! 1. 工厂模式 function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name);...
先从一个问题进行研究深入,什么是javascript对象继承? 比如我们有一个“动物”对象的构造函数。 function animal() { this.type = '动物'; } 还有一个“猫”对象的构造函数。 function cat(name,color) { ...
2.method 是面向对象中的概念,一般与类或对象成对出现 关系 1.对象的属性可以是任意类型 2.对象的属性如果是函数类型,它就叫做这个对象的方法 3.所以方法的本质还是函数 函数的调用 1.fun() 2.obj.fun() 3.fun...
这篇文章更像是笔记,因为《JavaScript高级程序设计》写得真是太好了! 1. 工厂模式 function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console....
函数调用者与所有者 JavaScript 中函数(function) 存在调用者 与 所有者这两个概念,调用者是指调用函数的对象,通常是一个指向调用了当前函数的函数的引用,如果是顶层调用,那么caller=null, 大部分浏览器的...
Function对象是JavaScript里面的固有对象,所有的函数实际上都是一个Function对象。 我们先看看,Function对象能不能直接运 用构造函数创建一个新的函数呢?答案是肯定的。 var abc = new Function(x,y,return x*...
函数对象 首先,大家得明确一个概念:函数... 注:Function对象本身也是一个函数,因此它也一个函数对象。关于Function的深入理解,请见后续博文。 正面我们来看一段代码: 代码如下: //定义方式一 function func(x)
1、JavaScript中定义函数有2钟方法: 1-1.函数声明: 代码如下:function funcName(arg1,arg2,arg3){ //函数体} ①name属性:可读取函数名。非标准,浏览器支持:FF、Chrome、safari、Opera。 ②函数声明提升:指...
在JavaScript中“一切皆对象”,在这一方面,它比其他的OO语言来的更 为彻底,即使作为代码本身载体的function,也是对象,数据与代码的界限在JavaScript中已经相当模糊。虽然它被广泛的应用在WEB客户 端,但是其...
主要介绍了深入理解JavaScript系列(49):Function模式(上篇),本文讲解了回调函数、配置对象、返回函数、偏应用、Currying等内容,需要的朋友可以参考下
gf.sayWhat = function() { console.log(this.name + "said:love you forever"); } 使用字面量创建 这样似乎妥妥的了,但是宅寂的geek们岂能喜欢如此复杂和low土的定义变量的方式,作为一门脚本语言那应该有和...