`
q272156430
  • 浏览: 275838 次
  • 性别: 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面象对象编程

    JavaScript中的面向对象编程(Object-Oriented Programming, OOP)是一种设计模式,它允许开发者创建具有封装、继承和多态性的复杂结构。在JavaScript中,虽然没有像Java或C++那样的类关键字,但它通过函数和原型...

    JavaScript面象对象设计

    ### JavaScript面向对象设计详解 #### 一、面向对象的基本概念 面向对象编程(Object-Oriented Programming,简称 OOP)是一种编程范式,其核心思想是将程序中的数据和操作这些数据的方法组织在一起,形成一个整体...

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

    在探讨JavaScript面向对象编程时,成员变量和共享成员变量是非常重要的概念。JavaScript中的对象可以视为具有属性(成员变量)和方法(成员函数)的实例。我们通过构造函数或者直接使用对象字面量来创建对象,并且...

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

    javascript面象对象设计经典例子

    js面向对象游戏开发,飞机大战

    在JavaScript的世界里,面向对象编程(Object-Oriented Programming,OOP)是一种常见的设计模式,尤其在游戏开发中,它能帮助我们构建复杂且可扩展的代码结构。本项目"js面向对象游戏开发,飞机大战"是利用...

    js面向对象.pdf

    ### JavaScript面向对象编程详解 #### 6.1 JavaScript中支持面向对象的基础 ##### 6.1.1 使用定义函数的方式定义类 在面向对象编程(OOP)中,“类”是核心概念之一,它代表着一类事物的抽象。在JavaScript中,可以...

    ArcGIS for JavaScript 车辆轨迹回放

    在GIS领域,空间数据通常以几何对象(如点、线、面)的形式存在,而时间戳则与这些几何对象关联,记录了每个位置点的时间信息。在车辆轨迹中,每一条轨迹可以看作是一系列有序的地理坐标点,每个点都有对应的时间...

    Javascript添加要素

    在这些场景中,"要素"通常指的是地图上的点、线和面对象,它们用于表示地理实体。本教程将深入探讨如何利用JavaScript实现这一功能。 首先,让我们了解“点”要素。在JavaScript中,一个点要素通常表示一个精确的...

    HTMLTest(js面向对象)

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

    Jquery UI插件

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

    判断点是否在面内

    2. 创建面对象:接着,我们需要构建Polygon对象来表示多边形。这通常涉及提供一个包含多个坐标对的数组,这些坐标对定义了多边形的边界。 ```javascript var polygonCoordinates = [[...], [...], ...]; // 多边形...

    点,线,面对象转成GeoJson格式存储起来

    它包括了点(Point)、线(LineString)、面(Polygon)等几何类型,以及Feature对象,用于包含属性数据。GeoJSON的特点是结构清晰,易于解析,支持多种GIS操作。 2. **SuperMap .NET库** SuperMap是一个全面的GIS...

    63.(leaflet篇)leaflet+turf获取geojson面的中心点与质心.rar

    在本教程中,我们将深入探讨如何使用Leaflet和Turf.js来获取GeoJSON几何对象(如面)的中心点和质心。 首先,了解GeoJSON是一种开放的数据格式,常用于存储地理空间数据,包括点、线、面等多种类型。GeoJSON对象由...

    arcgis server javascript api 点线面buffer

    ### ArcGIS Server JavaScript API 实现点、线、面的 Buffer 分析 #### 一、概述 ArcGIS Server JavaScript API 是一款强大的工具集,允许开发者在 Web 应用程序中集成地理信息系统 (GIS) 功能。它支持多种 GIS ...

    理解Javascript

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

    GeoJson规范 (2).pdf

    5. Polygon:面是一个具有多个坐标值的对象,表示一个面域的位置。 6. MultiPolygon:多面是一个面对象的数组,表示多个面域的位置。 7. GeometryCollection:几何集合是一个geometry对象的数组,表示多种几何体的...

    GIS通过js判断点是否在面对象中

    而面对象(多边形)是由一系列线段(边)围成的闭合区域,可以代表地理上的区域,如行政区、湖泊、森林等。 在JavaScript中,我们可以利用库如Leaflet、OpenLayers或Mapbox GL JS来处理GIS相关的任务。这些库提供了...

Global site tag (gtag.js) - Google Analytics