`
chingho
  • 浏览: 12847 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
最近访客 更多访客>>
社区版块
存档分类
最新评论

怎么使用javascript实现类的功能

阅读更多

经过前段时间,学习《ajax完全自学手册》后,才知道javascript原来还可以这么写。

 学过java,c#,vb的都知道类的概念,而类具有继承、封装、多态等功能。而javascript它不是面向对象语言,它是解释性语言。

但我们同样可以使用javascript来实现继承、多态。

 javascript实现类,有多种方法。

  

方法一:构造方法。

代码
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->function coder(){
this.name = '小王';
this.job = '程序员';
this.coding = function ()
{
alert(
'我正在写代码');
}
}

var coder=new coder();
alert(coder.name);
coder.coding();

 

 方法二:工厂方法。

代码
function createCoderFactory(){
var obj=new Object();
obj.name
= '小王';
obj.job
= '程序员';
obj.coding
= function (){
alert(
'我正在写代码');
};
return obj;
}
var coder = createCoderFactory();
alert(coder.name);
coder.coding();

  但工厂方法和构造方法都有着一个相同的缺点,就是每创建一个实例,都会实例化该类的每个函数。 

 方法三:原形链。

代码
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->function coder(){}
coder.prototype.name
= '小王';
coder.prototype.job
= '程序员';
coder.prototype.coding
= function(){
alert(
'我正在写代码');
};
var coder = new coder();
alert(coder.name);
coder.coding();

注意:书上说:原型链有个缺点就是它所有属性都共享,只要一个实例改变其他的都会跟着改变。 测试如下:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->var coder1 = new coder();
var coder2 = new coder();
alert(coder1.name);
/*显示“小王”*/
coder2.name
= '老王';
alert(coder1.name);
/*这个显示“小王” 如果按书上说的应该是显示"老王"*/
alert(coder2.name);
/*这个显示“老王”*/

alert(coder1.name);如果按书上说的应该是显示"老王",但这里显示的是“小王”,所以书上出错了。

  

方法四:混合方式。

 以上三种都有着各自的缺点,所以我们要加以改进。

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->function coder(){
this.name = '小王';
this.job = '程序员';
}
coder.prototype.coding
= function(){
alert(
'我正在写代码');
};

 

方法五:动态原链。

要解决前三种的缺点,还有一种方法。

代码
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->function coder(){
this.name = '小王';
this.job = '程序员';
if (typeof(coder._init) == 'undefined'){
this.coding = function ()
{
alert(
'我正在写代码');
};
this._init = true;
}
}

  这个方法呢,当第一次使用时,由于_init没初始化,就会执行以下的代码,实例化coding函数。以后就不会再执行,这样就只实例化函数一次。   

分享到:
评论

相关推荐

    javascript 实现排序分类功能

    javascript 实现排序分类功能, 冒泡排序, 快速排序等等

    JavaScript 实现基础 LinkedList 功能

    复习内容

    JavaScript\JS\按钮类\按钮完成复制和剪切功能

    JavaScript\JS\按钮类\按钮完成复制和剪切功能

    Javascript实现图片的放大镜功能效果

    以前写过一个jQuery的图片放大效果,但是存在着一些小...主要为magnifier类,里面的主要方法有: init:运行方法 start:则是鼠标移入div的事件处理 move:则是鼠标在div中移动的事件处理 end:鼠标移出后的事件处理

    C#实现JavaScript帮助类

    使用帮助类可以极大地简化开发过程,尤其是在处理复杂的功能或涉及多个对象之间的交互时。例如,一个日期帮助类可以提供各种日期计算和格式化的方法,一个字符串帮助类可以提供字符串处理和转换的方法,等等。

    javascript实现多级菜单(包括支持IE6)

    《网页开发手记HITML+CSS+JavaScript》中的菜单是二级的,增加了支持三级菜单功能,第三级的定位问题困扰我很久,最后通过设置上级li的position:relative实现。小修改就可以支持四级、五级...菜单。

    使用JavaScript + CSS 实现的Tab 菜单特效

    使用JavaScript + CSS 实现的Tab菜单随着时间的变化而变化的特效功能。

    Javascript编程 类的继承及封装:Class

    笔者历经多年javascript的开发,痛彻体会javascript面向对象编程的不便性,精心制作了一个类的定义与继承功能的js,实现了在javascript中对类的定义、继承、封装机制,主要功能特征包括:  一、 统一了类定义的语法...

    JavaScript课程设计实训大作业:购物网站(含源代码+运行截图+实训报告)

    基本实现了网站显示商品分类和商品信息,提供搜索商品、浏览商品的功能;注册和登录,查看订单、购物车和个人信息注册验证;图片放大特效,浮动广告,弹窗广告,文字滚动,商品秒杀活动等。 1.2开发技术 综合运用...

    javascript实现面向对象类的功能书写技巧

    javascript实现类,有多种方法。 方法一:构造方法。 代码 代码如下: function coder(){ this.name = ‘小王’; this.job = ‘程序员’; this.coding = function () { alert&#40;‘我正在写代码’&#41;; } } var ...

    Javascript实现Marquee的滚动功能

    鄙人上传的此脚本(含Demo)是一个Marquee类,开放了几个接口轻松实现滚动的方向、延时、尺寸等参数的设置,对从事网页前端开发的设计人员有很大的好处。需要注意的地方就是:table的width要大于外框的width(呵呵,...

    javascript如何实现暂停功能

    Javascript本身没有暂停功能(sleep不能使用)同时 vbscript也不能使用doEvents,故编写此函数实现此功能。 javascript作为弱对象语言,一个函数也可以作为一个对象使用。 比如:  function Test(){  alert&#...

    贪吃蛇小游戏-JavaScript/类

    贪吃蛇被业内视为真正意义上的第一款手机游戏,玩法简单到极致,随着诺基亚手机的...代码包涵了食物、蛇的移动、蛇的长度控制及死亡判定等等的实现,虽然效果不美观,但是大体功能都全实现。主要还是用到js中类的概念。

    HTML5页面实现录音功能

    目前基于webikit(谷歌之类的webikit)和Gecko(Firefox 52~57)都可以(不支持苹果移动设备),测试地址 https://sms.reyo.cn/ 用户名:aa ...我们就是想实现像微信一样的能发送语音的聊天数据(只是我们用h5在网页上实现):

    原生JavaScript实现购物车

    自己用原生JavaScript写的一个购物车的网页,里面有一些简单的功能,根据数量计算价钱之类的

    JavaScript教程

    JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML...完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。

    基于Flask,jquery,echarts,JavaScript实现的餐饮类消费数据的可视化分析系统+源代码+文档说明+界面截

    基于Flask,jquery,echarts,JavaScript实现的餐饮类消费数据的可视化分析系统+源代码+文档说明 - 不懂运行,下载完可以私聊问,可远程教学 该资源内项目源码是个人的毕设,代码都测试ok,都是运行成功后才上传资源,...

    JavaScript教程--从入门到精通

    JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML...完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。

    【JavaScript源代码】js实现类选择器和name属性选择器的示例步骤.docx

    js实现类选择器和name属性选择器的示例步骤  jQuery的出现,大大的提升了我们操作dom的效率,使得我们的开发更上一层楼,如jQuery的选择器就是一个很强大的功能,它包含了类选择器、id选择器、属性选择器、元素选择...

    javascript实训

    在学校完成的javascript的实训 项目:购物网站 基本功能: 网站显示商品分类和商品信息,提供搜索商品、浏览商品的功能; 用户能够注册后购物,查看订单、购物车和个人信息; 实现效果: 图片放大特效,浮动广告,...

Global site tag (gtag.js) - Google Analytics