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代码
Dec 04 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
Nuxt.js实战详解
Jan 18 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 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编写一个简单的路由类
2011/04/13 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
php图片裁剪函数
2018/10/31 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
ExpressJS入门实例
2015/01/14 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python实现键盘输入的实操方法
2019/07/16 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
几个Linux面试题笔试题
2012/12/01 面试题
2014年党员承诺书范文
2014/05/20 职场文书
任命书格式范文
2015/09/22 职场文书
同学联谊会邀请函
2019/06/24 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
Nginx HTTP跳转至HTTPS
2022/05/15 Servers