分享
 
 
 

OOP In JS [JS脚本中的面向对象]

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

目标

让我们轻松的实现Javascript的面向对象

我们将了解在JS中如何去创建类和模块。

通过prototype来继承.

假设有两个类: "Animal" and "Dog", Dog 从 Animal 继承过来.

Animal 类如下:

//constructor of Animal

var Animal = function(){

}

//eat method of Animal

Animal.prototype.eat = function(food){

//process the food here

}

创建实例并使用其方法:

//create an Animal object

myAnimal = new Animal();

//let the animal eat

myAnimal.eat("yummy food");

Dog 类看起来也非常相似。

我们仅仅来通知 Dog 它是继承于 Animal 就可以了:

//constructor for Dog

var Dog = function(){

}

//"inheriting" from Animal

Dog.prototype = new Animal();

//resetting the constructor to Dog

Dog.prototype.constructor = Dog;

//bark method of Dog

Dog.prototype.bark = function(){

//make some noise

}

现在我们来创建一个 Dog 类,它具有 bark 和 eat 方法:

//create a new Dog object

var myDog = new Dog();

//let it bark

myDog.bark();

//throw it a bone

myDog.eat("yummy bone");

可以看出 Dog 继承了 Aninal 类的 "eat" 方法.

Let us assume the dog needs to first pre process the food(chew the bone) and then have it processed by the super class Animal.

We simply overwrite the "eat" method and call the super class' "eat" method.

Dog.prototype.eat = function(food){

//preprocess the food here

//call the super class' eat method with the dog as the this object

Animal.prototype.eat.call(this, food);

}

Now we have a dog how chews the bone:

//创建一个新的Dog对象

var myDog = new Dog();

//使用eat方法

myDog.eat("yummy bone");

让它更加简单.

As you have noticed above there is a lot of typing involved in setting up a subclass:

写一个构造器

追加它的属性或方法

在继承过来的新类中重载它的属性或方法.

Every time the class is used for prototyping its constructor is called.

但这也可能不是我们想要的效果.

让我们来简化这个新类.

做到让 Cat 类像如下所示:

//从Animal中扩展出一个新类 "Cat".

var Cat=Class("Cat", Animal, function(thisClass, Super){

//called when Cat is being instaciated

thisClass.prototype.init = function(){

//在这里初始化

alert("Cat.prototype.init()")

}

thisClass.prototype.eat = function(food){

//处理如何消化食物

}

})

这样一来 Cat类就可以像其他普通类一样的使用了.

Class function

The Class function:

设计一个普通的类构造器

继承于父级类;

it's property className is set;

a default toString method is created for convinience;

and the classScope function is run with the class and the super class as parameters.

When an object is created from the new class the init method is called with all parameters passed to the constructor.

When a prototype for subclassing is created from a class, the init method is not called.

This makes init act just like any other constructor function in JavaScript.

//create a new class. The init method of cat should not be called.

var GreenCat = Class("GreenCat", Cat, function(){});

alert("GreenCat created\nCat.prototype.init() was not called.");

//create an object of GreenCat

var myGreenCat = new GreenCat();

alert("myGreenCat created.");

数据隐藏

If you take a closer look at the Cat above you notice, that there is a function being passed to Class.

All variables declared with var withing this function are private to this function.

We can now create a class which can use some semi private objects only visible to the class itself.

var SomeClass=Class("SomeClass", function(thisClass, Super){

//function only visible within this class

var someFunction = function(x){

return 2 * x;

}

//a method which calls the "private" function

thisClass.prototype.someMethod=function(arg){

return someFunction(arg);

}

})

使用方式如下:

//create an object of SomeClass

var obj = new SomeClass();

//try the method the return value should be 6

alert(obj.someMethod(3))

同样的方法可以用来创建拥有子类、函数和其他方法属性的输出类和模块.

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有