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实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
vue组件生命周期详解
Nov 07 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
vue实现计步器功能
Nov 01 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 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绘图之生成饼状图的方法
2015/01/24 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
js控制frameSet示例
2013/09/10 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
python批量制作雷达图的实现方法
2016/07/26 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
python实现求最长回文子串长度
2018/01/22 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
python保存文件方法小结
2018/07/27 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
平面设计岗位职责
2013/12/14 职场文书
大学生校园创业计划书
2014/02/08 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
企业读书活动总结
2014/06/30 职场文书
课外小组活动总结
2014/08/27 职场文书
小学班级特色活动方案
2014/08/31 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
单位综合评价意见
2015/06/05 职场文书