OO的JavaScript并不高深,麻烦就麻烦在google出来的国人介绍文章经常罗罗嗦嗦,而且之间的说法还各有不同,摆在一起就让人看了头大。
这里重拾简单主义,以一个最简单的例子把OO Javascript说明白。
1.一个颇为精简的例子
只需理解三个关键字:
第一个是function ,JS世界里Class的定义用"function",function里面的内容就是构造函数的内容。
第二个是this指针,代表调用这个函数的对象。
第三个是prototype,用它来定义成员函数, 比较规范和保险。
//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area()
function Circle(radius)
{
this.r = radius;
}
Circle.PI = 3.14159;
Circle.prototype.area = function( ) {return Circle.PI * this.r * this.r;}
//使用Circle类
var c = new Circle(1.0);
alert(c.area());
另外成员函数定义还可以写成这样:
function compute_area(){return Circle.PI * this.r * this.r;}
Circle.prototype.area=compute_area;
2.继承
注意两点
1.定义继承关系 ChildCircle.prototype=new Circle(0); 其中0是占位用的
2.调用父类的构造函数
this.base=Circle;
this.base(radius);
//定义ChildCircle子类
function ChildCircle(radius)
{
this.base=Circle;
this.base(radius);
}
ChildCircle.prototype=new Circle(0);
function Circle_max(a,b)
{
if (a.r > b.r) return a;
else return b;
}
ChildCircle.max = Circle_max;
//使用ChildCircle子类
var c = new ChildCircle(1);
var d = new ChildCircle(2);
var bigger = d.max(c,d);
alert(bigger.area());
3.var式定义
JS还支持一种var Circle={raidus:1.0,PI:3.1415}的形式,语法就如CSS的定义。
因此如果Circle只有一个实例,下面的定义方式更简洁:
var newCircle=
{
r:1.0,
PI:3.1415,
area: function(){ return this.PI * this.r * this.r;}
};
alert(newCircle.area());
BTW.吃饱了撑着可以看看
Rails带的OO Javascript库--Prototype其实,Javascript现在的语法真的不适合那么别扭的写成OO模式....
分享到:
相关推荐
总的来说,这个简单的 JavaScript 倒计时示例展示了如何利用 JavaScript 处理日期和时间,并在网页上实时更新倒计时。虽然它并不复杂,但足以作为初学者理解 JavaScript 时间处理和动态更新页面内容的一个基础实例。...
为了更直观地理解GPU.js如何工作,我们可以通过一个简单的乘法示例来演示其使用方法。 ##### 1. 安装GPU.js 首先,你需要安装GPU.js。对于Node.js项目,可以通过以下命令进行安装: ```bash npm install gpu.js -...
在这个例子中,我们利用JavaScript实现了一个小工具,用于对比两个文本输入框中列出的人员名单,以找出哪些人没有提交材料。这个小工具通过差集的概念来实现,避免了手动逐个比较的繁琐过程。 首先,我们来看一下...
在本示例中,我们看到一个使用Vue.js框架构建的简单购物车应用。Vue.js是一个轻量级的前端JavaScript框架,用于构建用户界面。在这个案例中,Vue.js被用来动态渲染表格,展示书籍信息,包括书籍ID、名称、出版日期、...
在本示例中,我们看到一个使用JavaScript(特别是ES6特性)实现的简易购物车功能。这个购物车的实现基于HTML、CSS和JavaScript,通过面向对象编程的方式进行组织。下面我们将详细探讨其中的关键知识点。 1. **ES6 ...
这个简单的JavaScript抽奖小功能为我们提供了一个基本的实现思路,可以在此基础上根据需求进行扩展和定制,适用于各种在线抽奖活动。了解并掌握这些基础知识对于任何JavaScript开发者来说都是至关重要的,因为它们是...
首先,我们来看一个简单的柯里化函数的例子。假设有一个函数`add(a, b)`,用于计算两个数字的和。如果我们想要实现柯里化,可以这样做: ```javascript function curryAdd(a) { return function(b) { return a + ...
此外,示例代码中还提供了一个简单的商品展示案例,商品信息被包含在一个具有特定样式的`div`元素内,这可能是一个用于显示商品图片、名称和秒杀状态的地方。在实际项目中,这部分可能会和服务器端交互,获取商品的...
在这个例子中,我们监听'mousemove'事件,每次鼠标在文档内移动,都会更新一个ID为'coordinateDisplay'的元素,显示当前鼠标的位置坐标。 总之,JavaScript的MouseEvent是实现用户交互和增强网页动态性的基础工具。...
在示例代码中,我们看到一个类名为`gg`的`div`元素作为广告容器,它的背景设为一张广告图片。此外,还有一个类名为`img`的`img`元素,代表关闭广告的图标,通常放置在广告的右上角。 ```html 关闭"> ``` 接下来...
这篇文档介绍了一个使用JavaScript实现的简单圆盘时钟的示例,通过CSS和JavaScript结合,动态更新时钟指针以反映实际时间。 首先,我们来看CSS部分。CSS主要负责定义时钟的样式和布局: ```css .disc { position:...
以下是如何使用JavaScript来创建一个简单的移动端签字板的详细步骤: 首先,我们需要HTML结构来展示签字区域。在提供的代码中,有两个主要的div元素。第一个包含文字提示“验收人签字:”,第二个是一个具有canvas...
以下是一个简单的示例: ```javascript function getElementsByClass(className) { var classArr = []; var tags = document.getElementsByTagName("*"); for (var i = 0; i ; i++) { if (tags[i].nodeType ==...
以下是一个简单的例子,展示了如何筛选出数组中大于10的元素: ```javascript function Search(arr) { var newArr = []; for (var i = 0; i ; i++) { if (arr[i] > 10) { newArr[newArr.length] = arr[i]; } ...
原型链继承是通过让一个对象的原型指向另一个对象来实现继承。这种方式简单直观,但在实际应用中存在一些问题,比如无法实现子类型化,且容易导致原型污染等问题。 示例: ```javascript function Class1(name) { ...
这个例子展示了如何使用HTML、CSS和JavaScript来创建一个简单的图片轮播功能。以下是详细的知识点解析: **HTML结构**: HTML部分创建了一个包含图片和两个按钮的`<div>`元素。图片`<img>`具有`id="myImg"`以便于...
通过以上代码,我们实现了一个简单的基于JavaScript的放大镜效果。这种效果可以有效地提高用户体验,特别是在电商网站中,用户可以通过这种方式更好地观察商品细节。此外,这个示例还展示了如何利用JavaScript来处理...
在JavaScript中,`<canvas>`元素是一个非常强大的工具,用于创建动态、交互式的矢量图形。这个元素本身不具备任何行为,但提供了JavaScript可以利用的绘图API,允许开发者在画布上绘制各种图形,包括文字、线条、...
在这个例子中,我们使用Element UI库的按钮组件`<el-button>`和一个隐藏的`<input type="file">`来触发文件选择对话框: ```html ()">点击上传 ()" ref="uploadFile2" enctype="multipart/form-data" style=...
在本示例中,我们将探讨如何使用Vue.js框架来实现一个简单的计算器功能。Vue.js是一个流行的前端JavaScript框架,用于构建用户界面。以下是实现这个计算器的关键步骤和知识点: 1. **HTML布局**: HTML部分是...