`
q272156430
  • 浏览: 270817 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

javaScript 面象对象5

阅读更多

类变量/类方法/实例变量/实例方法
先补充一下以前写过的方法:
在javascript中,所有的方法都有一个call方法和apply方法.这两个方法可以模拟对象调用方法.它的第一个参数是对象,后面的
参数表示对象调用这个方法时的参数(ECMAScript specifies two methods that are defined for all functions, call()
and apply(). These methods allow you to invoke a function as if it were a method of some other object. The first
argument to both call() and apply() is the object on which the function is to be invoked; this argument becomes
the value of the this keyword within the body of the function. Any remaining arguments to call() are the values
that are passed to the function that is invoked).比如我们定义了一个方法f(),然后调用下面的语句:
f.call(o, 1, 2);
作用就相当于
o.m = f;
o.m(1,2);
delete o.m;
举个例子:

function Person(name,age) {  //定义方法   
    this.name = name;   
    this.age = age;   
}   
var o = new Object();   //空对象   
alert(o.name + "_" + o.age); //undefined_undefined   
  
Person.call(o,"sdcyst",18); //相当于调用:o.Person("sdcyst",18)   
alert(o.name + "_" + o.age); //sdcyst_18   
  
Person.apply(o,["name",89]);//apply方法作用同call,不同之处在于传递参数的形式是用数组来传递   
alert(o.name + "_" + o.age); //name_89  

 

实例变量和实例方法都是通过实例对象加"."操作符然后跟上属性名或方法名来访问的,但是我们也可以为类来设置方法或变量,
这样就可以直接用类名加"."操作符然后跟上属性名或方法名来访问.定义类属性和类方法很简单:

Person.counter = 0;   //定义类变量,创建的Person实例的个数   
function Person(name,age) {   
    this.name = name;   
    this.age = age;   
    Person.counter++; //没创建一个实例,类变量counter加1   
};   
  
Person.whoIsOlder = function(p1,p2) { //类方法,判断谁的年龄较大   
    if(p1.age > p2.age) {   
        return p1;   
    } else {   
        return p2;   
    }   
}   
  
var p1 = new Person("p1",18);   
var p2 = new Person("p2",22);   
  
alert("现在有 " + Person.counter + "个人");  //现在有2个人   
var p = Person.whoIsOlder(p1,p2);   
alert(p.name + "的年龄较大");   //p2的年龄较大  

 

prototype属性的应用:
下面这个例子是根据原书改过来的.
假设我们定义了一个Circle类,有一个radius属性和area方法,实现如下:

function Circle(radius) {   
    this.radius = radius;   
    this.area = function() {   
        return 3.14 * this.radius * this.radius;   
    }   
}   
var c = new Circle(1);   
alert(c.area());  //3.14 

 

 假设我们定义了100个Circle类的实例对象,那么每个实例对象都有一个radius属性和area方法,
实际上,除了radius属性,每个Circle类的实例对象的area方法都是一样,这样的话,我们就可以
把area方法抽出来定义在Circle类的prototype属性中,这样所有的实例对象就可以调用这个方法,
从而节省空间.

function Circle(radius) {   
    this.radius = radius;   
}   
Circle.prototype.area = function() {   
        return 3.14 * this.radius * this.radius;   
    }   
var c = new Circle(1);   
alert(c.area());  //3.14 

 

现在,让我们用prototype属性来模拟一下类的继承:首先定义一个Circle类作为父类,然后定义子类
PositionCircle.

function Circle(radius) {  //定义父类Circle   
    this.radius = radius;   
}   
Circle.prototype.area = function() { //定义父类的方法area计算面积   
    return this.radius * this.radius * 3.14;   
}   
  
function PositionCircle(x,y,radius) { //定义类PositionCircle   
    this.x = x;                    //属性横坐标   
    this.y = y;                    //属性纵坐标   
    Circle.call(this,radius);      //调用父类的方法,相当于调用this.Circle(radius),设置PositionCircle类的   
                                   //radius属性   
}   
PositionCircle.prototype = new Circle(); //设置PositionCircle的父类为Circle类   
  
var pc = new PositionCircle(1,2,1);   
alert(pc.area());  //3.14   
                   //PositionCircle类的area方法继承自Circle类,而Circle类的   
                   //area方法又继承自它的prototype属性对应的prototype对象   
alert(pc.radius); //1  PositionCircle类的radius属性继承自Circle类   
  
/*  
注意:在前面我们设置PositionCircle类的prototype属性指向了一个Circle对象,  
因此pc的prototype属性继承了Circle对象的prototype属性,而Circle对象的constructor属  
性(即Circle对象对应的prototype对象的constructor属性)是指向Circle的,所以此处弹出  
的是Circ.  
*/  
alert(pc.constructor); //Circle       
  
/*为此,我们在设计好了类的继承关系后,还要设置子类的constructor属性,否则它会指向父类  
的constructor属性  
*/  
PositionCircle.prototype.constructor = PositionCircle   
alert(pc.constructor);  //PositionCircle  

 

分享到:
评论

相关推荐

    javascript面象对象编程

    函数对象和其它内部对象的关系 – 对于Function, Object, Array, Date, RegExp, Math, Error等内部对象 可使用new操作来返回一个对象实例 三、类 1. 实现 2. 公有成员,私有成员,静态成员 3. 类的继承

    Javascript面象对象成员、共享成员变量实验

    Javascript 面象对象成员、共享成员变量实验,需要的朋友可以参考下。

    JavaScript面象对象设计

    新一篇: JavaScript中字符串相等比较 面象对象的应用是相当广泛的,在桌面编程中很早就出现了,应用比较成熟,象C++,Java,C#等。而在Web编程这一块,出现就要晚得多,以致于现在的Web开发很困难,当然也有Web开发...

    经典Javacript的面向对象设计例子

    javascript面象对象设计经典例子

    HTMLTest(js面向对象)

    HTMLTest(js面向对象),javascript也有面象对象的概念,有封装,有继承。事件模型

    js面向对象.pdf

    JavaScript 面向对象程序设计,最基础的介绍如何 创建对象, 继承,重原理上分析js,由浅入深,讲解的很清晰明白,希望能给大家的学习带来帮助

    Jquery UI插件

    如果你想学习javascript面象对象编程,这个源代码可以让你学习学习。

    成都盛课盟IT培训:高级网页设计.

    5、javaScript面象对象程序设计  javaScript面向对象基础、认识函数、类的实现……. 6、框架编程、使用正则表达式、使用Windows document 7、项目实战  架构完成电信网络娱乐平台、OA系统、分布式系统页面设计 8...

    理解Javascript

    01_理解内存分配在正式开始之前,我想先说两句,理解javascript系列博文是通过带领大家分析javascript执行时的内存分配情况,来解释javascript原理,具体会涵盖javascript预加载,闭包原理,面象对象,执行模型,...

    现代 javscript 编程

    这包括专业JavaScript编程的基础:编写面象对代码,测试代码,为分发而进行封装。随后你看到了Unobtrusive DOM脚本编程的主要方面,包括一个关于文档对象模型,事件,JavaScript与CSS交互的简短的总览。最后你看到了...

    理解Javascript_01_理解内存分配原理分析

    在正式开始之前,我想先说两句,理解javascript系列博文是通过带领大家分析javascript执行时的内存分配情况,来解释javascript原理,具体会涵盖javascript预加载,闭包原理,面象对象,执行模型,对象模型...,文章的...

    理解Javascript_05_原型继承原理

    prototype与[[prototype]] 在有面象对象基础的前提下,来看一段代码: 代码如下: //Animal构造函数 function Animal(name){ this.name = name; } //Animal原型对象 Animal.prototype = { id:”Animal”, sleep:...

    Pky文章管理系统 Ver 2.0

    2、优化程序结构,全面采用面象对象编辑,业务处理与界面显示插件化; 3、加强数据安全性; 4、后台管理增加数量重新统计功能; 5、后台管理增加系统参数修改功能; 6、全新的安装向导; 7、后台管理增加PTB...

    华报智能报表工具

    开发人员既可以像设计Form那样灵活地摆放报表对象并设置他们的属性,也可以象使用Excel那样编辑不规则的表格。 提供了丰富的报表对象帮助您组合成任意复杂的报表样式。 采用“即点即输”的方式进行报表对象的文本...

    asp.net知识库

    常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把Array转换为ArrayList C# 2.0 在.NET 2.0中,让你的组件也可以绑定 .NET20 一种简单的窗口控件UI状态控制方法 翻译MSDN...

Global site tag (gtag.js) - Google Analytics