JavaScript 实现类的多种方法实例

 更新时间:2013年05月01日 14:30:27   作者:  
JavaScript 实现类的多种方法实例,需要的朋友可以参考一下

构造方法

复制代码 代码如下:

function coder()
{
    this.name = '现代魔法';
    this.job = 'Web 开发者';
    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();

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

原型链

复制代码 代码如下:

function coder(){}
coder.prototype.name = '现代魔法';
coder.prototype.job = '程序员';
coder.prototype.coding = function(){
    alert('我正在写代码');
};
var coder = new coder();
alert(coder.name);
coder.coding();

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

复制代码 代码如下:

var coder1 = new coder();
var coder2 = new coder();
alert(coder1.name);     /*显示现代魔法*/
coder2.name = 'nowamagic';
alert(coder1.name);     /*显示nowamagic*/
alert(coder2.name);     /*这个也显示nowamagic*/

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

复制代码 代码如下:

function coder()
{
    this.name = '现代魔法';
    this.job = '程序员';
}
coder.prototype.coding = function(){
    alert('我正在写代码');
};

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

复制代码 代码如下:

function coder()
{
    this.name = '现代魔法';
    this.job = '程序员';
    if (typeof(coder._init) == 'undefined')
    {
        this.coding = function ()
        {
            alert('我正在写代码');
        };
        this._init = true;
    }
}

相关文章

  • js实现二代身份证号码验证详解

    js实现二代身份证号码验证详解

    本文给大家分享一段超级全面的二代身份证号码验证程序,由JS编写而成,可以校验身份证的地址码、出生日期码、顺序码和数字校验码。是身份证去伪存真的一大利器。
    2014-11-11
  • laydate如何根据开始时间或者结束时间限制范围

    laydate如何根据开始时间或者结束时间限制范围

    这篇文章主要为大家详细介绍了laydate根据开始时间或者结束时间限制范围的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • javascript 实现子父窗体互相传值的简单实例

    javascript 实现子父窗体互相传值的简单实例

    本篇文章主要是对javascript 实现子父窗体互相传值的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 微信小程序实现流程进度的图样式功能

    微信小程序实现流程进度的图样式功能

    最近正在做微信小程序,需要实现一个流程进度的图样式,下面小编给大家带来了微信小程序实现流程进度的图样式功能实例代码,需要的朋友参考下吧
    2018-01-01
  • Bootstrap实现下拉菜单多级联动

    Bootstrap实现下拉菜单多级联动

    这篇文章主要为大家详细介绍了Bootstrap实现下拉菜单多级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 用javascript做拖动布局的思路

    用javascript做拖动布局的思路

    这几天不是很忙,就找了些拖动布局方面的资料看看,也学着写了个拖动布局的效果,没想到花了好多时间, 七拼八凑,总算是把这个效果写出来了。哎!还是js的功夫太差。因为是边找资料边写的,很多地方印象不深, 时间一长,再重新写估计也难,所以把当时的思路记录一下!也希望大虾指点一下!
    2008-05-05
  • javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)

    javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)

    本篇文章主要介绍了javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome) 需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js日历相关函数使用详解

    js日历相关函数使用详解

    这篇文章主要为大家详细介绍了js日历相关函数的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Javascript函数缓存的实现及应用场景

    Javascript函数缓存的实现及应用场景

    Javascript函数缓存是一种提高网页性能的重要技术,通过将函数结果存储在缓存中,避免重复计算,从而提高页面加载速度和响应速度,本文主要介绍了Javascript函数缓存的实现及应用场景,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】

    JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】

    这篇文章主要介绍了JS图片延迟加载插件LazyImgv1.0用法,结合实例形式分析了使用图片延迟加载插件LazyImgv1.0的注意事项与核心操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-09-09

最新评论