JavaScript 实现类的多种方法实例


Posted in Javascript onMay 01, 2013

构造方法

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;
    }
}
Javascript 相关文章推荐
js 图片等比例缩放代码
May 13 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 #Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 #Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 #Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 #Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 #Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 #Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 #Javascript
You might like
mysql5写入和读出乱码解决
2006/11/25 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
深入浅析php json 格式控制
2015/12/24 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
python变量不能以数字打头详解
2016/07/06 Python
Python常见工厂函数用法示例
2018/03/21 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
详解python3中tkinter知识点
2018/06/21 Python
python组合无重复三位数的实例
2018/11/13 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
软件测试有哪些?什么是配置项?
2012/02/12 面试题
文秘专业大学生求职信
2013/11/10 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
打架检讨书300字
2014/02/02 职场文书
小学优秀教师材料
2014/12/15 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电