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 相关文章推荐
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 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
php中一个有意思的日期逻辑处理
2012/03/25 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
显示、隐藏密码
2006/07/01 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
微信小程序实现循环动画效果
2018/07/16 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python日志模块logbook使用方法
2019/09/19 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
假释思想汇报范文
2014/10/11 职场文书
求职推荐信范文
2015/03/27 职场文书
初中数学教学反思范文
2016/02/17 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python