类变量/类方法/实例变量/实例方法
先补充一下以前写过的方法:
在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面向对象技术基础
javascript面向对象技术基础 整理排版了一下 外带了个闭包的文章，下了可以直接打印了
一个很好的学习javascript的资料，详细叙述了javascript面向对象的原理，并含有大量的程序例子说明。非常实用。
看了很多介绍javascript面向对象技术的文章,很晕.为什么?不是因为写得不好,而是因为太深奥.
看了很多介绍javascript面向对象技术的文章,很晕.为什么?不是因为写得不好,而是因为太深奥.javascript中的对象还没解释清楚怎么回事,一上来就直奔主题,类/继承/原型/私有变量....
本教程针对那些对javascript语言有一定的了解，从事过web开发，并且在实际中或多或少地使用过javascript的开发和技术人员 javascript语言基础的语法在此就直接略过，不做介绍 通过本教程的学习，学习者应该了解...
5.1 JavaScript编程基础 5.1.1 JavaScript简介 5.1.2 Javascript的使用方法 5.1.3 语法规则 5.1.4 运算符和表达式 5.1.5 函数 5.1.6流程控制 5.1.7 事件处理 5.2 JavaScript对象编程 5.2.1 Object 类型 5.2.2 Array...
JavaScript对象，数组，字符串，使用正则表达式操纵字符串，客户端，控制文档结构的模型，JavaScript事件驱动模型，CSS，Cookie，XML和JSON，Ajax，深入JavaScript面向对象编程，深入JavaScript函数式编程，深入...
本书是一部独具特色的面向对象技术著作。书中结合代码示例生动透彻地讲述了面向对象思想的精髓，让读者真正学会以对象方式进行思考。此外，本书还讨论了各种与面向对象概念密切相关的应用主题，包括XML、UML建模语言...
数组，字符串，使用正则表达式操纵字符串，客户端，控制文档结构的模型，JavaScript事件驱动模型，CSS，Cookie，XML和JSON，Ajax，深入JavaScript面向对象编程，深入JavaScript函数式编程，深入JavaScript动态化编程...
-(4) JavaScript面向对象的支持--(5) JavaScript面向对象的支持--(6) JavaScript精简学习1：基础知识 JavaScript精简学习2：浏览器输出 JavaScript精简学习3：图像 JavaScript精简学习4：表单 ...
从颇具深度的JavaScript语言基础到作用域(链)，从引用类型到面向对象编程，从极其灵活的匿名函数到闭包的内部机制，从浏览器对象模型(BOM)、文档对象模型(DOM)到基于事件的Web脚本设计，从XML(E4X)到Ajax及JSON，从...
《JavaScript核心概念及实践》不仅帮助读者迅速掌握JavaScript基础知识和核心技术，而且通过实例讲解如何将这些知识和技术理解应用到实际工作中，提升编程能力，以简洁、优美的代码开发出功能强大且更易于维护和扩展...
JavaScript高级篇：揭示JavaScript的运行机理和高级应用，如面向对象编程、函数式编程和元编程。Ajax篇：Ajax是上帝赐予JavaScript的礼物。凭借着Ajax，JavaScript拥有了异步调度服务端业务逻辑的能力。本篇除介绍...
JavaScript高级篇：揭示JavaScript的运行机理和高级应用，如面向对象编程、函数式编程和元编程。Ajax篇：Ajax是上帝赐予JavaScript的礼物。凭借着Ajax，JavaScript拥有了异步调度服务端业务逻辑的能力。本篇除介绍...
从颇具深度的javascript语言基础到作用域(链)，从引用类型到面向对象编程，从极其灵活的匿名函数到闭包的内部机制，从浏览器对象模型(bom)、文档对象模型(dom)到基于事件的web脚本设计，从xml(fax)到ajax及json，从...