javascript的函数调用继承实现
2010-05-18 00:42
357 查看
看到一篇入门的JS继承文章,转载下
原地址:http://sdcyst.javaeye.com/blog/288813
类变量/类方法/实例变量/实例方法
先补充一下以前写过的方法:
在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;
举个例子:
Js代码
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
---------------------------------
实例变量和实例方法都是通过实例对象加"."操作符然后跟上属性名或方法名来访问的,但是我们也可以为类来设置方法或变量,
这样就可以直接用类名加"."操作符然后跟上属性名或方法名来访问.定义类属性和类方法很简单:
Js代码
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方法,实现如下:
Js代码
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属性中,这样所有的实例对象就可以调用这个方法,
从而节省空间.
Js代码
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.
Js代码
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;
}
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.
*/
//属性横坐标
this
.y = y; //属性纵坐标
Circle.call(this
,radius); //调用父类的方法,相当于调用this.Circle(radius),设置PositionCircle类的
//radius属性
*/
alert(pc.constructor); //Circle
/*为此,我们在设计好了类的继承关系后,还要设置子类的constructor属性,否则它会指向父类
的constructor属性
*/
PositionCircle.prototype.constructor = PositionCircle
alert(pc.constructor); //PositionCircle
原地址:http://sdcyst.javaeye.com/blog/288813
类变量/类方法/实例变量/实例方法
先补充一下以前写过的方法:
在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;
举个例子:
Js代码
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
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
---------------------------------
实例变量和实例方法都是通过实例对象加"."操作符然后跟上属性名或方法名来访问的,但是我们也可以为类来设置方法或变量,
这样就可以直接用类名加"."操作符然后跟上属性名或方法名来访问.定义类属性和类方法很简单:
Js代码
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的年龄较大
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方法,实现如下:
Js代码
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
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属性中,这样所有的实例对象就可以调用这个方法,
从而节省空间.
Js代码
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
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.
Js代码
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;
}
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.
*/
//属性横坐标
this
.y = y; //属性纵坐标
Circle.call(this
,radius); //调用父类的方法,相当于调用this.Circle(radius),设置PositionCircle类的
//radius属性
*/
alert(pc.constructor); //Circle
/*为此,我们在设计好了类的继承关系后,还要设置子类的constructor属性,否则它会指向父类
的constructor属性
*/
PositionCircle.prototype.constructor = PositionCircle
alert(pc.constructor); //PositionCircle
相关文章推荐
- 关于javascript中变量是如何存储调用、以及函数的继承实现
- javascript 用函数实现“继承”
- 常用效果的实现(Javascript的子父页访问、函数调用)
- Javascript 对象方式实现命名参数调用(下):自动包装偏函数
- javascript除call函数外实现继承的方式之一
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用。
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用。
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用
- JavaScript中prototype如何实现函数继承
- JavaScript实现同时调用多个函数的方法
- javascript 用函数实现继承详解
- 基于JavaScript实现继承机制之调用call()与apply()的方法详解
- javascript iframe内的函数调用实现方法
- JavaScript面向对象-基于原型链和函数伪装组合的方式实现继承
- 基于JavaScript实现继承机制之调用call()与apply()的方法详解
- javascript中用函数属性实现函数调用计数
- JavaScript实现显示函数调用堆栈的方法
- java通过javascript引擎调用javascript数学函数实现计算
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用。
- JavaScript Arguments 实现可变参数的函数,以及函数的递归调用